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}}>
    `
  }
];