Ant Design Components MCP server

This MCP server provides access to Ant Design component documentation for Large Language Models (LLMs) like Claude. It enables LLMs to explore component details, view props, browse code examples, and search for specific components without needing to access the full Ant Design repository.

Installation

Initial Setup

Before using the MCP server for the first time, you need to extract the documentation from the Ant Design repository:

# First, clone the Ant Design repository (can be temporary)
git clone https://github.com/ant-design/ant-design.git

# Extract documentation
cd mcp-antd-components
npm run extract   # Uses the default ./ant-design path
# OR
node scripts/extract-docs.mjs /path/to/ant-design  # For a custom path

After extraction is complete, the Ant Design repository can be deleted if desired. The extracted documentation is saved in the data directory for the MCP server to use.

Verifying Installation

To verify that everything is working correctly, run the test script:

npm test
# OR
node scripts/test-server.mjs

This will run the MCP server and test all available tools with sample queries.

Usage

Starting the Server

Run the MCP server using one of these commands:

# Run server with pre-extracted data
npm start
# OR
npx -y mcp-antd-components

Integration with Claude Desktop

To use this MCP server with Claude Desktop, edit your claude_desktop_config.json configuration file:

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

Location of the configuration file:

• macOS/Linux: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: $env:AppData\Claude\claude_desktop_config.json

Integration with Claude Code CLI

To use this MCP server with Claude Code CLI, follow these steps:

1. Add the Ant Design Components MCP server:

   claude mcp add antd-components npx -y mcp-antd-components
   

2. Verify the MCP server is registered:

   # List all configured servers
   claude mcp list
   
   # Get details for your Ant Design components server
   claude mcp get antd-components
   

3. Remove the server if needed:

   claude mcp remove antd-components
   

Tip: Use the -s or --scope flag with project (default) or global to specify where the configuration is stored.

Available Tools

The MCP server provides the following tools for interacting with Ant Design component documentation:

• list-components: Lists all available Ant Design components in PascalCase format (e.g., Button, DatePicker)
• get-component-props: Gets the props and API documentation for a specific component
• get-component-docs: Gets detailed documentation for a specific component
• list-component-examples: Lists all examples available for a specific component
• get-component-example: Gets the code for a specific component example
• search-components: Search for components by name pattern

Example Queries

Try these queries when interacting with the MCP server:

• What components are available in Ant Design?
• Show me the documentation for the Button component.
• What props does the Table component accept?
• Show me code examples for the Modal component.
• Get the example "basic" for the Form component.
• Find components related to Input or Form elements.

Note: Use component names in PascalCase format (e.g., Button, DatePicker, Table) to match React component naming conventions.

How to add this MCP server to Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > MCP and click "Add new global MCP server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "cursor-rules-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "cursor-rules-mcp"
            ]
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explictly ask the agent to use the tool by mentioning the tool name and describing what the function does.