Shadcn Ui MCP Server

🚀 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

📚 详细文档

🎨 框架支持

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

🛠️ 必要设置

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 用心打造

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