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

一个模型上下文协议 (MCP) 服务器，用于将 Ant Design 组件文档暴露给 Claude 等大型语言模型 (LLM)。该服务器允许 LLM 通过一组专用工具探索和理解 Ant Design 组件。

特征

易于使用——无需克隆整个 Ant Design 存储库
预先提取组件文档，以便更快地启动
列出所有可用的 Ant Design 组件
获取详细的组件文档，包括描述和用法
查看组件 props 和 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
Windows： $env:AppData\Claude\claude_desktop_config.json

克劳德代码集成

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

将 Ant Design Components MCP 服务器添加到 Claude Code
# Basic syntax claude mcp add antd-components npx -y mcp-antd-components
验证 MCP 服务器是否已注册
# List all configured servers claude mcp list # Get details for your Ant Design components server claude mcp get antd-components
如果需要，删除服务器
claude mcp remove antd-components
使用 Claude Code 中的工具配置完成后，您可以通过询问有关 Ant Design 组件的问题在 Claude Code 会话中调用该工具。

尖端：

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

MCP 工具

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

list-components ：以 PascalCase 格式列出所有可用的 Ant Design 组件（例如，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 模式）

示例

尝试的示例查询：

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/props 文档
示例代码
常用 props 文档

这种方法有几个优点：

用户无需克隆整个 Ant Design 仓库
MCP 服务器启动时间更快
更小的封装尺寸
新版本发布时更容易更新

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

Ant Design Components MCP Server

Integrations