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

一个模型上下文协议（MCP）服务器，将 Ant Design 组件文档暴露给像 Claude 这样的大型语言模型（LLMs）。该服务器允许 LLM 通过一组专门的工具来探索和理解 Ant Design 组件。

特性

• 易于使用 - 不需要克隆整个 Ant Design 仓库
• 预先提取组件文档以加快启动速度
• 列出所有可用的 Ant Design 组件
• 获取详细的组件文档，包括描述和用法
• 查看组件属性和 API 定义
• 浏览特定组件的代码示例
• 按名称或功能搜索组件

初始设置

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

# First, clone the Ant Design repository (can be temporary)
git clone https://github.com/ant-design/ant-design.git

# Extract documentation
cd mcp-antd-components
npm run extract   # Uses the default ./ant-design path
# OR
node scripts/extract-docs.mjs /path/to/ant-design  # For a custom path

# After extraction is complete, the Ant Design repo can be deleted if desired

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

测试服务器

为了验证一切是否正常工作，您可以运行测试脚本：

npm test
# OR
node scripts/test-server.mjs

这将运行 MCP 服务器，并使用示例查询测试所有可用工具。

使用方法

命令行

运行 MCP 服务器：

# Run server with pre-extracted data
npm start
# OR
npx -y mcp-antd-components

Claude 桌面集成

要将此 MCP 服务器与 Claude 桌面应用程序一起使用，请编辑您的 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 组件 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 组件的问题来调用该工具。

提示：

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

MCP 工具

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

• list-components: 列出所有可用的 Ant Design 组件，采用 PascalCase 格式（例如，Button, DatePicker）
• get-component-props: 获取特定组件的属性和 API 文档（使用 PascalCase 命名，如 "Button"）
• get-component-docs: 获取特定组件的详细文档（使用 PascalCase 命名，如 "DatePicker"）
• list-component-examples: 列出特定组件的所有示例（使用 PascalCase 命名，如 "Table"）
• get-component-example: 获取特定组件示例的代码（组件名称采用 PascalCase）
• search-components: 通过名称模式搜索组件（支持 PascalCase 模式）

示例

可以尝试的查询示例：

What components are available in Ant Design?
Show me the documentation for the Button component.
What props does the Table component accept?
Show me code examples for the Modal component.
Get the example "basic" for the Form component.
Find components related to Input or Form elements.

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

工作原理

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

• 组件文档（markdown 格式）
• API/属性文档
• 示例代码
• 通用属性文档

这种方法有几个优点：

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

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