Ant Design MCP Server

Name: Ant Design MCP Server
Rating: 4.6 (31 reviews)
Author: wxzhishang

Provides comprehensive Ant Design component documentation, examples, and API references through MCP. Enables natural language queries for React UI development with multi-version support.

Provides AI assistants with comprehensive Ant Design component documentation, examples, API references, and best practices. Supports multiple versions and enables natural language queries for React UI component development.

3129 views1Local (stdio)

developer tools design

GitHub

What it does

Query Ant Design component documentation
Get component code examples and API references
Browse best practices for specific components
Switch between different Ant Design versions
List available components by use case
Check component changelog and update history

Best for

React developers using Ant Design componentsBuilding UIs with design system guidanceLearning component APIs and implementation patterns

Multi-version Ant Design supportComplete component documentation with examplesBest practices guidance included

About Ant Design MCP Server

Ant Design MCP Server is a community-built MCP server published by wxzhishang that provides AI assistants with tools and capabilities via the Model Context Protocol. Ant Design MCP Server: AI assistants for Ant Design docs, examples, APIs. Multi-version support and natural-language que It is categorized under developer tools, design. This server exposes 7 tools that AI clients can invoke during conversations and coding sessions.

How to install

You can install Ant Design MCP Server in your AI client of choice. Use the install panel on this page to get one-click setup for Cursor, Claude Desktop, VS Code, and other MCP-compatible clients. This server runs locally on your machine via the stdio transport.

License

Ant Design MCP Server is released under the MIT license. This is a permissive open-source license, meaning you can freely use, modify, and distribute the software.

Tools (7)

change-component-version

切换当前Ant Design版本适用场景： 1. 用户主动切换版本 2. 其他工具需要切换版本时

get-best-practices

获取某个组件的最佳实践适用场景： 1. 用户主动获取某个组件的最佳实践 2. 其他工具需要获取某个组件的最佳实践时

get-component-changelog

列出 Ant Design 特定组件的更新日志适用场景： 1. 用户询问特定组件的更新日志 2. 在知道用户 antd 版本的情况下，当用户需要实现相关组件功能时判断是否在后续版本中才实现，来决定是否需要升级依赖

list-components

当用户请求一个新的用户界面（UI）使用 Ant Design 组件时使用此工具。此工具仅返回可用的组件列表。适用场景： 1. 用户希望看到可用的组件列表 2. 用户想要根据描述的场景知道可以用哪些组件 3. 其他工具调用需要用到可用组件列表时

get-component-docs

获取 Ant Design 特定组件的详细文档，支持数组形式传入适用场景：用户询问如何使用特定组件

Ant Design MCP Server

一个基于 Model Context Protocol (MCP) 的 Ant Design 组件服务器，为 AI 助手提供丰富的 Ant Design 组件文档、示例和最佳实践。

🚀 功能特性

组件文档查询：获取 Ant Design 所有组件的详细文档
示例代码获取：提供每个组件的完整示例代码
API 文档查询：查询组件的 API 属性和方法
最佳实践指导：获取组件使用的最佳实践建议
更新日志查询：查看组件的版本更新历史
多版本支持：支持切换不同版本的 Ant Design

📦 安装

从源码构建

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

# 安装依赖
npm install

# 构建项目
npm run build

🛠️ 使用方法

启动 MCP 服务器

构建完项目后可以选择在本地的客户端配置MCP。

具体配置方法可以参考客户端说明。

以cursor为例，可以在Cursor Settings中的Tools中配置：

