Reader

让 AI 更懂 Ant Design：MCP 协议在前端领域的落地实践

| 掘金本周最热 | Default

antd-components-mcp.png

引言

当下 AI 盛行，层出不穷的大语言模型、IDE、Extension，其中热门的有 Chatgpt o3、Claude 3.7 Sonnet、Gemini 2.5 pro、Grok 3、Deepseek v3-0424、Cursor、Trae 国际版、Github Copilot、Cline，个人主要使用的是以下白嫖方案:

  • Trae 国际版
  • VS Code + Cline
  • VS Code + Github Copilot - 学生版 结合上白嫖的 Gemini exp 版本、OpenRouter free modal

通用大模型非常强大，但是在千人千面的项目场景中，通用的大模型缺少了点相关性，想要增加相关性可以通过：添加 rules、设定 system prompt/不断地添加 prompt、添加 rag、开发定向 MCP 服务、微调模型、甚至是训练公司项目特有模型，方案挺多的实际要看情况选择合适的方案，本文目的是通过 [MCP + system prompt] 方案实现让大模型可以理解我们的特定组件信息，让大模型可以生成更相关的代码

MCP 是什么

MCP 全称 Model Context Protocol 是一种用于描述模型上下文的协议，它允许模型在生成文本时获取更多的上下文信息。MCP 协议定义了一种标准的方式来描述模型的上下文，包括模型的名称、版本、输入和输出格式等信息。

简单理解就是：

每一个 MCP Server 都是大语言模型客户端的插件，MCP 可以提供 Tools、Prompt、Resource 等功能供客户端使用，客户端启动时读取所有的 MCP 的 Tools、Prompt、Resource 描述当做大语言模型的系统提示词，客户端根据模型返回的内容判断调用对应的 MCP 获取函数返回内容，客户端将用户输入 + 函数返回内容发送给大语言模型，大语言模型根据用户的问题生成更相关的回复

  • 客户端：Cursor、Claude Desktop、Github Copilot 等
    • 目前测试下来仅 Claude Desktop 支持 Prompt、Resource
  • Tools：提供核心的处理函数，大模型根据 tool 名称 + 描述 + 约定的入参来准确的调用对应的函数，函数的返回值最终会结合用户提问发送给大模型
  • Prompt：预设的提示词，支持配置表单输入，使用时需要手动选定，通常是用来帮助提升 MCP Tools 的使用能力
    • 例如本文通过预设的 system-description 提示词来圈定能力、优化工具调用频次、优化上下文
  • Resource：预设的内容，如 Antd Button 组件文档，使用时需要手动选定

再简化：MCP 会组成系统提示词，大语言模型根据系统提示词来精准执行函数生成更相关的回复

MCP 重点：提供强大的描述词 + 提供强大的处理函数，让大模型可以理解我们的特定组件信息然后生成更相关的代码

项目背景

在一个月前我了解了 MCP 协议相关知识后，开始思考作为前端有没有什么可以开发的功能，毕竟只有开始动手开发才算真正的入门，才会有后续更多的可能，于是开始去了解 MCP 资源站(mcp.so 最开始关注的时候 mcp.so 上仅有几百个服务，截止 2025-04-16 已经有 8888 了、smithery.ai、glama.ai)、知乎、Github，最终参照着一篇知乎文档结合 Trae 实现了一个桌面图片管理的 MCP desktop-image-manager-mcp

实现了一个包含基础 Tool 功能的 MCP 后开始想去体验更完整以及更贴合工作的能力，如：

  1. MCP 的 Prompt、Resource 是具体用法是怎么样的 - 官方文档看不出用法
  2. 能不能基于现有内容实现更加前端相关的 MCP

最终打算实现：一个 xx 组件信息查询的 MCP 服务，可以让大模型回答问题，上传 UI 稿或者需求后生成更相关的代码

方案思考

要点：过程简单一点，先实现再优化

核心思路

实现思路

实现思路

  1. 准备组件文档数据供 MCP Tools 使用
    1. 有哪些组件
    2. 组件的属性、例子、注意事项是什么
  2. MCP Tools 告诉大模型何时使用
  3. 大模型结合用户问题 + MCP Tools 返回提高回答的相关性

这样对组件库就有了一定的要求

组件库选型要求

  1. 组件库文档清晰、规范，每个组件都有完整的说明
  2. 最好是有中英文文档：英文文档通常效果更好
  3. 组件有大量高质量的例子说明
  4. 加分项
    1. 组件发布时间较早、社区活跃：大模型训练进去的数据效果更好
    2. 有很好的组件更新说明：可以告知升级到某个版本后可以使用相关功能/修复相关 BUG

