Shadcn UI MCP 服务器

一个强大且灵活的MCP（模型控制协议）服务器，旨在通过增强与Shadcn UI组件的开发体验。该服务器提供了一个坚实的基础，用于构建和管理具有高级工具和功能的UI组件。

<a href="https://glama.ai/mcp/servers/@heilgar/shadcn-ui-mcp-server"> <img width="380" height="200" src="https://gips0.baidu.com/it/u=2700225640,3069051901&fm=3081&app=3081&f=PNG?w=760&h=400" alt="Shadcn UI Server MCP 服务器" /> </a>

功能

工具

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 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。