Ant Design组件信息服务

Ant Design MCP Server

Simplified Chinese| English

A Model Context Protocol (MCP) server that provides document and information access to the Ant Design component library for automated code generation.

feature

• 📋 Get all available Ant Design component names
• 📖 Get detailed component information (props, examples, API documentation)
• 🔍 Search components by keywords or categories
• 💡 Obtain usage examples for specific components
• 🏷️ Browse components by category

install

Global installation (recommended)

npm install -g ant-design-mcp

Local installation

npm install ant-design-mcp

Using NPX (no installation required)

npx ant-design-mcp

Instructions for use

Using Claude Desktop

Add to your Claude Desktop configuration file:

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

If globally installed:

{
  "mcpServers": {
    "ant-design": {
      "command": "ant-design-mcp"
    }
  }
}

Independently running servers

npm start

Development mode (automatic reload)

npm run dev

Available tools

1. get_all_component_names

Get a list of all available Ant Design component names.

return value: A comma separated string of all component names

example:

Button, Form, Table, Modal, Input, Select, ...

2. get_component_info

Get detailed information about a specific component.

parameter:

• componentName (string, required): Component name (e.g. "Button", "Form")

return valueMarkdown document containing the following content:

• Component category
• description
• import statement
• Props document
• Usage example
• API document URL

3. search_components

Search for components through keywords or functions.

parameter:

• keyword (string, required): Search term (component name, category, or function)

return valueList and description of matched components

4. get_component_example

Obtain complete usage examples of specific components.

parameter:

• componentName (string, required): Component name

return value: TypeScript/React code example

5. get_components_by_category

Retrieve all components within a specific category.

parameter:

• category (string, required): Category name
  • General (General)
  • Layout
  • Navigation
  • Data Entry
  • Data Display
  • Feedback
  • Other (Other)

return valueList of component names in the specified category

6. get_all_icon_names

Get a list of all available @ ant design/icons icon names.

return value: A comma separated string of all icon names (containing 750+icons)

example:

StepBackwardOutlined, StepForwardOutlined, CheckCircleOutlined, CloseCircleOutlined, ...

icon type:

• Outline (wireframe style)
• Filled (Solid Style)
• TwoTone (Two tone style)

Component classification

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 (Other)

Anchor, app, configuration, floatbutton, flex

Integrate with Claude Desktop

Add to your Claude Desktop configuration:

{
  "mcpServers": {
    "ant-design": {
      "command": "node",
      "args": ["/path/to/ant-admin-template/ant-design-mcp/index.js"]
    }
  }
}

Usage scenarios

1. Automated code generationAutomatically generate React code from design specifications using component information
2. Component discoveryQuickly find suitable components that meet your needs
3. Document referenceAccess component props and examples without leaving the development environment
4. Design system integrationIntegrating Ant Design components into AI driven development workflows

Example query

• Get all Ant Design component names
• Display information about the Form component
• Search and data entry related components
• Example of using the Table component
• Display all components in the feedback category

contribution

To add more detailed component information:

1. Fork Warehouse
2. edit index.js
3. in COMPONENT_INFO Add component details to the object
4. Includes props, examples, and descriptions
5. Submit a pull request

development

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

# 安装依赖
npm install

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

release

Please refer to the detailed release instructions PUBLISH.md

license

ISC

author

leon.wang

link

• Npm package
• GitHub repository
• Ant Design Official Document
• Model Context Protocol

Related documents

• Quick Start Guide
• Integration Guide
• example
• summary