Shadcn UI MCP 服务器

一个强大且灵活的MCP（Model Control Protocol）服务器，旨在通过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
  • 自动检测用户首选的包管理器

安装

前提条件

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

Claude桌面配置

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

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

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

Windsurf配置

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

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

Cursor配置

将以下内容添加到您的.cursor/mcp.json中：

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

开发和调试

本地开发

1. 安装依赖：
   bash
   npm install

2. 构建服务器：
   bash
   npm run build

调试

由于MCP服务器通过标准输入输出进行通信，调试可能会比较困难。我们建议使用MCP Inspector进行调试：

bash
npm run inspector

Inspector将提供一个URL，以便您在浏览器中访问调试工具，从而能够：

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

相关项目和依赖

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

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

许可证

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

贡献

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