项目简介

本项目是一个 Model Context Protocol (MCP) 服务器，旨在将 Ant Design 组件库的文档以结构化的方式提供给大型语言模型（LLM），例如 Claude。通过此服务器，LLM 可以理解和利用 Ant Design 组件库，辅助用户进行前端开发。

主要功能点

组件列表查询: 列出所有可用的 Ant Design 组件。
组件文档获取: 获取指定组件的详细文档，包括描述和用法。
组件属性查看: 查看指定组件的属性 (Props) 和 API 定义。
组件示例浏览: 浏览指定组件的代码示例。
组件搜索: 根据名称或功能搜索组件。

安装步骤

克隆 Ant Design 仓库 (临时步骤): 为了提取文档，您需要先克隆 Ant Design 仓库。这只是临时步骤，提取完成后可以删除。

git clone https://github.com/ant-design/ant-design.git

安装依赖并提取文档: 进入 'mcp-antd-components' 目录，安装依赖并运行文档提取脚本。
```
cd mcp-antd-components
npm install
npm run extract
```
或者，如果您希望指定 Ant Design 仓库的路径：
```
node scripts/extract-docs.mjs /path/to/ant-design
```
文档提取完成后，会在项目根目录下生成 'data' 文件夹，其中包含了提取的组件文档数据。您可以根据需要删除之前克隆的 Ant Design 仓库。

启动 MCP 服务器: 使用以下命令启动 MCP 服务器。

npm start

或者使用 'npx' 运行：

npx -y mcp-antd-components

服务器配置

要将此 MCP 服务器与 MCP 客户端（例如 Claude Desktop 或 Claude Code CLI）集成，您需要配置客户端以连接到此服务器。以下是 Claude Desktop 的配置示例，您需要将此配置添加到 'claude_desktop_config.json' 文件中。

{
  "mcpServers": {
    "Ant Design Components": {  // 服务器名称，可以自定义
      "command": "npx",      // 启动服务器的命令
      "args": ["-y", "mcp-antd-components"] // 启动服务器的命令参数
    }
  }
}

配置说明:

'server name': 'Ant Design Components' - 您为此 MCP 服务器自定义的名称，在客户端中用于标识和选择服务器。
'command': 'npx' - 用于执行 Node.js 包的命令，这里用于运行 'mcp-antd-components' 包。
'args': '["-y", "mcp-antd-components"]' - 传递给 'npx' 命令的参数。
- '"-y"': 'npx' 的参数，表示自动同意安装 'mcp-antd-components' 包 (如果尚未安装)。
- '"mcp-antd-components"': 要执行的包名，这里指向 'mcp-antd-components' 包，启动服务器。

对于 Claude Code CLI，您可以使用 'claude mcp add' 命令添加服务器，命令会根据您提供的 'command' 和 'args' 生成类似的配置。

基本使用方法

服务器启动后，MCP 客户端（例如 Claude）可以通过配置连接到此服务器。连接成功后，您可以通过自然语言提问来查询 Ant Design 组件的相关信息。

示例查询:

What components are available in Ant Design?  (Ant Design 中有哪些组件可用？)
Show me the documentation for the Button component. (展示 Button 组件的文档。)
What props does the Table component accept? (Table 组件接受哪些属性？)
Show me code examples for the Modal component. (展示 Modal 组件的代码示例。)
Get the example "basic" for the Form component. (获取 Form 组件的 "basic" 示例。)
Find components related to Input or Form elements. (查找与 Input 或 Form 元素相关的组件。)

请注意，在查询组件名称时，请使用 PascalCase 格式（例如 'Button'、'DatePicker'）。

关键词

项目简介

主要功能点

安装步骤

服务器配置

基本使用方法

信息