ContextQMD
Back to Ant Design

MCP Server

docs/react/mcp.en-US.md

6.3.74.8 KB
Original Source

This guide explains how to use Ant Design with AI tools through Model Context Protocol (MCP).

What is MCP?

Model Context Protocol (MCP) is an open protocol that enables AI models to interact with external tools and data sources. Through MCP, AI assistants can access real-time documentation, code examples, and API references.

Official MCP Server

Starting from @ant-design/cli v6.3.5, you can launch an official MCP server with the antd mcp command, providing 7 tools and 2 prompts for IDE integration.

Tools

ToolDescription
antd_listEnumerate available components
antd_infoRetrieve component property specifications
antd_docFetch complete documentation
antd_demoAccess runnable code examples
antd_tokenQuery design token values
antd_semanticInspect DOM structure and styling hooks
antd_changelogAnalyze API changes across versions

Prompts

PromptDescription
antd-expertPositions the agent as an Ant Design specialist
antd-page-generatorAssists with component-based page creation

Configuration

Install the CLI globally and add the MCP server to your IDE configuration:

bash
npm install -g @ant-design/cli
json
{
  "mcpServers": {
    "antd": {
      "command": "antd",
      "args": ["mcp"]
    }
  }
}

You can pin a specific antd version with additional args:

json
{
  "mcpServers": {
    "antd": {
      "command": "antd",
      "args": ["mcp", "--version", "5.20.0"]
    }
  }
}

Usage with AI Tools

ToolDescriptionConfiguration
CursorAdd to .cursor/mcp.json or Settings → Features → MCP. Documentation{ "mcpServers": { "antd": { "command": "antd", "args": ["mcp"] } } }
WindsurfAdd to ~/.codeium/windsurf/mcp_config.json. Documentation{ "mcpServers": { "antd": { "command": "antd", "args": ["mcp"] } } }
Claude CodeAdd to mcpServers in Claude settings. Documentation{ "mcpServers": { "antd": { "command": "antd", "args": ["mcp"] } } }
CodexAdd to .codex/mcp.json. Documentation{ "mcpServers": { "antd": { "command": "antd", "args": ["mcp"] } } }
Gemini CLIAdd to MCP configuration. Documentation{ "mcpServers": { "antd": { "command": "antd", "args": ["mcp"] } } }
TraeAdd to MCP settings. Documentation{ "mcpServers": { "antd": { "command": "antd", "args": ["mcp"] } } }
QoderAdd to MCP configuration. Documentation{ "mcpServers": { "antd": { "command": "antd", "args": ["mcp"] } } }
Neovate CodeConfigure MCP in settings or describe task with prompt. Documentation{ "mcpServers": { "antd": { "command": "antd", "args": ["mcp"] } } }

Community MCP Server

You can also use the community-maintained MCP server: @jzone-mcp/antd-components-mcp

This MCP server provides the following capabilities:

  • list-components - List all available Ant Design components
  • get-component-docs - Get detailed documentation for a specific component
  • list-component-examples - Get code examples for a component
  • get-component-changelog - Get the changelog for a component

Configuration:

json
{
  "mcpServers": {
    "antd-components": {
      "command": "npx",
      "args": ["-y", "@jzone-mcp/antd-components-mcp"]
    }
  }
}

Alternative: Using LLMs.txt

If your AI tool doesn't support MCP, you can use our LLMs.txt support instead. We provide:

Learn More