基于以上要求选择合适的组件库进行 MCP 开发将会事半功倍，所以选了常用且广为人知的 Ant Design 组件库

技术方案

Github Repo: zhixiaoqiang/antd-components-mcp

架构设计

整体架构

整体架构

数据流转

数据流转

MCP Ant Design 组件服务采用模块化设计，主要包含以下核心模块：

组件文档数据提取

提取工具架构

开发提取数据的命令行工具从 Ant Design 仓库提取文档并保存到当前 npm 包目录，预提取后可以做到开箱即用，同时将提取脚本暴露出去，方便用户按照项目实际的版本进行文档提取

主要提取如下内容：

  1. 读取 components 目录生成可用组件列表
    1. 输出 JSON 格式
    2. 通过 vfile-matter 解析元信息：tag、description
  2. 读取 components/[component]/index.zh-CN.md 生成组件文档
    1. 输出 markdown 格式
  3. 提取 components/[component]/index.zh-CN.md 中的 API 模块生成组件API/属性文档
    1. 输出 markdown 格式
  4. 读取 components/[component]/demo/*.{md|tsx} 整合到一个组件示例代码文档
    1. 输出 markdown 格式
    2. 为什么要生成示例代码集而不是生成单独的示例代码？
      1. 使用者不确定有哪些例子大模型不容易精准识别特定例子
      2. 示例代码集可以提高大模型的容错率
  5. 执行 pnpm lint:changelog 生成组件级别的 changelog，提取位置：ant-design/.dumi/preset/components-changelog-cn.json
    1. JSON 格式

提取至少需要支持：Antd v4.x、Antd v5.x

提取优化

节省 token 消耗

通过在线的 opanai tokenizer 实时查看 token 数值

  1. 提取组件文档时过滤掉无用的内容，如：
    • 过滤无效组件
    • 移除 meta 信息
    • 移除多余的空行
    • 移除主题样式
    • 同时存在中英文文档时的英文文档
    • 移除其他的无用内容
  2. API 文档包含在文档中，过滤掉无用内容后差异不大，移除单独的 API 文档
  3. JSON 数据通过 JSON.stringify 压缩

Tools 设计

  1. Tool1：获取可用组件列表，包含：
    1. 组件名称
    2. 组件描述
    3. 组件可用版本
    4. 何时使用
  2. Tool2：获取组件详细文档，包含：
    1. 组件名称
    2. 组件描述
    3. 何时使用
    4. API 文档
    5. FAQ 3. Tool3：获取组件 API 文档，包含 1. API 文档
  3. Tool4：获取组件示例代码，包含
    1. 全量示例
  4. Tool5：获取组件的更新记录
    1. 组件的更新列表

MCP Tools 优化

优化 IO 执行

使用缓存，减少 IO 操作

缓存

节省 token 消耗

  1. Tools 描述缩减内容
  2. Tools 输出内容缩减内容，过滤不需要的数据
  3. 通过提供的 MCP Prompt，有效减少重复的工具调用

MCP Prompt 设计

  • system-description: 专业的 Ant Design 组件库专家助手，可有效减少重复性的工具调用
你是一个专业的 Ant Design 组件库应用专家助手，具有以下能力：
1. 可以查询所有可用组件列表
2. 能获取组件的详细文档、属性说明和API定义
3. 能提供组件的代码示例
4. 能查询组件的更新历史

使用规则：
- 严格遵循以下工具使用优先级：
  1. 首先检查当前对话上下文是否已包含所需信息
  2. 只有当上下文确实缺少必要信息时才调用工具
  3. 对于完全相同的组件查询参数，禁止重复调用工具
- 对专业术语保持准确，不自行编造组件属性
- 代码示例要完整可运行，并注明所需版本

PS：考虑到部分客户端不支持使用 prompt,可自行复制如上 prompt

实现特性

  • 🚀 已预处理数据，开箱即用(预处理版本为：Ant Design V5.24.7 2025/4/16)
    • 🔨 可以自行提取最新的/其他版本的组件文档
  • 🔗 列出所有可用的 Ant Design 组件
    • 📃 包含组件名称、描述、可用版本、何时使用当前组件信息
  • 📃 查看特定组件文档(已过滤无意义内容，对上下文友好)
  • 📃 查看特定组件属性和 API 定义
  • 📃 查看特定组件组件的代码示例
  • 📖 查看特定组件组件的更新日志
  • 💪 做了大量的缓存，有效缓解 IO 压力
  • ⚙️ 提供了预置的 prompt，有效减少重复的工具调用(对上下文优化)
    • 😺 测试下来 Claude 客户端可以使用
    • 😩 github copilot/Cline 插件暂时无法使用

最佳实践

在 Claude 桌面版中使用此 MCP 服务器

第一步：确定文档数据

当前包内维护的为 5.24.x 版本的文档数据，如果你使用的是 V5 版本的话直接前往第二步，如果你想使用其他版本的组件文档，需要自行提取组件文档

什么时候需要自行提取组件文档？

  1. 你想使用最新的组件文档
  2. 你想使用其他版本的组件文档

提取组件文档

# 克隆 Ant Design 仓库
git clone https://github.com/ant-design/ant-design.git --depth 1 --branch master --single-branch --filter=blob:none

# 在当前目录执行提取文档命令
npx @jzone-mcp/antd-components-mcp extract [ant design repo path]  #默认提取路径为 ./ant-design

第二步：配置 MCP

编辑 claude_desktop_config.json 配置文件：

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

配置文件位置：

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

以下是配置成功的示例：

ensure-tools-setup

第三步：添加 MCP 内置提示词

通过 Claude Desktop 添加 Prompt

Claude Desktop Setup Prompt

不支持 MCP Prompt 的客户端直接复制如下提示词：

你是一个专业的 Ant Design 组件库应用专家助手，具有以下能力：
1. 可以查询所有可用组件列表
2. 能获取组件的详细文档、属性说明和API定义
3. 能提供组件的代码示例
4. 能查询组件的更新历史

使用规则：
- 严格遵循以下工具使用优先级：
  1. 首先检查当前对话上下文是否已包含所需信息
  2. 只有当上下文确实缺少必要信息时才调用工具
  3. 对于完全相同的组件查询参数，禁止重复调用工具
- 对专业术语保持准确，不自行编造组件属性
- 代码示例要完整可运行，并注明所需版本

第四步：进行对话

Ant Design 有哪些可用组件？

上传图片示例后，使用 Ant Design 实现如图功能。

显示 Button 组件的文档。

Button 组件接受哪些属性？

显示 Button 组件的代码示例。

查看 Button 组件的基础用法。

查看 Button 组件的更新记录

未来规划

  • 实现监听 Ant Design 组件库的更新，自动进行数据提取发版
  • 考虑为工具调用添加上下文感知，如前文已获取，则返回："请使用前文获取的内容"
    • 通过 sessionId 处理
    • 客户端通常可以实现重新编辑对话，所以需要考虑当前情况
  • 添加详细的 mcp tools 例子文档
  • 考虑将提取的数据考虑放到 CDN 上，使用时实时获取
    • 实际上 npx 执行时会检测新版并安装新版本使用，目前可以保证数据实时性
  • 考虑支持通过传参调整 tool 的注册来改善上下文，或者通过自带的 disable/enable 开关来控制工具的注册
    • 目前部分 client 已支持手动开关单一工具：cline、github copilot等
  • 考虑兼容 Ant Design 4.x 版本或者其他 UI 库
    • 如 Ant Design X 等系列组件库

总结

由 DeepSeek-V3-0324 生成

通过开发 Ant Design 组件 MCP 服务，我们实现了以下核心价值：

  1. 精准组件知识获取：能够快速查询 Ant Design 组件的详细文档、API 定义和示例代码，解决了开发过程中频繁查阅文档的低效问题。

  2. AI 辅助开发提效：通过与 Claude 等 AI 客户端的集成，实现了：

    • 自然语言查询组件信息
    • 根据 UI 稿或需求生成相关代码
    • 获取组件更新历史等高级功能

  3. 技术方案创新：

    • 开发了自动化文档提取工具，支持多版本 Ant Design
    • 设计了高效的缓存机制减少 IO 操作
    • 优化了 token 使用，降低大模型调用成本

  4. 可扩展架构：模块化设计使得该方案可以轻松适配其他 UI 组件库，如 Ant Design 4.x 或其他流行框架。

实践价值

  • 对开发者：节省 50%以上的组件查阅时间，提高代码质量和一致性，可参照源码实现自己的组件库 MCP 服务
  • 对团队：建立标准化组件使用规范，降低新人学习成本
  • 对企业：可快速构建内部组件库的智能辅助系统

未来展望

随着 MCP 生态的成熟，我们可以进一步：

  • 实现组件变更的自动监控和更新
  • 增加更多上下文感知能力
  • 扩展支持更多 UI 框架和版本

这个项目不仅验证了 MCP 协议在前端领域的实用价值，也为构建领域特定的 AI 辅助工具提供了可复用的技术方案。开发者可以基于此思路，快速构建自己业务领域的智能辅助系统。