UntitledUI MCP

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

1. 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

2. 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:

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.