项目简介

'shadcn/ui 组件管理 MCP 服务' 是 'NewKleaners' 仓库中包含的一个 Model Context Protocol (MCP) 服务器实现。它专门为兼容 MCP 协议的 LLM 客户端（如 AI 助手）提供了一套强大的工具集，用于管理和操作 'shadcn/ui' 组件。通过这个服务器，AI 助手可以智能化地执行前端开发任务，例如安装、移除组件，定制主题，分析代码，以及生成样板代码和文档，极大地提高了开发效率。

主要功能点

UI 组件管理: AI 助手可以列出所有可用的 'shadcn/ui' 组件，进行搜索，并自动将选定的组件添加到项目中或从项目中移除。它还能更新已安装的组件到最新版本，并初始化 'shadcn/ui' 配置。
主题与样式定制: 提供工具来创建、切换和导出自定义主题配置。AI 助手可以根据需求调整颜色方案、字体和边框半径，并将其应用到项目中。
代码分析与质量保障: 能够分析组件的依赖关系、在项目中的使用情况、预估打包大小，并检查潜在的组件冲突。还包括生成测试文件和运行项目审计的功能，帮助维护代码质量。
项目脚手架与代码生成: 支持生成常见 UI 模式（如表单、仪表盘、认证页面）的样板代码，并可根据高级功能要求生成带有 TypeScript 类型、样式变体、动画和可访问性特性的自定义组件。
文档与性能优化: 自动为组件生成文档，并可更新项目的 'README.md' 文件。同时，它也能分析项目打包大小，并优化文件导入以支持摇树优化，提升应用性能。

安装步骤

克隆仓库:

git clone https://github.com/Anton10Ivanov/NewKleaners
cd NewKleaners

安装依赖:
```
npm install
```
初始化 shadcn/ui (如果尚未进行): 在项目根目录运行 'npx shadcn@latest init'。根据提示选择适合您的项目风格、基础颜色和 CSS 变量选项。
运行 MCP 服务器 (可选，通常由 MCP 客户端触发): 在项目根目录运行以下命令以在开发模式下启动 MCP 服务器：
```
npm run mcp:dev
```
或在生产模式下：
```
npm run mcp:start
```

服务器配置

MCP 服务器旨在通过 JSON-RPC 协议与 MCP 客户端（如 Cursor IDE 或其他 AI 编程助手）进行通信。以下是 MCP 客户端配置此服务器时可能需要的信息，以 JSON 格式表示，客户端将使用这些信息来启动和交互服务器：

{
  "serverName": "shadcn-mcp-server",
  "command": "npm",
  "args": ["run", "mcp:start"],
  "description": "管理 shadcn/ui 组件和前端开发任务的 MCP 服务器。通过此服务器，AI 助手能够列出、安装、移除 shadcn/ui 组件，进行主题定制，生成样板代码和文档，并进行代码分析和优化。",
  "capabilities": {
    "tools": [
      "list_components",
      "add_component",
      "remove_component",
      "init_shadcn",
      "get_component_info",
      "list_installed_components",
      "update_components",
      "create_theme",
      "switch_theme",
      "export_theme",
      "analyze_component",
      "check_conflicts",
      "create_template",
      "generate_boilerplate",
      "generate_component",
      "generate_docs",
      "update_readme",
      "analyze_bundle",
      "optimize_imports",
      "generate_tests",
      "run_audit"
    ],
    "resources": [
      "shadcn://components.json",
      "shadcn://tailwind.config",
      "shadcn://css-variables",
      "shadcn://component-template",
      "shadcn://usage-examples"
    ],
    "prompts": [
      "create-component",
      "component-usage",
      "theme-customization",
      "component-composition"
    ]
  }
}

'serverName': MCP 服务器的唯一标识符，方便客户端识别。
'command': 启动 MCP 服务器进程的命令。在此项目中，推荐使用 'package.json' 中定义的脚本。
'args': 传递给 'command' 的参数列表。'mcp:start' 脚本会调用 'mcp-server/shadcn-mcp-server.ts' 文件。
'description': 对服务器功能和用途的详细描述，帮助客户端用户理解。
'capabilities': 声明服务器提供的核心 MCP 功能：
- 'tools': AI 助手可以调用的具体功能列表。每个工具都有明确的名称、描述和预期输入参数。
- 'resources': AI 助手可以读取的上下文信息 URI 列表，例如配置、代码模板或使用示例。
- 'prompts': AI 助手可以利用的预定义 Prompt 模板列表，用于指导代码生成或交互式任务。

基本使用方法

用户通常不需要直接运行 MCP 服务器或手动调用其工具。相反，兼容的 MCP 客户端（例如支持 MCP 协议的 IDE 插件或 AI 助手）将检测到并自动与此服务器建立连接。一旦连接成功，用户可以通过 AI 助手的自然语言指令来利用服务器提供的功能。

例如，您可以在 AI 助手中输入：

“列出所有可用的 'shadcn/ui' 组件。” (对应 'list_components' 工具)
“安装 'button' 组件。” (对应 'add_component' 工具)
“分析 'card' 组件的依赖和使用情况。” (对应 'analyze_component' 工具)
“生成一个基于 'input' 和 'button' 的注册表单代码。” (对应 'generate_boilerplate' 或 'component-composition' 工具及相应的 'prompt')

MCP 服务器会处理这些请求，执行相应的操作，并将结果返回给 AI 助手，然后 AI 助手将结果呈现给用户。

关键词

项目简介

主要功能点

安装步骤

服务器配置

基本使用方法

信息