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.
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.
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:
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.
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.
Confirm your installation and access by running:
npx untitledui-mcp --test
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 |
The MCP allows for rapid UI creation through simple prompts to the AI, facilitating the development of:
You: [paste screenshot] "Recreate this with UntitledUI components"
You: "Build me a SaaS pricing page with 3 tiers and a FAQ section"
You: "Set up the main app layout with collapsible sidebar and header with user dropdown"
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.
For more information, visit UntitledUI and explore the capabilities of the UntitledUI MCP.
No comments yet.
Sign in to be the first to comment.