JinDaGe - shadcn-ui-mcp-server MCP Details

article

README

🚀 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 的实现。
快速原型开发 - 获取仪表盘、表单等完整模块实现。
代码生成 - 生成带有正确依赖项的组件代码。

🔗 快速链接

📄 许可证

本项目采用 MIT 许可证，详情请见 LICENSE。

🙏 致谢

shadcn - 提供出色的 React UI 组件库。
huntabyte - 提供优秀的 Svelte 实现。
unovue - 提供全面的 Vue 实现。
Anthropic - 提供模型上下文协议规范。

由 Janardhan Polle 用心打造

如果觉得有用，请给这个仓库点个 ⭐ 吧！

shadcn-ui-mcp-server