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