🚀 Shadcn UI v4 MCP 服务器
这是一个用于将 shadcn/ui 组件集成到 AI 工作流的服务器，能让 AI 助手全面访问 shadcn/ui v4 的组件、模块、演示和元数据，支持在 React、Svelte 和 Vue 中无缝检索实现方案，助力 AI 驱动的开发工作流。
🚀 快速开始
# 基础用法（每小时 60 次请求）
npx @jpisnice/shadcn-ui-mcp-server
# 使用 GitHub 令牌（每小时 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
🎯 两分钟内获取你的 GitHub 令牌：docs/getting-started/github-token.md
✨ 主要特性
- 🎯 多框架支持 - 支持 React、Svelte 和 Vue 实现。
- 📦 组件源代码 - 提供最新的 shadcn/ui v4 TypeScript 源代码。
- 🎨 组件演示 - 包含示例实现和使用模式。
- 🏗️ 模块支持 - 提供完整的模块实现（如仪表盘、日历、表单）。
- 📋 元数据访问 - 可获取依赖项、描述和配置细节。
- 🔍 目录浏览 - 可探索仓库结构。
- ⚡ 智能缓存 - 高效集成 GitHub API 并处理速率限制。
📦 安装指南
# 全局安装（可选）
npm install -g @jpisnice/shadcn-ui-mcp-server
# 或者使用 npx（推荐）
npx @jpisnice/shadcn-ui-mcp-server
📚 详细文档
| 部分 | 描述 |
|---|---|
| 🚀 入门指南 | 安装、设置和初始步骤 |
| ⚙️ 配置 | 框架选择、令牌和选项 |
| 🔌 集成 | 编辑器和工具集成 |
| 📖 使用方法 | 示例、教程和用例 |
| 🎨 框架 | 特定框架的文档 |
| 🐛 故障排除 | 常见问题和解决方案 |
| 🔧 API 参考 | 工具参考和技术细节 |
🎨 框架支持
此 MCP 服务器支持三种流行的 shadcn 实现：
| 框架 | 仓库 | 维护者 | 描述 |
|---|---|---|---|
| React（默认） | shadcn/ui | shadcn | shadcn/ui v4 的 React 组件 |
| Svelte | shadcn-svelte | huntabyte | shadcn-svelte 的 Svelte 组件 |
| Vue | shadcn-vue | unovue | shadcn-vue 的 Vue 组件 |
🛠️ 必要设置
1. 获取 GitHub 令牌（推荐）
# 访问：https://github.com/settings/tokens
# 生成无需作用域的令牌
export GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here
2. 运行服务器
# React（默认）
npx @jpisnice/shadcn-ui-mcp-server
# Svelte
npx @jpisnice/shadcn-ui-mcp-server --framework svelte
# Vue
npx @jpisnice/shadcn-ui-mcp-server --framework vue
3. 与编辑器集成
- VS Code：docs/integration/vscode.md
- Cursor：docs/integration/cursor.md
- Claude Desktop：docs/integration/claude-desktop.md
- Continue.dev：docs/integration/continue.md
🎯 使用场景
- AI 驱动的开发 - 让 AI 助手使用 shadcn/ui 构建用户界面。
- 组件发现 - 探索可用组件及其使用方法。
- 多框架学习 - 比较 React、Svelte 和 Vue 的实现。
- 快速原型开发 - 获取仪表盘、表单等完整模块实现。
- 代码生成 - 生成带有正确依赖项的组件代码。
🔗 快速链接
- 📖 完整文档
- 🚀 入门指南
- 🎨 框架比较
- 🔧 API 参考
- 🐛 故障排除
- 💬 问题与讨论
📄 许可证
本项目采用 MIT 许可证，详情请见 LICENSE。
🙏 致谢
- shadcn - 提供出色的 React UI 组件库。
- huntabyte - 提供优秀的 Svelte 实现。
- unovue - 提供全面的 Vue 实现。
- Anthropic - 提供模型上下文协议规范。
由 Janardhan Polle 用心打造
如果觉得有用，请给这个仓库点个 ⭐ 吧！