关于 shadcn/ui MCP Server
shadcn/ui MCP Server 由社区开发者 Jpisnice 维护, MIT 许可, 2025 年发布并在 2026 年 1 月更新到 v2.0.0。它为 AI 助手提供 shadcn/ui v4 的组件、区块、示例与元数据访问能力, 可按 React、Svelte、Vue、React Native 四种框架返回对应实现, 并用 GitHub API 做智能缓存与限流处理。
差异点在于「取真源码」而非凭记忆生成: agent 拉到的是当前版本组件的 TypeScript 源文件与依赖清单, 能避免写过时或臆造的 props; 同时支持 Radix 与 Base UI 两套底层、目录浏览, 以及 SSE 传输与 Docker 部署, 方便团队共享一个实例。
技能规格
| 厂商 | Jpisnice |
|---|---|
| 平台 | MCP |
| 能力维度 | 设计创作 |
| 是否官方 | 社区/第三方 |
| 中文支持 | 不支持 |
| 上线时间 | 2025 |
| 最近核实 | 2026-09 |
| 费用说明 | 开源免费 (MIT), 仅 GitHub API 速率可选自带 Token 提升。 |
怎么安装
npx @jpisnice/shadcn-ui-mcp-server (可选 --github-api-key ghp_xxx 把速率从 60 次/时提到 5000 次/时; --framework svelte|vue|react-native 切换框架; --ui-library base 改用 Base UI)。Claude Code 可 claude mcp add shadcn -- npx @jpisnice/shadcn-ui-mcp-server; Claude Desktop 也可下载 Releases 里的.mcpb 文件双击安装。适用场景
- 组件落地: 让 agent 直接取到 Button、Dialog、DataTable 的最新源码与依赖, 复制进项目即可用。
- 多框架移植: 同一需求切换 --framework svelte|vue|react-native 拿到对应框架实现。
- 区块拼装: 取 dashboard、calendar、表单等完整区块示例作为页面骨架。
相关链接
同维度的其他技能
以下是「设计创作」维度下的其他技能,可作备选。 想一次看完,见 设计创作类 Agent Skills。
Figma Dev Mode MCP Server
Figma 官方 MCP 服务, 把设计稿变成 AI 可读的代码上下文。
BlenderMCP
让 Claude 等 LLM 对话式驱动 Blender 做 3D 建模与场景操作。
Canva MCP Server
Canva 官方 MCP, 让 AI 助手直接生成与编辑 Canva 设计。
Excalidraw MCP
AI 在聊天里直接生成并编辑 Excalidraw 手绘风图表。
draw.io 官方 MCP
draw.io 官方 MCP: 让 AI 直接生成可继续编辑的流程图与架构图。
MCP for Unity
把 Unity 编辑器交给 AI: 建场景、写脚本、跑测试都用自然语言。