Ant Design 组件模型上下文协议服务器

一个模型上下文协议 (MCP) 服务器，用于向大型语言模型 (LLM)（如 Claude）公开 Ant Design 组件文档。此服务器允许 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 集成

要将此 MCP 服务器与 Claude Desktop 一起使用，请编辑您的 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 集成

要将此 MCP 服务器与 Claude Code CLI 一起使用，请按照以下步骤操作：

1. 将 Ant Design Components 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 中使用该工具

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

提示：

• 使用 -s 或 --scope 标志以及 project（默认）或 global 来指定配置的存储位置

MCP 工具

该服务器提供以下工具，供 LLM 与 Ant Design 组件文档进行交互：

• list-components: 列出所有可用的 Ant Design 组件，格式为 PascalCase（例如，Button、DatePicker）
• get-component-props: 获取特定组件的 props 和 API 文档（使用 PascalCase 名称，如 "Button"）
• get-component-docs: 获取特定组件的详细文档（使用 PascalCase 名称，如 "DatePicker"）
• list-component-examples: 列出特定组件的所有可用示例（使用 PascalCase 名称，如 "Table"）
• get-component-example: 获取特定组件示例的代码（组件名称为 PascalCase）
• search-components: 按名称模式搜索组件（适用于 PascalCase 模式）

示例

可以尝试的示例查询：

Ant Design 中有哪些组件可用？
显示 Button 组件的文档。
Table 组件接受哪些 props？
显示 Modal 组件的代码示例。
获取 Form 组件的 "basic" 示例。
查找与 Input 或 Form 元素相关的组件。

注意：组件名称以 PascalCase 形式提供（例如，Button、DatePicker、Table），以匹配 React 组件命名约定，即使内部目录结构使用 kebab-case（例如，button、date-picker、table）。

工作原理

scripts/extract-docs.mjs 脚本从 Ant Design 仓库中提取文档，并将其保存到 data 目录。 这包括：

• 组件文档 (markdown)
• API/props 文档
• 示例代码
• 通用 props 文档

这种方法有几个优点：

1. 用户无需克隆整个 Ant Design 仓库
2. MCP 服务器启动时间更快
3. 包大小更小
4. 新版本发布时更容易更新

要更新新版本的 Ant Design 的文档，只需使用更新后的仓库再次运行提取脚本即可。