Ant Design

Provides MCP access to Ant Design component docs, props, examples, and API information for automated code generation.

javascript

0

GitHub Stars

javascript

Language

6 months ago

First Indexed

3 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "leonwgc-ant-design-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "ant-design-mcp"
      ]
    }
  }
}

You run the Ant Design MCP Server to access up-to-date component documentation, props, usage examples, and API details for automated code generation. This server lets you discover all available Ant Design components, inspect individual components, search by keywords, and view usage examples, all from your development environment or via Claude Desktop integration.

How to use

Use an MCP client to interact with the Ant Design MCP Server and retrieve component information, usage examples, and icons. You can configure Claude Desktop to connect to the server, or run the server locally on your machine. The server exposes functions such as listing all components, getting detailed component information, searching by keyword, and fetching component usage examples.

How to install

Prerequisites: Node.js and npm or npx should be available on your system.

# Global installation (recommended for easy access from any directory)
npm install -g ant-design-mcp

# Local installation (in your project directory)
npm install ant-design-mcp

# Use without installing (npx)
npx ant-design-mcp

Configuration and runtime options

You can run the MCP server in different ways depending on how you want to invoke it. The following configurations show common methods you can copy into your Claude Desktop setup or run directly from the command line.

{
  "mcpServers": {
    "ant_design": {
      "command": "npx",
      "args": ["-y", "ant-design-mcp"]
    }
  }
}

Claude Desktop integration examples

If you integrate with Claude Desktop, you can point to the server using a JSON snippet like the one below. This uses the npx method so you don’t need to install globally.

{
  "mcpServers": {
    "ant-design": {
      "command": "npx",
      "args": ["-y", "ant-design-mcp"]
    }
  }
}

Standalone and development modes

Run the server locally in standalone mode to start serving requests directly from your machine.

npm start

For development with auto-reload, use the development script to watch for changes and reload automatically.

npm run dev

Available tools

get_all_component_names

Returns a comma-separated string of all Ant Design component names that the server can access.

get_component_info

Returns a Markdown document with details about a specific component, including category, description, import statement, props, usage examples, and API URL.

search_components

Search components by keyword and return a list of matching components with descriptions.

get_component_example

Return a complete TypeScript/React usage example for a given component.

get_components_by_category

Return all component names within a specified category (General, Layout, Navigation, Data Entry, Data Display, Feedback, Other).

get_all_icon_names

Return a comma-separated list of all available @ant-design/icons names (750+).