Ant Design

You run an MCP server that exposes Ant Design component documentation, examples, API details, best practices, changelogs, and multi-version support to help you build with confidence. This server acts as a centralized source of up-to-date component information, making it easy to browse, extract code, and keep your Ant Design usage aligned with the latest releases.

How to use

You connect an MCP client to this server to access a rich set of capabilities for Ant Design components. Use the client to list available components, fetch component documentation, retrieve example code, query API details, get best-practice guidance, view update histories, and switch Ant Design versions. Each operation is designed to help you quickly discover, learn, and implement components in your projects.

How to install

Prerequisites you need before getting started are Node.js and npm (or yarn) installed on your machine.

Step 1: Clone the MCP server source and install dependencies.

# 克隆仓库
git clone <repository-url>
cd antd-MCP

# 安装依赖
npm install

# 构建项目
npm run build

启动并使用 MCP 服务器

在本地构建完成后，你可以通过以下本地命令来配置并运行 MCP 服务的本地实例。将以下配置添加到客户端设置中，以便客户端能够通过本地 MCP 服务器进行交互。你可以选择本地导入路径或使用 npx 导入方式。

// 从本地导入（推荐，后面也许就不推荐了）
{
  "mcpServers": {
    "antd_components_local": {
      "command": "node",
      "args": [
        "<repository-url>/antd-MCP/dist/cli.js"
      ]
    }
  }
}

// 从npm导入
{
  "mcpServers": {
    "antd_components_local": {
      "command": "npx",
      "args": [
        "antd-mcp"
      ]
    }
  }
}

提取 Ant Design 数据

如需将本地 Ant Design 仓库中的最新数据提取到 MCP，请执行以下步骤。

# 先克隆antd仓库到本地
git clone https://github.com/ant-design/ant-design

# 执行脚本
npm run extract

# 如遇更新日志无法获取的情况（docs 文件夹下缺少 components-changelog.json），可以执行以下脚本后重新执行 extract
npm run generate-component-changelog

在 MCP 客户端中使用

将此服务器添加到你的 MCP 客户端配置后，你可以使用以下功能。

• list-components - 列出所有可用的 Ant Design 组件
• get-component-docs - 获取指定组件的文档
• get-component-examples - 获取组件示例代码
• get-component-api - 查询组件的 API 文档
• get-best-practices - 获取组件使用的最佳实践
• get-component-changelog - 查看组件更新历史
• change-component-version - 切换 Ant Design 版本

开发与构建注意事项

保持数据与组件版本的一致性，定期提取 Ant Design 数据并更新最佳实践以确保提供的内容始终是最新的。若遇到更新日志获取问题，请执行相应的生成脚本以确保 changelog 数据可用。

Available tools

list-components

Lists all available Ant Design components.

get-component-docs

Fetches detailed documentation for a specified component.

get-component-examples

Retrieves complete example code for a component.

get-component-api

Queries API attributes and methods for a component.

get-best-practices

Provides best-practice guidance for using a component.

get-component-changelog

Shows the version update history for a component.

change-component-version

Switches the Ant Design version used by the MCP server.