# Ant Design MCP Server

简体中文 | [English](./README.en.md)

[![npm version](https://badge.fury.io/js/ant-design-mcp.svg)](https://www.npmjs.com/package/ant-design-mcp)
[![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg)](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)