Shadcn UI MCP Server

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的灵活运行时支持 - 自动检测用户首选的包管理器

安装

先决条件

• 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

1. 构建服务器：

npm run build

调试

由于MCP服务器通过stdio进行通信，调试可能具有挑战性。我们建议使用 MCP检查员 用于调试：

npm run inspector

检查器将提供一个URL，用于访问浏览器中的调试工具，使您能够：

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

相关项目和依赖关系

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

• 模型上下文协议TypeScript SDK -MCP服务器和客户端的官方TypeScript SDK
• MCP检查员 -MCP服务器的调试工具
• 再见 -专为服务器设计的核心jQuery的快速、灵活和精益实现

许可证

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

贡献

欢迎投稿！请随时提交拉取请求。