CodeBuddy集成ShadCN UI MCP Server：组件化前端项目的AI开发提速指南

一、前置准备

需提前准备：

• 环境：Node.js（v18.0.0+，验证命令：node -v）、最新版CodeBuddy；
• GitHub Token：用于MCP调用GitHub API：
  1. GitHub登录 → 头像→Settings→Developer settings→Personal access tokens→Tokens (classic)； 或者直接打开页面github令牌管理页面
  2. 生成Token：勾选public_repo权限，备注“ShadCN UI MCP”，复制保存（仅显示一次）。

二、核心配置步骤

核心操作：修改CodeBuddy的Craft_mcp_settings.json配置文件，追加ShadCN UI MCP配置。

步骤1：找到配置文件

点击对话右上角齿轮⚙️按钮，在MCP标签页，点击右边的“添加MCP”按钮。

步骤2：追加配置内容

在mcpServers字段中添加以下内容（仅保留关键配置，替换Token即可用）：

{
  "mcpServers": {
    "CloudBase MCP": { // 原有配置，勿改
      "timeout": 60000,
      "command": "npx",
      "args": ["@cloudbase/cloudbase-mcp@latest"],
      "env": {"INTEGRATION_IDE": "TencentMCPMarket"},
      "type": "stdio",
      "disabled": false
    },
    "ShadCN UI MCP Server": { // 新增配置
      "timeout": 60000,
      "command": "npx",
      "args": [
        "@jpisnice/shadcn-ui-mcp-server", // 多框架兼容版
        "--github-api-key", "ghp_xxx" // 替换为你的GitHub Token
      ],
      "type": "stdio",
      "disabled": false
    }
  }
}

关键提醒：替换ghp_xxx为第一步获取的真实GitHub Token，确保JSON语法无错误（逗号、引号匹配）。

三、配置验证

回到右侧栏对话框页面，点击齿轮按钮进入设置，看到正常状态：“ShadCN UI MCP Server”右侧按钮显示已启用，则说明成功配置。

五、参考资源

• CodeBuddy MCP配置官方指南：腾讯云开发文档；
• ShadCN UI MCP Server（多框架版）：GitHub仓库；
• GitHub Token创建官方指南：GitHub Docs；
• CodeBuddy MCP配置全流程：腾讯云开发者社区。