Shadcn UI MCP Server

Shadcn UI MCP 服务

一个强大而灵活的 MCP（Model Control Protocol）服务，旨在提升使用 Shadcn UI 组件的开发体验。该服务为构建和管理 UI 组件提供了坚实的基础，并具备先进的工具和功能。

功能

工具

该 MCP 服务提供了一组可通过 Model Control Protocol 使用的工具：

• 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
  • 自动检测用户首选的包管理器

安装

前提条件

• Node.js（v18 或更高版本）
• npm 或 yarn 包管理器

Claude Desktop 配置

要与 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"]
    }
  }
}

Windsurf 配置

将以下内容添加到你的 ./codeium/windsurf/model_config.json：

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

Cursor 配置

将以下内容添加到你的 .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

Inspector 将提供一个 URL，用于在浏览器中访问调试工具，使你能够：

• 监控 MCP 通信
• 检查工具调用和响应
• 调试服务行为
• 查看实时日志

相关项目与依赖

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

• Model Context Protocol TypeScript SDK - 用于 MCP 服务和客户端的官方 TypeScript SDK
• MCP Inspector - 用于 MCP 服务的调试工具
• Cheerio - 专为服务端设计的快速、灵活且精简的核心 jQuery 实现

许可证

MIT 许可证 - 可随意将本项目用于你自己的用途。

贡献

欢迎贡献！请随时提交 Pull Request。