Ant Design Components MCP Server

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

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

特性

• 易于使用-无需克隆整个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 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
• 窗户： $env:AppData\Claude\claude_desktop_config.json

Claude代码集成

要将此MCP服务器与Claude Code CLI一起使用，请执行以下步骤：

1. 将Ant设计组件MCP服务器添加到Claude代码中

   # Basic syntax
   claude mcp add antd-components npx -y mcp-antd-components

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

   # List all configured servers
   claude mcp list

   # Get details for your Ant Design components server
   claude mcp get antd-components

1. 如果需要，请删除服务器

   claude mcp remove antd-components

1. 使用Claude Code中的工具

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

提示：

• 使用 -s 或 --scope 旗与 project （默认）或 global 指定配置的存储位置

MCP工具

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

• list-components：以PascalCase格式列出所有可用的Ant设计组件（例如，按钮、日期选择器）
• 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组件命名约定，即使内部目录结构使用烤肉串大小写（例如，Button、日期选择器、Table）。

运作原理

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

• 组件文档（标记）
• API/道具文件
• 示例代码
• 常用道具文档

这种方法有几个优点：

1. 用户不需要克隆整个Ant Design存储库
2. MCP服务器的启动时间更快
3. 包装尺寸更小
4. 新版本发布后更容易更新

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