shadcn MCP 服务器

概述

shadcn MCP 服务器是 shadcn/ui 的模型上下文协议（Model Context Protocol，简称 MCP） 官方实现。它允许 AI 助手和智能代理安全连接到兼容 shadcn 的组件注册表，能够浏览可用组件、搜索特定组件、获取源代码、演示示例、元数据，甚至通过自然语言指令直接将组件安装到项目中。

这彻底解决了 AI 常见的痛点，比如知识过时或凭空捏造的属性（hallucinated props），因为它提供实时、结构化的最新注册表数据访问，并与 shadcn CLI 无缝集成。

主要功能

• 浏览与搜索注册表：AI 可以列出并查询任意 shadcn 兼容注册表中的组件、区块（blocks）和图表（charts）。
• 获取准确数据：实时获取最新的 TypeScript 源代码、Props/接口定义、使用示例和安装命令。
• 直接安装：通过集成 CLI 桥接，让 AI 自动执行 shadcn add 命令进行安装。
• 框架无关的注册表支持：兼容任何 shadcn 注册表（官方或自定义），主要基于 React + Tailwind 的组件。
• 安全本地执行：通常以本地服务器形式运行（通过 npx 或安装包），支持可配置的身份验证。
• IDE 与工具集成：原生支持 Cursor、Claude Desktop、Zed 等具备 MCP 能力的工具。

工作原理

1. 安装 MCP 服务器（通常通过 npx 或项目配置）。
2. 在 components.json 中配置你的注册表。
3. 将 AI 助手连接到本地 MCP 端点。
4. 使用自然语言提示，例如「添加一个漂亮的带有 shadcn 图表的仪表盘」—— AI 会查询注册表、选择合适组件并自动安装。

使用场景

• 在 Cursor 或 Claude Code 中进行 AI 驱动的 UI 快速原型开发。
• 在大型代码库中自动化组件安装流程。
• 构建多代理工作流：一个代理负责研究组件，另一个负责组装 UI。
• 企业设计系统的自定义注册表集成。

快速上手

请参考官方文档：https://ui.shadcn.com/docs/mcp

通常通过以下命令启动：

npx shadcn@latest mcp

或者在项目中进行配置后，使用兼容的 AI 工具即可。

社区中有许多 fork 和增强版本（例如支持 Svelte/Vue 的多框架版本），但大多数用户推荐使用 shadcn/ui 官方版本。