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"]
    }
  }
}

使用场景

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

开发

# 克隆仓库
git clone https://github.com/leonwgc/ant-design-mcp.git
cd ant-design-mcp

# 安装依赖
npm install

# 以开发模式运行（自动重载）
npm run dev

发布

详细的发布说明请参阅 PUBLISH.md

许可证

ISC

作者

leon.wang

链接

• npm 包
• GitHub 仓库
• Ant Design 官方文档
• Model Context Protocol

相关文档

• 快速开始指南
• 集成指南
• 示例
• 摘要