AI 接入（MCP）

AI 写 UI 代码时最常见的问题不是不会写，而是凭印象编 API——编出不存在的 variant="primary"，或者用 bg-blue-500 而不是 bg-primary。

wui 通过 MCP（Model Context Protocol）把组件的真实 props、使用约束、示例代码和设计 token 直接暴露给 AI 工具，让它按需查询而不是猜。

不需要改你的项目

MCP 只是给 AI 工具增加一个查询数据源，不会往你的仓库里写任何东西，也不影响构建。

接入方式一：远程（推荐）

零安装，组件库更新后自动生效。

claude mcp add --transport http wui https://wui.dev/api/mcp

编辑 ~/.cursor/mcp.json（全局）或项目内的 .cursor/mcp.json：

{
  "mcpServers": {
    "wui": {
      "url": "https://wui.dev/api/mcp"
    }
  }
}

编辑项目内的 .vscode/mcp.json：

{
  "servers": {
    "wui": {
      "type": "http",
      "url": "https://wui.dev/api/mcp"
    }
  }
}

大多数客户端使用同一套格式，填入 HTTP 端点即可：

{
  "mcpServers": {
    "wui": {
      "url": "https://wui.dev/api/mcp"
    }
  }
}

接入方式二：本地（stdio）

需要离线使用、或想锁定某个版本时用这种方式：

claude mcp add wui -- npx -y @wui/mcp

{
  "mcpServers": {
    "wui": {
      "command": "npx",
      "args": ["-y", "@wui/mcp"]
    }
  }
}

如果你部署了自己的 registry，用 --registry 指向它：

npx -y @wui/mcp --registry https://你的站点/r

验证是否接上

重启 AI 工具后，问它一句：

wui 的 Button 有哪些 variant？

接上了会看到它调用 wui_get_component，并准确答出 default / destructive / outline / secondary / ghost / link——这些值直接来自组件的 TypeScript 类型，不是模型的记忆。

在 Claude Code 里也可以直接用 /mcp 查看连接状态。

提供了哪些工具

工具	作用
`wui_overview`	技术栈、导入路径、设计 token 约定和硬性规则
`wui_list_components`	列出全部组件，支持关键词过滤
`wui_get_component`	单个组件的完整 props、何时使用、可用示例
`wui_get_example`	取某个示例的完整代码
`wui_get_component_source`	组件实现源码（需要改实现时才用）
`wui_get_theme_tokens`	语义 token 及明暗色值

这些工具是分层的：模型先列清单、再取 props、需要时才拉源码，避免一次性占满上下文。

让它用得更好

接上 MCP 后，AI 已经能查到准确信息，但它不一定会主动查。在项目的 CLAUDE.md、.cursorrules 或等价的规则文件里加一句效果最明显：

本项目使用 wui 组件库。编写任何 UI 代码前，先调用 wui_list_components 确认
组件是否存在，再用 wui_get_component 获取准确的 props——不要凭记忆猜 API。
颜色一律使用语义 token（bg-primary、text-muted-foreground），不要用
bg-blue-500 这类调色板色值。

几点经验：

先装组件再让 AI 写代码。 MCP 只提供 API 信息，不会替你执行 wui add；组件文件不存在时，AI 生成的 import 会指向空路径。
让它照抄示例。 遇到复杂组合（如 ConfirmDialog、MorphingDialog），提示「参考 wui 的示例」比描述需求更可靠。
组件不存在时要求它明说。 否则模型倾向于用 <div> 拼一个看起来像的东西。

不支持 MCP 的工具

站点提供了 llms.txt，包含完整组件清单和使用规则，可以直接粘贴给任意模型，或作为项目规则文件的一部分。

给组件库维护者

MCP 的数据全部由 registry:build 从组件源码、文档 MDX 和示例自动生成，新增组件不需要任何额外维护。实现细节见仓库中的 docs/MCP.md。