Shadcn UI MCP 服务器

强大而灵活的 MCP（模型控制协议）服务器，旨在提升 Shadcn UI 组件的开发体验。该服务器通过先进的工具和功能，为构建和管理 UI 组件奠定了坚实的基础。

特征

工具

MCP 服务器提供了一组可通过模型控制协议使用的工具：

• list-components ：获取可用的 shadcn/ui 组件列表

• get-component-docs ：获取特定组件的文档

• install-component ：安装 shadcn/ui 组件

• list-blocks ：获取可用 shadcn/ui 块的列表

• get-block-docs ：获取特定块的文档

• install-blocks ：安装 shadcn/ui 块

功能

• 组件管理

  • 列出可用的 shadcn/ui 组件

  • 获取特定组件的详细文档

  • 安装支持多种包管理器（npm、pnpm、yarn、bun）的组件

• 区块管理

  • 列出可用的 shadcn/ui 块

  • 获取特定块的文档和代码

  • 安装支持多个包管理器的块

• 包管理器支持

  • 为 npm、pnpm、yarn 和 bun 提供灵活的运行时支持

  • 自动检测用户首选的包管理器

Related MCP server: shadcn-ui MCP Server

安装

先决条件

• Node.js（v18 或更高版本）

• npm 或 yarn 包管理器

Claude桌面配置

要与 Claude Desktop 一起使用，请添加服务器配置：

在 MacOS 上： ~/Library/Application Support/Claude/claude_desktop_config.json在 Windows 上： %APPDATA%/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["@heilgar/shadcn-ui-mcp-server"]
    }
  }
}

风帆冲浪配置

将其添加到您的./codeium/windsurf/model_config.json ：

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["@heilgar/shadcn-ui-mcp-server"]
    }
  }
}

游标配置

将其添加到您的.cursor/mcp.json中：

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["@heilgar/shadcn-ui-mcp-server"]
    }
  }
}

开发与调试

本地开发

1. 安装依赖项：

npm install

2. 构建服务器：

npm run build

调试

由于 MCP 服务器通过 stdio 进行通信，调试起来可能比较困难。我们建议使用MCP Inspector进行调试：

npm run inspector

检查器将提供一个 URL 来访问浏览器中的调试工具，允许您：

• 监控 MCP 通信

• 检查工具调用和响应

• 调试服务器行为

• 查看实时日志

相关项目和依赖项

该项目使用以下工具和库构建：

• 模型上下文协议 TypeScript SDK - MCP 服务器和客户端的官方 TypeScript SDK

• MCP Inspector - MCP 服务器的调试工具

• Cheerio - 专为服务器设计的核心 jQuery 的快速、灵活、精简实现

执照

MIT 许可证 - 您可以自由地将此项目用于您自己的目的。

贡献

欢迎贡献代码！欢迎提交 Pull 请求。