by wxzhishang
Ant Design MCP Server: AI assistants for Ant Design docs, examples, APIs. Multi-version support and natural-language que
Provides comprehensive Ant Design component documentation, examples, and API references through MCP. Enables natural language queries for React UI development with multi-version support.
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.
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.
MIT
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.
Add new capabilities to Claude beyond text generation
Example
Access external data sources, execute code, interact with tools and services
Transform Claude from chatbot to action-taking agent
Provide Claude with access to relevant context and data
Example
Load project documentation, access knowledge bases, query databases
Get more accurate, context-aware responses
Automate multi-step workflows combining AI and external tools
Example
Research → Summarize → Create document → Send notification
Complete complex tasks end-to-end without manual steps
Share your MCP server with the developer community
We wired Ant Design MCP Server into a staging workspace; the listing’s GitHub and npm pointers saved time versus hunting across READMEs.
Ant Design MCP Server has been reliable for tool-calling workflows; the MCP profile page is a good permalink for internal docs.
Strong directory entry: Ant Design MCP Server surfaces stars and publisher context so we could sanity-check maintenance before adopting.
According to our notes, Ant Design MCP Server benefits from clear Model Context Protocol framing — fewer ambiguous “AI plugin” claims.
Ant Design MCP Server reduced integration guesswork — categories and install configs on the listing matched the upstream repo.
We wired Ant Design MCP Server into a staging workspace; the listing’s GitHub and npm pointers saved time versus hunting across READMEs.
Useful MCP listing: Ant Design MCP Server is the kind of server we cite when onboarding engineers to host + tool permissions.
According to our notes, Ant Design MCP Server benefits from clear Model Context Protocol framing — fewer ambiguous “AI plugin” claims.
Ant Design MCP Server is a well-scoped MCP server in the explainx.ai directory — install snippets and categories matched our Claude Code setup.
Ant Design MCP Server is among the better-indexed MCP projects we tried; the explainx.ai summary tracks the official description.
showing 1-10 of 54
一个基于 Model Context Protocol (MCP) 的 Ant Design 组件服务器，为 AI 助手提供丰富的 Ant Design 组件文档、示例和最佳实践。
# 克隆仓库
git clone <repository-url>
cd antd-MCP
# 安装依赖
npm install
# 构建项目
npm run build
构建完项目后可以选择在本地的客户端配置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 仓库提取最新数据：
# 先克隆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 客户端配置中，然后可以使用以下功能：
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
欢迎提交 Issue 和 Pull Request！
git checkout -b feat/amazing-feature)git commit -m 'Add some amazing feature')git push origin feat/amazing-feature)feat/ - 新功能fix/ - 问题修复docs/ - 文档更新refactor/ - 代码重构test/ - 测试相关Prerequisites
Time Estimate
15-60 minutes depending on server complexity
Steps
Troubleshooting
✓ Do
✗ Don't
💡 Pro Tips
Architecture
Model Context Protocol standardizes how AI hosts (Claude, Cursor) communicate with external tools and data sources through server implementations.
Protocols
Compatibility
✓ Use when
Use when you need Claude to access external data, execute actions, or integrate with tools. Best for extending AI capabilities beyond conversation.
✗ Avoid when
Avoid when native integrations exist (use official APIs directly), for real-time critical systems, or when security/compliance requires zero external dependencies.