Untitledui Mcp

UntitledUI MCP

让 AI Agent 获取真实 UntitledUI 组件、而非从头生成 UI 的 MCP 服务。

原因

AI 工具可以生成功能正常的 UI，但结果往往缺少专业设计系统的精致感和一致性。UntitledUI 是目前最精良的组件库之一——此 MCP 服务让 AI 直接访问其中的组件。

AI 不必根据见过的样式生成模态框，而是可以获取真实的 UntitledUI 模态框，并保留所有精心设计的细节。

快速开始

1. 使用 UntitledUI Starter Kit 开始

UntitledUI 组件需要特定的 Tailwind 配置、设计令牌和提供程序。最简单的入门方式是使用官方 Starter Kit：

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

这些 Starter Kit 已预先配置好：

• 包含所有 UntitledUI 设计令牌的 Tailwind CSS
• 浅色／深色模式的主题提供程序
• Toast 通知
• 路由设置
• 所有必需的依赖项

2. 添加 MCP 服务

Claude Code：

claude mcp add untitledui -- npx untitledui-mcp

Cursor / VS Code — 添加到 .cursor/mcp.json：

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

这样即可访问基础组件（button、input、select、avatar、badge 等），无需身份验证。

3. 验证以使用 Pro 组件（可选）

若要访问应用组件（模态框、侧边栏、表格、仪表板）和营销版块，请使用 UntitledUI Pro 许可证进行验证：

npx untitledui@latest login

这会打开浏览器进行验证，并将许可证密钥保存到 ~/.untitledui/config.json。MCP 会自动检测此文件。

或者，在 MCP 配置中手动设置密钥：

{
  "mcpServers": {
    "untitledui": {
      "command": "npx",
      "args": ["-y", "untitledui-mcp"],
      "env": {
        "UNTITLEDUI_LICENSE_KEY": "<your-key>"
      }
    }
  }
}

4. 验证设置

npx untitledui-mcp --test

推荐工作流

1. 从 Starter Kit 开始 — 不要在未正确设置 Tailwind 的现有项目中直接添加 UntitledUI 组件。Starter Kit 会处理所有配置。

2. 让 AI 获取组件 — 项目设置完成后，让 AI 添加特定组件：

   • “添加一个设置模态框”
   • “我需要一个侧边栏导航”
   • “添加用户个人资料下拉菜单”

3. 根据示例构建完整页面 — 对于较大的功能，可以从页面模板开始：

   • “显示可用的仪表板模板”
   • “获取着陆页示例”

可用工具

你的 AI 可以使用以下工具：

工具	功能
search_components	按名称或描述查找组件
list_components	浏览一个类别
get_component_with_deps	获取组件及其所有依赖项
get_component	仅获取组件
get_component_file	获取单个文件（适用于大型组件）
list_examples	浏览可用的页面模板
get_example	获取完整的页面模板

你可以做什么

根据截图重建任意 UI

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

AI analyzes the design → identifies matching components
AI fetches sidebar, header, cards, tables → all with dependencies
AI assembles → production-ready page matching your screenshot

在几秒内构建完整页面

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

AI fetches marketing/pricing-sections + marketing/faq-sections
AI combines components → complete pricing page with toggle for monthly/annual
Result: Professional pricing page with all interactions working

设置整个应用外壳

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

AI fetches application/sidebars + application/headers + base components
AI wires up navigation state, theme toggle, user menu
Result: Complete app shell ready for your content

根据 UntitledUI 模板克隆页面

You: "I want a dashboard like the one in dashboards-01"

AI calls get_example { path: "application/dashboards-01/01" }
→ Returns 27 files: page layout, charts, tables, cards, all base components
→ Ready to customize with your data

混搭组件

You: "Create a settings page with sections for profile, notifications, billing, and team members"

AI searches → finds matching components for each section
AI fetches settings panels, forms, tables, modals
AI composes → cohesive settings page with consistent styling

快速开发功能

You: "Add a command palette like Linear/Notion with keyboard shortcut"

AI fetches application/command-menus
→ Complete command palette with search, keyboard navigation, sections
→ Just wire up your actions

响应格式

{
  "primary": {
    "name": "settings-modal",
    "files": [{ "path": "settings-modal.tsx", "code": "..." }],
    "baseComponents": ["button", "input", "select"]
  },
  "baseComponents": [
    { "name": "button", "files": [...] },
    { "name": "input", "files": [...] }
  ],
  "allDependencies": ["@headlessui/react", "clsx"],
  "estimatedTokens": 12500,
  "fileList": [
    { "path": "settings-modal.tsx", "tokens": 850 },
    { "path": "button/button.tsx", "tokens": 420 }
  ]
}

响应中包含令牌数估算，帮助 AI Agent 管理上下文限制。对于非常大的响应（>25K 个令牌），AI 可以使用 get_component_file 获取单个文件。

故障排除

组件外观不正确／样式缺失

UntitledUI 组件使用 bg-primary、text-display-md 等自定义 Tailwind 类以及标准 Tailwind 中没有的设计令牌。

**解决方案：**使用 UntitledUI Starter Kit。Starter Kit 包含所有必需的 Tailwind 配置和设计令牌。

基础组件导入错误

Pro 组件依赖基础组件（button、input 等）。使用 get_component_with_deps 获取组件时，会自动包含所有依赖项。

**解决方案：**确保使用 get_component_with_deps 而不是 get_component 获取 Pro 组件。

要求

• Node.js 18+
• UntitledUI Pro 许可证（仅适用于 Pro 组件）

致谢

UntitledUI 由 Jordan Hughes 创建。

• Twitter/X
• Dribbble
• UntitledUI 在 X 上
• 获取 UntitledUI Pro

许可证

MIT