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

这是一个模型上下文协议（MCP）服务器，用于向大型语言模型（如Claude）暴露Ant Design组件文档。该服务器允许LLM通过一组专用工具来探索和理解Ant Design组件。

特性

• 易于使用 - 不需要克隆整个Ant Design仓库
• 预提取组件文档以加快启动速度
• 列出所有可用的Ant Design组件
• 获取详细的组件文档，包括描述和用法
• 查看组件属性和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 m_ cp 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模式）

示例

尝试以下示例查询：

Ant Design有哪些组件可用？
给我看看Button组件的文档。
Table组件接受哪些属性？
给我看看Modal组件的代码示例。
获取Form组件的“基本”示例。
查找与Input或Form元素相关的组件。

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