Home / MCP / Ant Design Components Model Context Protocol Server

Ant Design Components Model Context Protocol Server

Provides pre-extracted Ant Design component docs and APIs to LLMs through an MCP server for exploration and querying.

javascript

20stars

View on GitHub

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
    "mcpServers": {
        "antd_components": {
            "command": "npx",
            "args": [
                "-y",
                "mcp-antd-components"
            ]
        }
    }
}

You run an MCP server that exposes pre-extracted Ant Design component documentation to language models. It lets you list components, read detailed docs and props, browse code examples, and search by name or functionality, without needing to clone the full Ant Design repository.

How to use

You access the server through an MCP client. Start the local MCP process, then load it into your client to perform queries like: find available components, view a component’s props, read its API details, and fetch code examples.

How to install

Prerequisites: you need Node.js and npm installed on your machine.

Step 1 Install the MCP server tooling.

# Install the MCP server and bring in the required package
# This uses the standard npx-based run path shown in integration steps

Step 2 Run the MCP server with pre-extracted data.

npm start
```

or

```
npx -y mcp-antd-components

Step 3 (Optional) If you want to test the server, run the test script.

npm test
```

or

```
node scripts/test-server.mjs

Additional notes

The MCP server uses a local stdio interface. You can start it via a direct command that runs the MCP package. The setup includes a workflow to extract component documentation into a data directory and then start the server from that prepared data.

Configuration and usage tips

To integrate with Claude Desktop, you can configure the MCP server with a simple entry that runs the MCP package via npx. The configuration points the desktop app to start the server process when needed.

Available tools

list-components

Lists all available Ant Design components in PascalCase format (e.g., Button, DatePicker)

get-component-props

Retrieves the props and API documentation for a specific component (use PascalCase names like Button)

get-component-docs

Gets detailed documentation for a specific component (use PascalCase names like DatePicker)

list-component-examples

Lists all code examples available for a specific component (use PascalCase names like Table)

get-component-example

Gets the code for a specific component example (component name in PascalCase)

search-components

Searches for components by name pattern (works with PascalCase patterns)