// 从本地导入（推荐，后面也许就不推荐了）
{
  "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 仓库提取最新数据：

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

# 执行脚本
npm run extract

# 可能会出现更新日志无法正常获取的现象(如果docs文件夹下没有components-changelog.json文件)，可以执行以下脚本后重新执行extract脚本
npm run generate-component-changelog

爬取最佳实践

此功能还待完善，写得脚本太烂了，目前爬取的数据较混乱，如果有大佬有好的思路欢迎PR

# 爬取全部组件的最佳实践（需要提前提取Ant Design数据）
npm run crawl-practices

# 爬取指定组件的最佳实践
npm run crawl-practices Button ...

在 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 版本

📁 项目结构

antd-MCP/
├── src/                    # 源代码
│   ├── tools/             # MCP 工具实现
│   ├── scripts/           # 脚本工具
│   ├── utils/             # 工具函数
│   └── index.ts           # 主入口文件
├── docs/                  # Ant Design 组件文档
│   └── components/        # 各组件文档和示例
├── cli.ts                 # 命令行入口
└── package.json           # 项目配置

🔧 开发

开发环境启动

可以利用MCP提供的线上调试器调试

构建项目

npm run build

调试和检查

npm run inspector

生成组件更新日志

npm run generate-component-changelog

📋 系统要求

Node.js >= 16.0.0
npm 或 yarn

🤝 贡献

欢迎提交 Issue 和 Pull Request！

开发流程

Fork 本仓库
创建特性分支 (git checkout -b feat/amazing-feature)
提交更改 (git commit -m 'Add some amazing feature')
推送到分支 (git push origin feat/amazing-feature)
开启 Pull Request

分支命名规范

feat/ - 新功能
fix/ - 问题修复
docs/ - 文档更新
refactor/ - 代码重构
test/ - 测试相关

Alternatives

Chrome DevTools MCP

chromedevtools

28.1k

AI-driven control of live Chrome via Chrome DevTools: browser automation, debugging, performance analysis and network mo

OfficialPopular

50711

Chrome DevTools

chromedevtools

28.1k

Use Chrome DevTools for web site test speed, debugging, and performance analysis. The essential chrome developer tools f

OfficialPopular

3.9k172

GitHub

github

27.6k

Extend your developer tools with GitHub MCP Server for advanced automation, supporting GitHub Student and student packag

OfficialRemotePopular

4.5k232

Repomix

yamadashy

22.3k

Optimize your codebase for AI with Repomix—transform, compress, and secure repos for easier analysis with modern AI tool

OfficialPopular

1.0k7

Related Skills

Browse all skills

ui-design-system

UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.

elegant-design

Create world-class, accessible, responsive interfaces with sophisticated interactive elements including chat, terminals, code display, and streaming content. Use when building user interfaces that need professional polish and developer-focused features.

ai-sdk

Answer questions about the AI SDK and help build AI-powered features. Use when developers: (1) Ask about AI SDK functions like generateText, streamText, ToolLoopAgent, embed, or tools, (2) Want to build AI agents, chatbots, RAG systems, or text generation features, (3) Have questions about AI providers (OpenAI, Anthropic, Google, etc.), streaming, tool calling, structured output, or embeddings, (4) Use React hooks like useChat or useCompletion. Triggers on: "AI SDK", "Vercel AI SDK", "generateText", "streamText", "add AI to my app", "build an agent", "tool calling", "structured output", "useChat".

powerbi-modeling

Power BI semantic modeling assistant for building optimized data models. Use when working with Power BI semantic models, creating measures, designing star schemas, configuring relationships, implementing RLS, or optimizing model performance. Triggers on queries about DAX calculations, table relationships, dimension/fact table design, naming conventions, model documentation, cardinality, cross-filter direction, calculation groups, and data model best practices. Always connects to the active model first using power-bi-modeling MCP tools to understand the data structure before providing guidance.

agent-tool-builder

Tools are how AI agents interact with the world. A well-designed tool is the difference between an agent that works and one that hallucinates, fails silently, or costs 10x more tokens than necessary. This skill covers tool design from schema to error handling. JSON Schema best practices, description writing that actually helps the LLM, validation, and the emerging MCP standard that's becoming the lingua franca for AI tools. Key insight: Tool descriptions are more important than tool implementa

cli-developer

Use when building CLI tools, implementing argument parsing, or adding interactive prompts. Invoke for CLI design, argument parsing, interactive prompts, progress indicators, shell completions.