MCP Server - Ant Design

本指南介绍如何通过 Model Context Protocol (MCP) 在 AI 工具中使用 Ant Design。

什么是 MCP？

Model Context Protocol (MCP) 是一个开放协议，使 AI 模型能够与外部工具和数据源进行交互。通过 MCP，AI 助手可以访问实时文档、代码示例和 API 参考资料。

官方 MCP Server

从 @ant-design/cli v6.3.5 起，你可以通过 antd mcp 命令启动官方 MCP 服务器，提供 8 个工具和 2 个提示词，支持 IDE 集成。

工具

工具	说明
`antd_list`	列出可用组件
`antd_info`	获取组件属性规格
`antd_doc`	获取完整文档
`antd_demo`	获取可运行的代码示例
`antd_token`	查询 Design Token 值
`antd_design_md`	获取设计语言文档
`antd_semantic`	查看 DOM 结构和样式钩子
`antd_changelog`	分析跨版本 API 变更

提示词

提示词	说明
`antd-expert`	将 Agent 定位为 Ant Design 专家
`antd-page-generator`	辅助基于组件的页面创建

配置

将 MCP 服务器添加到 IDE 配置：

json

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

如果你已全局安装 CLI（npm i -g @ant-design/cli），也可以使用：

json

{
  "mcpServers": {
    "antd": {
      "command": "antd",
      "args": ["mcp"]
    }
  }
}

你可以通过额外参数指定 antd 版本：

json

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

也可以让 CLI 自动写入支持的项目配置：

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

支持的客户端包括 claude、cursor、vscode 和 codex。Setup 模式包括 mcp、skill 和 both。

在 AI 工具中的使用

工具	说明	配置
Cursor	添加到 `.cursor/mcp.json` 或设置 → 功能 → MCP。文档	`{ "mcpServers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "mcp"] } } }`
Windsurf	添加到 `~/.codeium/windsurf/mcp_config.json`。文档	`{ "mcpServers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "mcp"] } } }`
Claude Code	添加到 Claude 设置的 `mcpServers`。文档	`{ "mcpServers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "mcp"] } } }`
VS Code	添加到 `.vscode/mcp.json` 或设置 → MCP。文档	`{ "servers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "mcp"] } } }`
Codex	添加到 `.codex/mcp.json`。文档	`{ "mcpServers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "mcp"] } } }`
Gemini CLI	添加到 MCP 配置。文档	`{ "mcpServers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "mcp"] } } }`
Trae	添加到 MCP 设置。文档	`{ "mcpServers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "mcp"] } } }`
Qoder	添加到 MCP 配置。文档	`{ "mcpServers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "mcp"] } } }`
Neovate Code	在设置中配置 MCP 或使用提示词描述任务。文档	`{ "mcpServers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "mcp"] } } }`

社区 MCP Server

你也可以使用社区维护的 MCP server：@jzone-mcp/antd-components-mcp

该 MCP server 提供以下功能：

list-components - 列出所有可用的 Ant Design 组件
get-component-docs - 获取指定组件的详细文档
list-component-examples - 获取组件的代码示例
get-component-changelog - 获取组件的更新日志

配置：

json

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

备选方案：使用 LLMs.txt

如果您的 AI 工具不支持 MCP，可以使用我们的 LLMs.txt 支持。我们提供：

了解更多