适合谁
- 使用 shadcn/ui 的开发者
- 希望 AI 助手生成符合 shadcn/ui 风格的组件代码的团队
- 需要跨框架（React、Svelte、Vue、React Native）一致 UI 的开发者
- 构建 AI 驱动的开发工具或集成
S
66FMRS · C
该服务器提供丰富的 shadcn/ui 组件访问，支持多框架，安装简便。但依赖于 GitHub API，速率限制是主要瓶颈，需配置 token 以获得良好体验。
一个模型上下文协议（MCP）服务器，为 AI 助手提供对 shadcn/ui v4 组件、模块、示例和元数据的全面访问。支持 React、Svelte、Vue 和 React Native 实现，助力 AI 驱动的开发工作流。
工具能力
get_component
获取指定组件的完整源代码。
list_components
列出当前框架下所有可用的 shadcn/ui 组件。
get_block
获取完整模块实现（如仪表盘、日历、表单）。
list_blocks
列出所有可用的模块。
get_demo
获取组件的示例实现和用法。
list_demos
列出所有可用的演示。
get_metadata
获取组件的依赖、描述和配置信息。
browse_directory
浏览仓库目录结构。
安装接入
- 获取 GitHub 个人访问令牌（可选，但推荐，以提高速率限制）。
- 使用 npx 运行服务器：
npx @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_TOKEN。 - 将服务器添加到您的客户端（如 Claude Desktop）配置中。
claude_desktop_config.json
{
"mcpServers": {
"shadcn": {
"command": "npx",
"args": [
"-y",
"@jpisnice/shadcn-ui-mcp-server",
"--github-api-key",
"YOUR_GITHUB_TOKEN"
]
}
}
}
选型与风险
不适合谁
- 不使用 shadcn/ui 的用户
- 需要其他 UI 库（如 Tailwind UI）的用户
- 离线环境下的使用（需要访问 GitHub API）
- 需要完全本地运行、不依赖外部 API 的场景
所需权限
- GitHub API 访问（用于检索组件和仓库数据）
- 网络访问（用于 GitHub API 和 npm 包下载）
- 读取环境变量（如 GITHUB_PERSONAL_ACCESS_TOKEN）
- 运行本地文件系统操作（如构建缓存）
风险与副作用
- GitHub API 速率限制可能导致服务不可用（默认 60 次/小时，提供令牌后 5000 次/小时）。
- 使用 npm 包时可能存在供应链风险，建议验证包的完整性。
- SSE 模式下服务器可能暴露在网络上，需配置好 CORS 和访问控制。
- 组件代码可能包含过时或不安全的模式，需进行审查。
常见排障
- 检查 GitHub token 是否有效且未过期。
- 确认网络连接正常，能够访问 GitHub API。
- 查看服务器日志，确认没有输入输出错误。
- 尝试使用 `--framework` 参数切换到所需框架，确保获取正确版本。
- 对于 SSE 模式，检查端口是否被占用，并确认防火墙允许访问。
使用场景
AI 驱动的 UI 开发：让 AI 助手使用 shadcn/ui 构建用户界面。
组件发现：探索可用组件及其用法。
多框架学习：对比 React、Svelte、Vue 和 React Native 的实现。
快速原型设计：获取仪表盘、表单等完整模块实现。
代码生成：生成带有正确依赖的组件代码。
支持客户端
Claude Desktop完整支持
Claude Code完整支持
VS Code部分支持
Cursor部分支持
Continue.dev部分支持