Ant Design Components MCP Server

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

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

特征

• 易于使用——无需克隆整个 Ant Design 存储库
• 预先提取组件文档，以便更快地启动
• 列出所有可用的 Ant Design 组件
• 获取详细的组件文档，包括描述和用法
• 查看组件 props 和 API 定义
• 浏览特定组件的代码示例
• 按名称或功能搜索组件

初始设置

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

这将创建一个包含所有提取的组件文档的data目录，MCP 服务器将使用该目录。

测试服务器

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

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

用法

命令行

运行 MCP 服务器：

Claude 桌面集成

要将此 MCP 服务器与 Claude Desktop 一起使用，请编辑您的claude_desktop_config.json配置文件：

配置文件的位置：

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

克劳德代码集成

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

1. 将 Ant Design Components MCP 服务器添加到 Claude Code
   # Basic syntax claude mcp add antd-components npx -y mcp-antd-components
2. 验证 MCP 服务器是否已注册
   # List all configured servers claude mcp list # Get details for your Ant Design components server 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 ：以 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 模式）

示例

尝试的示例查询：

注意：组件名称采用 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 新版本的文档，只需使用更新的存储库再次运行提取脚本。