MCP Server - Ant Design

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 8 tools and 2 prompts for IDE integration.

Tools

Tool	Description
`antd_list`	Enumerate available components
`antd_info`	Retrieve component property specifications
`antd_doc`	Fetch complete documentation
`antd_demo`	Access runnable code examples
`antd_token`	Query design token values
`antd_design_md`	Fetch the design-language document
`antd_semantic`	Inspect DOM structure and styling hooks
`antd_changelog`	Analyze API changes across versions

Prompts

Prompt	Description
`antd-expert`	Positions the agent as an Ant Design specialist
`antd-page-generator`	Assists with component-based page creation

Configuration

Add the MCP server to your IDE configuration:

json

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

Or if you have the CLI installed globally (npm i -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": "npx",
      "args": ["-y", "@ant-design/cli", "mcp", "--version", "5.20.0"]
    }
  }
}

You can also let the CLI write supported project configuration for you:

bash

antd setup --client claude
antd setup --client cursor --mode both
antd setup --client vscode --write-instructions
antd setup --client codex
antd setup --client claude --dry-run
antd setup --client claude --check

Supported clients are claude, cursor, vscode, and codex. Setup modes are mcp, skill, and both.

Usage with AI Tools

Tool	Description	Configuration
Cursor	Add to `.cursor/mcp.json` or Settings → Features → MCP. Documentation	`{ "mcpServers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "mcp"] } } }`
Windsurf	Add to `~/.codeium/windsurf/mcp_config.json`. Documentation	`{ "mcpServers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "mcp"] } } }`
Claude Code	Add to `mcpServers` in Claude settings. Documentation	`{ "mcpServers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "mcp"] } } }`
VS Code	Add to `.vscode/mcp.json` or Settings → MCP. Documentation	`{ "servers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "mcp"] } } }`
Codex	Add to `.codex/mcp.json`. Documentation	`{ "mcpServers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "mcp"] } } }`
Gemini CLI	Add to MCP configuration. Documentation	`{ "mcpServers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "mcp"] } } }`
Trae	Add to MCP settings. Documentation	`{ "mcpServers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "mcp"] } } }`
Qoder	Add to MCP configuration. Documentation	`{ "mcpServers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "mcp"] } } }`
Neovate Code	Configure MCP in settings or describe task with prompt. Documentation	`{ "mcpServers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "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:

llms.txt - Structured overview of all components
llms-full.txt - Complete documentation with examples

Learn More