UI Registry

ui-registry-mcp

编码 Agent 擅长逻辑，却不太擅长审美。让它构建一个定价页面，它可能会凭记忆手写出一张扁平、普通的卡片——尽管只需一次获取，就能找到数千个精美的开源组件，而且这些组件都是由 UI/UX 专家打造的。

这是一个弥合这一差距的 MCP 服务。它可以接入 Claude Code、Cursor、Windsurf 或任何 MCP 客户端，让 Agent 使用 12 个真实组件库——搜索组件、获取实际源码、比较选项，并检查整体风格是否协调——而你可以继续留在编辑器中。

这个理念很简单：由 Agent 做判断（用什么、如何组合、调整什么），由组件库提供工艺。这个服务只是两者之间的桥梁。

快速开始

无需克隆，无需构建。让 MCP 客户端连接到已发布的包：

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

（在 Claude Code 中，也可以直接运行 claude mcp add ui-registry -- npx -y ui-registry-mcp。）

然后这样提出 UI 需求：

“构建一个很棒的定价版块——浏览各个组件库，选出最合适的组件，或调整组件来打造出色的定价页面。”

“添加一个数据表，并确保它与上方的卡片风格一致。”

在幕后，Agent 会搜索、比较、将真实代码拉取到你的项目中，并在完成前快速检查设计的一致性。它还会告诉你每个部分来自哪个组件库，方便你注明出处并查看原始内容。

内容一览

包含 12 个组件库，约有 3,700 个组件，全部实时获取——因此你始终拿到的是当前版本，而不是过时副本。

组件库	组件数	备注
ReUI	~1,534	种类丰富；部分区块需要付费，服务会将其过滤掉
Watermelon UI	~1,066	规模较大，偏向 web3/DeFi
Aceternity UI	~116 免费	动画、3D、便当盒布局；其目录中的大多数组件都属于 Pro
Tailark	~210	营销版块——主视觉、定价、用户评价
Cult UI	~157	带有动效的设计工程师组件
SmoothUI	~107	微交互
Optics	~79	无障碍，基于 Base UI 构建
AI Elements	~77	Vercel 的聊天 / AI 原生组件（Apache-2.0）
beUI	~64	动效工具集
Kibo UI	~41	数据密集型组件——表格、看板、甘特图
Kokonut UI	~40	炫目的独立卡片
useLayouts	~26	动画布局

服务提供的所有内容都采用开放许可，可免费用于商业用途——除了 Vercel 的 AI Elements 采用 Apache-2.0 许可外，其余均采用 MIT 许可（发布时请保留其许可声明）。有几个组件库（ReUI、Aceternity）也在目录中列出了高级版组件——安装这些组件会静默失败。你无需为此费心：请求 verified 结果，服务只会返回你实际可以使用的内容。发布前仍请检查组件库自身的许可。

如果另一个组件库提供标准的 shadcn 注册表，只需在 src/registries.ts 中添加一项即可；其他内容无需更改。

这些工具

六个工具，大致按以下顺序使用：

• list_registries — 查看有哪些库、它们的许可证，以及任何“注意，这个库包含付费组件”的提示。
• search_components — 用日常语言描述你的需求。它能理解同义词（搜索“modal”，也能找到“dialog”），并且只返回名称和一句话描述，避免在对话中倾倒一大堆代码。只有想查找确实可安装的组件时，才添加 verified。
• compare_components — 在所有库中查找同一类组件（例如“定价表”），并排比较，让 Agent 选出最合适的，而不是第一个找到的。
• get_component — 获取某个组件的真实源码：所有文件、依赖项、准确的 npx shadcn add 命令，以及组件的来源。
• check_consistency — 让混搭的组件看起来像同一套设计的关键工具。它会读取实际代码并指出细微的不一致——一个组件的圆角比另一个更大、某处硬编码了 zinc-900 而其他地方使用你的主题、某个组件忘了适配深色模式——并针对每处问题给出修复建议。
• list_components — 查看完整目录，其中包含每个组件的直接 URL，方便浏览或链接到来源。

---

实现原理

如果你只想使用它，上面的内容就够了。下面会介绍实现方式和设计缘由，供感兴趣的读者以及有意参与贡献的人参考。

设计决策

以下选择值得解释，因为它们决定了这究竟只是一个演示，还是一个你会一直安装使用的工具：

• 它实时获取内容，而不是制作镜像。 这些库不断更新。缓存副本会逐渐过时；直接从各注册表自己的端点获取，意味着你总能拿到今天的版本。短暂的内存缓存则能让同一会话中的操作保持迅速。
• 它会如实标出付费组件。 付费组件会提前标记，并可筛选，避免 Agent 自信地选中一个安装时会返回 401 错误的组件。没有什么比 Agent 推荐自己无法交付的内容更糟了。
• 真正的价值在于保持一致性，而不仅仅是获取组件。 封装注册表谁都会做。真正能让 Agent 构建的 UI 看起来经过设计的，是发现混用不同来源时设计 token、间距和圆角的差异——因此，这项功能是核心工具，而非事后才想到的补充。
• 它会注明来源。 每个组件都会附带来源 URL 和一行可直接展示的署名信息，并且会告知 Agent 转交这些信息。你应该始终知道自己的作品建立在谁的成果之上。
• 单个库失效不会拖垮搜索。 请求遇到问题时会重试；如果某个注册表不可用，只会将其从结果中排除，而不会导致整个调用失败。

本地开发

npm install
npm run build
npm test          # spins up the server and exercises every tool end-to-end
npm run smoke      # quick check that all the registries are reachable
npm run catalog    # dump the whole directory to catalog.json

路线图——坦诚说明接下来要做什么

它现在就很实用，但还有两项改进能让它更进一步；两者都是实打实的项目，而不是轻松就能完成的小改动：

• 视觉预览。 人们用眼睛挑选 UI，而目前 Agent 根据文本做选择。难点在于，这些库并不总是提供预览图，因此要做好这项功能，就需要渲染并截取组件的屏幕截图——这需要基础设施，而不是加一个配置标记就能实现。
• 基于含义的搜索。 现在搜索能理解同义词，但还不理解“适合入门引导页面的友好风格”这类意图。使用真正的嵌入向量就能解决这个问题。

---

反馈与贡献

这个项目旨在让 Agent 构建的 UI 不再千篇一律；每当有人实际使用并告诉我哪里出了问题或缺少什么，它就会变得更好。如果你遇到不顺手的地方、有功能创意，或知道有哪个库适合加入这里，请 提交 issue。我真的很想听听你的意见。

非常欢迎提交拉取请求，尤其是新增注册表（通常只需在 src/registries.ts 中添加几行）和改进一致性检查。请参阅 CONTRIBUTING.md 了解如何开始，并查看 CHANGELOG.md 了解变更内容。如果它为你节省了一些时间，请给仓库点个 ⭐，这对我意义重大，也能帮助其他人发现它。

衷心感谢这些库背后的团队——ReUI、Aceternity、Tailark、Cult UI、SmoothUI、Optics、beUI、Kibo、Kokonut、useLayouts、Watermelon——也感谢让它们得以融为一体的 shadcn 注册表生态系统。这个项目是通往他们匠心之作的桥梁；没有他们，一切都无从实现。

采用 MIT 许可证。