Ant Design MCP Server
简体中文 | English
一个 Model Context Protocol (MCP) 服务器，提供 Ant Design 组件库的文档和信息访问，用于自动化代码生成。
特性
- 📋 获取所有可用的 Ant Design 组件名称
- 📖 获取详细的组件信息（props、示例、API 文档）
- 🔍 通过关键词或类别搜索组件
- 💡 获取特定组件的使用示例
- 🏷️ 按类别浏览组件
安装
全局安装（推荐）
npm install -g ant-design-mcp
本地安装
npm install ant-design-mcp
使用 npx（无需安装）
npx ant-design-mcp
使用方法
在 Claude Desktop 中使用
添加到您的 Claude Desktop 配置文件：
MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%/Claude/claude_desktop_config.json
{
"mcpServers": {
"ant-design": {
"command": "npx",
"args": ["-y", "ant-design-mcp"]
}
}
}
如果已全局安装：
{
"mcpServers": {
"ant-design": {
"command": "ant-design-mcp"
}
}
}
独立运行服务器
npm start
开发模式（自动重载）
npm run dev
可用工具
1. get_all_component_names
获取所有可用的 Ant Design 组件名称列表。
返回值: 以逗号分隔的所有组件名称字符串
示例:
Button, Form, Table, Modal, Input, Select, ...
2. get_component_info
获取特定组件的详细信息。
参数:
componentName(string, 必需): 组件名称（例如 "Button"、"Form"）
返回值: 包含以下内容的 Markdown 文档:
- 组件类别
- 描述
- 导入语句
- Props 文档
- 使用示例
- API 文档 URL
3. search_components
通过关键词或功能搜索组件。
参数:
keyword(string, 必需): 搜索词（组件名称、类别或功能）
返回值: 匹配的组件列表及描述
4. get_component_example
获取特定组件的完整使用示例。
参数:
componentName(string, 必需): 组件名称
返回值: TypeScript/React 代码示例
5. get_components_by_category
获取特定类别中的所有组件。
参数:
category(string, 必需): 类别名称- General (通用)
- Layout (布局)
- Navigation (导航)
- Data Entry (数据录入)
- Data Display (数据展示)
- Feedback (反馈)
- Other (其他)
返回值: 指定类别中的组件名称列表
6. get_all_icon_names
获取所有可用的 @ant-design/icons 图标名称列表。
返回值: 以逗号分隔的所有图标名称字符串（包含 750+ 个图标）
示例:
StepBackwardOutlined, StepForwardOutlined, CheckCircleOutlined, CloseCircleOutlined, ...
图标类型:
- Outlined (线框风格)
- Filled (实心风格)
- TwoTone (双色风格)
组件分类
通用 (General)
Button, Icon, Typography
布局 (Layout)
Divider, Grid, Layout, Space, Splitter
导航 (Navigation)
Affix, Breadcrumb, Dropdown, Menu, Pagination, Steps
数据录入 (Data Entry)
AutoComplete, Cascader, Checkbox, ColorPicker, DatePicker, Form, Input, InputNumber, Mentions, Radio, Rate, Select, Slider, Switch, TimePicker, Transfer, TreeSelect, Upload
数据展示 (Data Display)
Avatar, Badge, Calendar, Card, Carousel, Collapse, Descriptions, Empty, Image, List, Popover, QRCode, Segmented, Statistic, Table, Tabs, Tag, Timeline, Tooltip, Tour, Tree
反馈 (Feedback)
Alert, Drawer, Message, Modal, Notification, Popconfirm, Progress, Result, Skeleton, Spin, Watermark
其他 (Other)
Anchor, App, ConfigProvider, FloatButton, Flex
与 Claude Desktop 集成
添加到您的 Claude Desktop 配置：
{
"mcpServers": {
"ant-design": {
"command": "node",
"args": ["/path/to/ant-admin-template/ant-design-mcp/index.js"]
}
}
}
使用场景
- 自动化代码生成: 使用组件信息从设计规范自动生成 React 代码
- 组件发现: 快速找到满足需求的合适组件
- 文档参考: 无需离开开发环境即可访问组件 props 和示例
- 设计系统集成: 将 Ant Design 组件集成到 AI 驱动的开发工作流程中
示例查询
- "获取所有 Ant Design 组件名称"
- "显示 Form 组件的信息"
- "搜索与数据录入相关的组件"
- "获取 Table 组件的使用示例"
- "显示反馈类别中的所有组件"
贡献
要添加更详细的组件信息：
- Fork 仓库
- 编辑
index.js - 在
COMPONENT_INFO对象中添加组件详情 - 包含 props、示例和描述
- 提交 pull request
开发
# 克隆仓库
git clone https://github.com/leonwgc/ant-design-mcp.git
cd ant-design-mcp
# 安装依赖
npm install
# 以开发模式运行（自动重载）
npm run dev
发布
详细的发布说明请参阅 PUBLISH.md
许可证
ISC
作者
leon.wang