# shadcn MCP 服务器

官方 MCP 服务器，让 AI 助手能够通过自然语言直接从注册表浏览、搜索并安装 shadcn/ui 组件，实现零幻觉的 AI 驱动 UI 开发。

Canonical URL: https://a2a-mcp.org/entry/shadcn-mcp-server-zh

Language: zh

Category: MCP Servers

Updated: 2026-03-18

## 概述

shadcn MCP 服务器是 shadcn/ui 的[模型上下文协议（Model Context Protocol，简称 MCP）](https://modelcontextprotocol.io) 官方实现。它允许 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

通常通过以下命令启动：
```bash
npx shadcn@latest mcp
```
或者在项目中进行配置后，使用兼容的 AI 工具即可。

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

## Tags

- shadcn
- mcp
- ai-agent
- ui-components
- registry
- typescript
- react
- tailwind
- claude
- cursor

## Sources

- [Project website](https://ui.shadcn.com/docs/mcp)