项目说明

一个基于 Ant Design 组件文档的模型上下文协议（MCP）服务器，将蚂蚁设计组件的文档暴露给大型语言模型（LLMs），如 Claude。此服务器允许 LLM 探索和理解 Ant Design 组件的一组专业工具。

功能特性

• 易于使用——无需克隆整个 Ant Design 仓库
• 提前提取组件文档以实现快速启动
• 列出所有可用的 Ant Design 组件
• 获取特定组件的详细文档，包括描述和用法
• 查看组件属性（props）及 API 定义
• 览特定组件的代码示例
• 按名称或功能搜索组件

初始设置

首次使用 MCP 服务器之前，需要从 Ant Design 仓库提取文档：

# 首先克隆 Ant Design 仓库（可以是临时克隆）
git clone https://github.com/ant-design/ant-design.git

# 提取文档
cd mcp-antd-components
npm run extract   # 使用默认的 ./ant-design 路径
# 或者
node scripts/extract-docs.mjs /path/to/ant-design  # 自定义路径

# 提取完成后，如果需要可以删除 Ant Design 仓库

这将在 data 目录下创建所有提取出的组件文档，MCP 服务器将使用这些文档。

测试服务器

要验证一切运行正常，可以运行测试脚本：

npm test
# 或者
node scripts/test-server.mjs

这将启动 MCP 服务器并用示例查询测试所有可用工具。

使用方法

命令行

运行 MCP 服务器：

# 使用预提取数据启动服务器
npm start
# 或者
npx -y mcp-antd-components

Claude Desktop 集成

要在 Claude Desktop 中使用此 MCP 服务器，编辑你的 claude_desktop_config.json 配置文件：

{
  "mcpServers": {
    "Ant Design Components": {
      "command": "npx",
      "args": ["-y", "mcp-antd-components"]
    }
  }
}

配置文件的位置：

• macOS/Linux: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: $env:AppData\Claude\claude_desktop_config.json

Claude Code 集成

要在 Claude Code CLI 中使用此 MCP 服务器，请按照以下步骤操作：

1. 将 Ant Design 组件 MCP 服务器添加到 Claude Code

   # 基本语法
   claude mcp add antd-components npx -y mcp-antd-components
   

2. 验证 MCP 服务器是否已注册

   # 列出所有配置的服务器
   claude mcp list
   
   # 获取 Ant Design 组件服务器的详细信息
   claude mcp get antd-components
   

3. 如果需要移除服务器

   claude mcp remove antd-components
   

4. 在 Claude Code 中使用工具

   配置完成后，您可以在 Claude Code 会话中通过询问关于 Ant Design 组件的问题来使用该工具。

MCP 协议

MCP（模型上下文协议）定义了一组接口和消息格式，用于在 LLM 和外部数据源之间建立通信。它允许 LLM 根据实时请求动态获取信息，而不是仅依赖于训练时的知识。这种设计特别适用于需要与不断变化的外部系统交互的任务。

优点

1. 快速响应：MCP 允许模型直接查询最新数据，无需等待重新训练。
2. 灵活性：支持多种数据源和接口协议，便于扩展。
3. 可维护性：通过明确定义接口，简化了系统的维护和更新。

更新说明

要为新版本的 Ant Design 更新文档，只需再次运行提取脚本，并将更新后的仓库传递给它。这样可以确保始终使用最新的组件文档。

这种方法具有以下几个优势：

1. 用户无需克隆整个 Ant Design 仓库。
2. 启动 MCP 服务器的速度更快。
3. 包体积更小。
4. 更新新版本时更易于管理。

通过这种方式，您可以始终保持与最新 Ant Design 版本的同步，同时保持高效和灵活的工作流程。