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

如果覺得有用，請給這個倉庫點個 ⭐ 吧！