AI导哈

UI组件管理服务器

一个强大的MCP（模型控制协议）服务器，用于增强Shadcn UI组件的开发体验，提供组件和块的管理功能，支持多种包管理器。

  • by heilgar
  • TypeScript
  • 本地部署
  • 26 星标
  • 更新于
在 GitHub 查看 heilgar/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通信
  • 检查工具调用和响应
  • 调试服务器行为
  • 查看实时日志

相关项目和依赖关系

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

许可证

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

贡献

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

相关 MCP