Shadcn Ui MCP Server

🚀 shadcn-ui MCP 服務器

shadcn-ui MCP 服務器為 shadcn/ui 組件參考資料提供 MCP 服務，基於 TypeScript 構建，實現了模型上下文協議（MCP）服務器，可幫助 AI 助手訪問 shadcn/ui 組件文檔和示例，提供組件的相關參考信息。

✨ 主要特性

工具

• list_shadcn_components - 獲取所有可用的 shadcn/ui 組件列表
• get_component_details - 獲取特定組件的詳細信息
• get_component_examples - 獲取特定組件的使用示例
• search_components - 按關鍵字搜索組件

功能

此服務器會從以下來源抓取並緩存信息：

• 官方 shadcn/ui 文檔網站 (https://ui.shadcn.com)
• shadcn/ui GitHub 倉庫

提供的結構化數據包括：

• 組件描述
• 安裝說明
• 使用示例
• 屬性和變體
• 代碼示例

📦 安裝指南

Claude Desktop 配置

要與 Claude Desktop 配合使用，請添加服務器配置：

• 在 MacOS 上：~/Library/Application Support/Claude/claude_desktop_config.json
• 在 Windows 上：%APPDATA%/Claude/claude_desktop_config.json%

選項 1：使用本地構建

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "/path/to/shadcn-ui-server/build/index.js"
    }
  }
}

選項 2：使用 npx 命令

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["-y", "shadcn-ui-mcp-server"]
    }
  }
}

Windsurf 配置

將以下內容添加到 ./codeium/windsurf/model_config.json：

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["-y", "shadcn-ui-mcp-server"]
    }
  }
}

Cursor 配置

將以下內容添加到 .cursor/mcp.json：

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["-y", "shadcn-ui-mcp-server"]
    }
  }
}

調試

由於 MCP 服務器通過標準輸入輸出進行通信，調試可能具有挑戰性。我們推薦使用 MCP Inspector，它可以通過包腳本運行：

npm run inspector

Inspector 會提供一個訪問瀏覽器調試工具的 URL。

💻 使用示例

基礎用法

# 安裝依賴
npm install

# 構建服務器
npm run build

# 帶有自動重建的開發
npm run watch