shadcn-ui MCP Server

shadcn-ui MCP 服务

用于查询 shadcn/ui 组件参考信息的 MCP 服务

这是一个基于 TypeScript 的 MCP 服务，提供 shadcn/ui 组件的参考信息。它实现了 Model Context Protocol（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 仓库

它提供的结构化数据包括：

• 组件描述
• 安装说明
• 用法示例
• 属性和变体
• 代码示例

开发

安装依赖：

npm install

构建服务：

npm run build

在开发期间启用自动重新构建：

npm run watch

安装

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 服务通过 stdio 通信，调试可能颇具挑战。我们建议使用 MCP Inspector，它可通过包脚本运行：

npm run inspector

Inspector 会提供一个 URL，供你在浏览器中访问调试工具。