Shadcn UI v4 MCP Server

🚀 将 shadcn/ui 组件集成到 AI 工作流中的最快方式

一个模型上下文协议（MCP）服务器，为 AI 助手提供对 shadcn/ui v4 组件、模块、演示和元数据的全面访问。无缝获取 React、Svelte、Vue 和 React Native 实现，助力您的 AI 驱动开发工作流。

✨ 主要特性

• 🎯 多框架支持 - React、Svelte、Vue 和 React Native 实现
• 📦 组件源代码 - 最新的 shadcn/ui v4 TypeScript 源码
• 🎨 组件演示 - 示例实现和使用模式
• 🏗️ 模块支持 - 完整的模块实现（仪表盘、日历、表单）
• 📋 元数据访问 - 依赖项、描述和配置详情
• 🔍 目录浏览 - 探索仓库结构
• ⚡ 智能缓存 - 高效的 GitHub API 集成，支持速率限制处理
• 🌐 SSE 传输 - 支持多客户端部署的服务器发送事件
• 🐳 Docker 就绪 - 通过 Docker Compose 实现生产级容器化

🚀 快速开始

# 基本用法（60 次请求/小时）
npx @jpisnice/shadcn-ui-mcp-server

# 使用 GitHub Token（5000 次请求/小时）- 推荐
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here

# 切换框架
npx @jpisnice/shadcn-ui-mcp-server --framework svelte
npx @jpisnice/shadcn-ui-mcp-server --framework vue
npx @jpisnice/shadcn-ui-mcp-server --framework react-native

# 使用 Base UI 替代 Radix（仅限 React）
npx @jpisnice/shadcn-ui-mcp-server --ui-library base

🎯 2 分钟获取您的 GitHub Token：docs/getting-started/github-token.md

📦 一键安装（Claude Desktop）

下载并双击 .mcpb 文件即可即时安装：

1. 从 Releases 下载 shadcn-ui-mcp-server.mcpb
2. 双击该文件 - Claude Desktop 将自动打开
3. 输入您的 GitHub Token（可选，用于更高的速率限制）
4. 点击安装 - 工具立即可用

手动安装： Claude Desktop → 设置 → MCP → 添加服务器 → 浏览 → 选择 .mcpb 文件

参考： Anthropic Desktop Extensions | 构建 MCPB

🌐 SSE 传输与 Docker 部署

使用**服务器发送事件（SSE）**传输运行服务器，以支持多客户端和生产部署：

SSE 快速开始

# SSE 模式（支持多个并发连接）
node build/index.js --mode sse --port 7423

# Docker Compose（生产就绪）
docker-compose up -d

# 使用 Claude Code 连接
claude mcp add --scope user --transport sse shadcn-mcp-server http://localhost:7423/sse

传输模式

• stdio（默认）- 用于 CLI 使用的标准输入/输出
• sse - 用于基于 HTTP 连接的服务器发送事件
• dual - 同时支持 stdio 和 SSE

Docker 示例

# 基本容器
docker run -p 7423:7423 shadcn-ui-mcp-server

# 使用 GitHub API Token
docker run -p 7423:7423 -e GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token shadcn-ui-mcp-server

# Docker Compose（推荐）
docker-compose up -d
curl http://localhost:7423/health

环境变量

• MCP_TRANSPORT_MODE - 传输模式（stdio|sse|dual）
• MCP_PORT - SSE 服务器端口（默认：7423 - 键盘上的 SHADCN！）
• MCP_HOST - 主机绑定（默认：0.0.0.0）
• MCP_CORS_ORIGINS - CORS 来源（逗号分隔）
• GITHUB_PERSONAL_ACCESS_TOKEN - GitHub API Token
• UI_LIBRARY - UI 基础组件库：radix（默认）或 base（仅限 React）

📚 文档

| 章节 | 描述 | |---------|-------------| | 🚀 快速开始 | 安装、设置和第一步 | | ⚙️ 配置 | 框架选择、Token 和选项 | | 🔌 集成 | 编辑器和工具集成 | | 📖 使用指南 | 示例、教程和使用案例 | | 🎨 框架 | 框架特定文档 | | 🐛 故障排除 | 常见问题和解决方案 | | 🔧 API 参考 | 工具参考和技术细节 |

🎨 框架支持

此 MCP 服务器支持四种流行的 shadcn 实现：

| 框架 | 仓库 | 维护者 | 描述 | |-----------|-----------|-----------|-----------|