UntitledUI MCP

Pitch

Description

Comments

About this project

UntitledUI MCP connects AI agents to a refined library of Untitled UI components. It allows for effortless access to expertly designed elements, ensuring that generated UIs maintain a professional polish. By leveraging the MCP, developers can integrate authentic components directly into their applications for enhanced functionality and user experience.

The UntitledUI MCP (Multi-Component Protocol) server facilitates seamless integration of AI tools with the UntitledUI component library, enabling AI agents to fetch authentic UI components instead of generating designs from scratch. This enhances the consistency and polish of the UI, ensuring that it meets professional standards.

Key Benefits

With the use of UntitledUI MCP, AI tools can directly access meticulously crafted UntitledUI components, such as modals and buttons, ensuring detail and quality in the UI design process. This functionality addresses the limitations of AI-generated interfaces by providing real components that reflect the intended design aesthetic.

Getting Started

Start with an UntitledUI Starter Kit:
To leverage UntitledUI components effectively, begin with a pre-configured starter kit that prepares the necessary Tailwind CSS setup, design tokens, and providers:

Next.js:
```
git clone https://github.com/untitleduico/untitledui-nextjs-starter-kit my-app
cd my-app && npm install
```
Vite:
```
git clone https://github.com/untitleduico/untitledui-vite-starter-kit my-app
cd my-app && npm install
```
Each starter kit is configured with:
- Tailwind CSS with all UntitledUI design tokens
- Theme provider for light/dark mode
- Toast notifications
- Routing setup
- All necessary dependencies

Add the MCP Server:
To incorporate the MCP server into your project, execute:

Claude Code:

claude mcp add untitledui -- npx untitledui-mcp

Cursor / VS Code:
Add the following to .cursor/mcp.json:

{
  "mcpServers": {
    "untitledui": {
      "command": "npx",
      "args": ["-y", "untitledui-mcp"]
    }
  }
}

This setup allows immediate access to base components like buttons, inputs, and avatars without requiring authentication.

Optional Pro Components Authentication

To unlock access to additional application components such as modals and dashboards, authenticate using your UntitledUI Pro license:

npx untitledui@latest login

Follow the browser prompts to authenticate and save your license key to ~/.untitledui/config.json, or set it manually in your MCP config.

Validate Your Setup

Confirm your installation and access by running:

npx untitledui-mcp --test

Available Tools for Your AI

Utilize the following tools to enhance the development experience:

Tool	Description
`search_components`	Find components by name or description
`list_components`	Browse a category of components
`get_component_with_deps`	Fetch a component along with all its dependencies
`get_component`	Fetch a single component
`get_component_file`	Retrieve a single file for larger components
`list_examples`	Browse available page templates
`get_example`	Fetch a complete page template

Create UIs with Ease

The MCP allows for rapid UI creation through simple prompts to the AI, facilitating the development of:

Complete pages from a screenshot:

You: [paste screenshot] "Recreate this with UntitledUI components"

Professional pricing pages in seconds:

You: "Build me a SaaS pricing page with 3 tiers and a FAQ section"

Entire app shells or layouts:

You: "Set up the main app layout with collapsible sidebar and header with user dropdown"

Troubleshooting

If components appear incorrectly or missing styles, ensure that the appropriate Tailwind configuration is in place. Import errors for base components can be resolved by correctly fetching them with dependencies.

Requirements

Node.js 18+
UntitledUI Pro license (optional for Pro components)

For more information, visit UntitledUI and explore the capabilities of the UntitledUI MCP.