Shadcn Ui MCP Unofficial

🚀 Shadcn UI MCP 服務器

本項目是一個用 TypeScript 實現的 Model Context Protocol (MCP) 服務器，它能作為橋樑，讓 AI 助手（如 Claude）可以訪問和操作 shadcn/ui 組件，獲取組件的源代碼、演示代碼以及安裝指南。

🚀 快速開始

安裝依賴

首先，你需要安裝項目所需的依賴：

npm install

啟動服務器

接著，啟動 MCP 服務器：

npm run start

啟動成功後，控制檯會輸出如下信息：

MCP 服務器已啟動，監聽端口 3001
SSE 端點可通過 http://localhost:3001/sse 訪問
消息端點可通過 http://localhost:3001/messages 訪問

集成到 VS Code

若要在 VS Code 中使用此服務器，可按以下步驟進行配置：

1. 打開 VS Code 的 settings.json 文件。
2. 添加 MCP 服務器配置：

{
  "mcp.servers": [
    {
      "id": "shadcnui-server",
      "url": "http://localhost:3001"
    }
  ]
}

✨ 主要特性

此 MCP 服務器提供了豐富的工具和資源，助力 AI 助手完成以下操作：

• 獲取 shadcn/ui 組件的源代碼。
• 獲取組件演示代碼和使用示例。
• 獲取組件安裝指南。

📦 安裝指南

裝備份依賴

npm install

啟動服務器

npm run start

💻 使用示例

基礎用法

獲取組件源代碼

調用 get_component 工具：

const result = await mcp.execute({
  tool_id: "get_component",
  params: {
    component_name: "Button"
  }
});

console.log(result);
// 輸出: 
// import { Button } from 'shadcn-ui'
// export default function Button({ class, children }) {
//   return <button className={class}>{children}</button>
// }

獲取演示代碼

調用 get_demo 工具：

const result = await mcp.execute({
  tool_id: "get_demo",
  params: {
    component_name: "Button"
  }
});

console.log(result);

高級用法

目前暫未提供高級用法示例，後續可根據實際需求進行拓展。

📚 詳細文檔

項目結構

目錄結構

shadcnui-mcp-server/
├── src/
│   ├── tools.ts          # 定義可用工具
│   ├── resources.ts      # 定義可用資源
│   └── resource-templates.ts    # 定義資源模板
├── package.json         # 項目依賴管理
└── README.md            # 項目文檔

核心功能

工具定義

在 tools.ts 文件中，可定義各類工具：

export const tools = [
  {
    id: "get_component",
    name: "獲取組件源代碼",
    description: "返回指定的 shadcn/ui 組件的源代碼",
    parameters: {
      type: "object",
      properties: {
        component_name: { type: "string", description: "組件名稱" }
      }
    }
  },
  {
    id: "get_demo",
    name: "獲取組件演示代碼",
    description: "返回指定的 shadcn/ui 組件的演示代碼",
    parameters: {
      type: "object",
      properties: {
        component_name: { type: "string", description: "組件名稱" }
      }
    }
  },
  {
    id: "get_install",
    name: "獲取組件安裝指南",
    description: "返回指定的 shadcn/ui 組件的安裝指南",
    parameters: {
      type: "object",
      properties: {
        component_name: { type: "string", description: "組件名稱" }
      }
    }
  }
];

資源定義

在 resources.ts 文件中，可定義各種資源：

export const resources = [
  {
    id: "component_code",
    name: "組件源代碼",
    description: "shadcn/ui 組件的源代碼",
    content: {
      type: "string"
    }
  },
  {
    id: "demo_code",
    name: "演示代碼",
    description: "shadcn/ui 組件的演示代碼",
    content: {
      type: "string"
    }
  },
  {
    id: "install_guide",
    name: "安裝指南",
    description: "shadcn/ui 組件的安裝指南",
    content: {
      type: "string"
    }
  }
];

資源模板

在 resource-templates.ts 文件中，可定義資源模板：

export const resourceTemplates = [
  {
    id: "component_code_template",
    name: "組件源代碼模板",
    description: "用於生成 shadcn/ui 組件的源代碼",
    template: `
      import { type Component } from 'shadcn-ui'

      export const {{name}}: Component = ({ class, children }) => {
        return (
          <div className={{class}}>
            {children}
          </div>
        )
      }
    `
  },
  {
    id: "demo_code_template",
    name: "演示代碼模板",
    description: "用於生成 shadcn/ui 組件的演示代碼",
    template: `
      import {{name}} from './{{name}}'

      export default function Demo() {
        return (
          <div className="container mx-auto p-4">
            <{{name}}>這是一個 {{name}} 組件</{{name}}>
          </div>
        )
      }
    `
  },
  {
    id: "install_guide_template",
    name: "安裝指南模板",
    description: "用於生成 shadcn/ui 組件的安裝指南",
    template: `
      要使用 {{name}} 組件，請按照以下步驟進行：

      1. 安裝依賴：
         npm install shadcn-ui-components

      2. 導入組件：
         import {{name}} from 'shadcn-ui'

      3. 在組件中使用：
         <{{name}}>您的內容</{{name}}>
    `
  }
];