什么是 Shadcn UI MCP 服务器？
Shadcn UI MCP 服务器是一个开源 MCP 服务器，向 AI 应用程序开放 shadcn/ui 组件及相关资源。它使语言模型和智能代理能够通过标准化接口以编程方式检索组件源代码、查看演示用法并生成安装脚本或特定框架指南。这促进了 shadcn/ui 组件知识与 AI 驱动的工作流程和代码助手的无缝集成。
如何进行配置
-
克隆代码库 到你的开发环境。
-
确保已安装 Node.js（v18 或更高版本）和 npm。
-
使用以下命令安装依赖：
npm install -
使用以下命令构建并启动服务器：
bash startup.sh或逐个执行相同步骤：
npm run clean npm run build npm run start -
为了启用与其他应用程序（例如 VS Code 代理模式）的集成，配置你的客户端（如 VS Code 的
settings.json）以连接到 SSE 端点，例如："mcp": { "servers": { "shadcnui": { "type": "sse", "url": "http://localhost:3001/sse" } } } -
可选地，使用内置的 MCP 检查器（默认在 http://127.0.0.1:6274）进行互动调试和服务器检查。
如何使用
- 启动服务器并验证其运行状态（默认 SSE 端点为
http://localhost:3001/sse）。 - 在你的 AI 工具、IDE 或助手（如带代理模式的 VS Code）中，确保 MCP 服务器被正确配置为外部工具提供者。
- 使用可用命令：
- 列出所有 shadcn/ui UI 组件
- 获取任何组件的源代码（例如
button、accordion） - 检索组件的演示代码和使用示例
- 生成特定包管理器的安装脚本
- 请求特定框架的安装指南
- 直接测试 API 端点（针对开发人员）使用 curl、浏览器或检查器 UI 确认功能。
- 分析响应并将结果整合到你的编码工作流程或 AI 驱动的开发过程中。
主要特性
- 直接访问来自官方 GitHub 代码库的最新 shadcn/ui 组件源代码。
- 按需检索演示代码和实用的组件使用示例以便快速原型设计。
- 为你选择的包管理器（npm、yarn、pnpm、bun）生成定制的安装说明。
- 支持的环境的特定框架安装指南（Next.js、Vite、Remix 等）。
- 易于使用的 MCP 服务器，具有最佳实践的错误处理和扩展性，支持添加新工具或资源。
- 与开发工具和 AI 助手无缝集成，包括 VS Code 代理模式。
使用案例
- AI 编码助手：支持 AI 工具或聊天机器人，帮助开发人员在代码库中探索、插入或修改 shadcn/ui 组件。
- IDE 集成：启用在编辑器内的工作流程，以获取组件源或演示，并即时生成安装脚本。
- 自动化项目设置：允许机器人或脚本以编程方式准备特定框架和包管理器的安装步骤。
- 开发者学习工具：为教育应用或文档生成器提供最新的代码片段和指南。
- AI 驱动的代码重构：通过提供始终最新的组件源代码，协助进行组件升级或迁移任务。
常见问题
Q1: 服务器如何查找最新版本的组件？
服务器直接从 shadcn/ui GitHub 代码库获取组件信息，使用多种搜索策略来适应组件存储或命名的方式。
Q2: 如果没有找到组件名称或返回错误，我该怎么办？
请仔细检查组件名称是否与官方 shadcn/ui 库中的名称一致。如果仍然失败，请验证 shadcn/ui 代码库结构或查看是否有近期的重命名或弃用。
Q3: 我可以扩展服务器以添加新工具或资源吗？
是的，服务器设计为可扩展。你可以将新工具添加到 tools.ts，将资源添加到 resources.ts，并将资源模板添加到 resource-templates.ts。
Q4: 这个服务器可以投入生产使用吗？
虽然功能强大，该项目主要设计用于本地开发、实验和助手集成。如果要部署到生产，建议审查并加强其安全性和错误处理。
Q5: 我如何调试服务器或其集成问题？
请利用 http://127.0.0.1:6274 上的 MCP 检查器，监控控制台日志，并确保正确的网络访问权限，以连接到你的开发环境和 shadcn/ui GitHub 代码库。