Ant Design Components

🚀 MCP Server for Ant Design Component Documentation

This is a Model Context Protocol (MCP) server based on the Ant Design component documentation. It exposes the documentation of Ant Design components to large language models (LLMs) like Claude. This server serves as a set of professional tools that allow LLMs to explore and understand Ant Design components.

✨ Features

• Easy to Use: No need to clone the entire Ant Design repository.
• Fast Startup: Component documentation is pre - extracted for quick access.
• Component Listing: List all available Ant Design components.
• Detailed Documentation: Get detailed documentation for specific components, including descriptions and usage.
• Props and API: View component properties (props) and API definitions.
• Code Examples: Browse code examples for specific components.
• Search Functionality: Search for components by name or functionality.

📦 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 a temporary clone)
git clone https://github.com/ant-design/ant-design.git

# Extract the documentation
cd mcp-antd-components
npm run extract   # Use the default ./ant-design path
# Or
node scripts/extract-docs.mjs /path/to/ant-design  # Custom path

# After extraction, you can delete the Ant Design repository if needed

This will create all the extracted component documentation in the data directory, which the MCP server will use.

Testing the Server

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

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

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

💻 Usage Examples

Command Line

Run the MCP server:

# Start the server with pre - extracted data
npm start
# Or
npx -y mcp-antd-components

Claude Desktop Integration

To use this MCP server in 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

Claude Code Integration

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

1. Add the Ant Design Components MCP Server to Claude Code

# Basic syntax
claude mcp add antd-components npx -y mcp-antd-components

2. Verify Server Registration

# List all configured servers
claude mcp list

# Get detailed information about the Ant Design Components server
claude mcp get antd-components

3. Remove the Server if Needed

claude mcp remove antd-components

4. Use the Tools in Claude Code After configuration, you can use the tools by asking questions about Ant Design components in your Claude Code session.

📚 Documentation

MCP Protocol

The Model Context Protocol (MCP) defines a set of interfaces and message formats for communication between LLMs and external data sources. It allows LLMs to dynamically obtain information based on real - time requests, rather than relying solely on knowledge from training. This design is particularly suitable for tasks that require interaction with constantly changing external systems.

Advantages

1. Fast Response: MCP allows the model to directly query the latest data without waiting for retraining.
2. Flexibility: Supports multiple data sources and interface protocols for easy expansion.
3. Maintainability: Simplifies system maintenance and updates through well - defined interfaces.

Update Instructions

To update the documentation for a new version of Ant Design, simply run the extraction script again and pass the updated repository to it. This ensures that you always use the latest component documentation.

This approach has several advantages:

1. Users don't need to clone the entire Ant Design repository.
2. The MCP server starts faster.
3. The package size is smaller.
4. It's easier to manage updates for new versions.

In this way, you can always stay in sync with the latest Ant Design version while maintaining an efficient and flexible workflow.