# Ant Design MCP Server
简体中文 | [English](./README.en.md)
[](https://www.npmjs.com/package/ant-design-mcp)
[](https://opensource.org/licenses/ISC)
一个 Model Context Protocol (MCP) 服务器，提供 Ant Design 组件库的文档和信息访问，用于自动化代码生成。
## 特性
- 📋 获取所有可用的 Ant Design 组件名称
- 📖 获取详细的组件信息（props、示例、API 文档）
- 🔍 通过关键词或类别搜索组件
- 💡 获取特定组件的使用示例
- 🏷️ 按类别浏览组件
## 安装
### 全局安装（推荐）
```bash
npm install -g ant-design-mcp
```
### 本地安装
```bash
npm install ant-design-mcp
```
### 使用 npx（无需安装）
```bash
npx ant-design-mcp
```
## 使用方法
### 在 Claude Desktop 中使用
添加到您的 Claude Desktop 配置文件：
**MacOS**: `~/Library/Application Support/Claude/claude_desktop_config.json`
**Windows**: `%APPDATA%/Claude/claude_desktop_config.json`
```json
{
"mcpServers": {
"ant-design": {
"command": "npx",
"args": ["-y", "ant-design-mcp"]
}
}
}
```
如果已全局安装：
```json
{
"mcpServers": {
"ant-design": {
"command": "ant-design-mcp"
}
}
}
```
### 独立运行服务器
```bash
npm start
```
### 开发模式（自动重载）
```bash
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 配置：
```json
{
"mcpServers": {
"ant-design": {
"command": "node",
"args": ["/path/to/ant-admin-template/ant-design-mcp/index.js"]
}
}
}
```
## 使用场景
1. **自动化代码生成**: 使用组件信息从设计规范自动生成 React 代码
2. **组件发现**: 快速找到满足需求的合适组件
3. **文档参考**: 无需离开开发环境即可访问组件 props 和示例
4. **设计系统集成**: 将 Ant Design 组件集成到 AI 驱动的开发工作流程中
## 示例查询
- "获取所有 Ant Design 组件名称"
- "显示 Form 组件的信息"
- "搜索与数据录入相关的组件"
- "获取 Table 组件的使用示例"
- "显示反馈类别中的所有组件"
## 贡献
要添加更详细的组件信息：
1. Fork 仓库
2. 编辑 `index.js`
3. 在 `COMPONENT_INFO` 对象中添加组件详情
4. 包含 props、示例和描述
5. 提交 pull request
## 开发
```bash
# 克隆仓库
git clone https://github.com/leonwgc/ant-design-mcp.git
cd ant-design-mcp
# 安装依赖
npm install
# 以开发模式运行（自动重载）
npm run dev
```
## 发布
详细的发布说明请参阅 [PUBLISH.md](./PUBLISH.md)
## 许可证
ISC
## 作者
leon.wang
## 链接
- [npm 包](https://www.npmjs.com/package/ant-design-mcp)
- [GitHub 仓库](https://github.com/leonwgc/ant-design-mcp)
- [Ant Design 官方文档](https://ant.design/)
- [Model Context Protocol](https://modelcontextprotocol.io/)
## 相关文档
- [快速开始指南](./QUICKSTART.md)
- [集成指南](./INTEGRATION.md)
- [示例](./examples.md)
- [摘要](./SUMMARY.md)
