HeyBinyang

用 MDN MCP 给 AI 接上“正版实时前端文档”

·随笔·visibility10 阅读 ·AI·MCP

最近 MDN 官方发布了自己的 MDN MCP Server，可以把 MDN 文档和浏览器兼容性数据直接接到各种 AI 工具里，让 Agent 查文档、看兼容性时不再瞎猜。

MDN MCP 是什么？

简单理解：给 AI 接了一条直连 MDN 的数据通道。

  • 服务端地址：https://mcp.mdn.mozilla.net/。

  • 能力包括：

  • 搜索 MDN 文档（CSS、JS、Web API…）

  • 取某个页面的详细内容（说明、示例、注意事项等）

  • 查询浏览器兼容性数据（BCD），返回各主流浏览器的支持情况。

底层协议是 Anthropic 提出的 MCP（Model Context Protocol），用来把外部工具和数据源统一暴露给 LLM / Agent。

为什么前端开发值得接一下？

如果你经常写浏览器端代码，AI 很容易在这些地方翻车：

  • 新特性认知过期：例如 light-dark()、Prompt API、Web Serial、HTML-in-Canvas 等，模型训练时可能还没完全落地。

  • 兼容性胡编：经常出现「现代浏览器都支持」「Safari 不支持」这类模糊甚至错误结论。

接上 MDN MCP 后，差异主要体现在两点：

  • 用法解释会明显贴近 最新 MDN 文档，包括注意事项、示例、规范链接。

  • 对 Chrome / Firefox / Safari 等浏览器的 支持矩阵 会更准确，甚至能说出从哪个版本开始支持。

换句话说：它不是让 AI 变“更聪明”，而是把 知识源从静态语料 换成了 实时 MDN。

在 Cursor 中接入 MDN MCP

Cursor 通过一个 JSON 文件管理 MCP servers。

1. 配置文件位置

  • 全局：~/.cursor/mcp.json

  • 项目级：项目根目录下的 .cursor/mcp.json。

任选一个位置即可。不存在就自己新建。

2. 最小可用配置

把下面这段加到 mcpServers 里（没有就自己建一个对象）：

{
  "mcpServers": {
    "mdn": {
      "url": "https://mcp.mdn.mozilla.net/"
    }
  }
}

注意两个点：

  • Cursor 只认 url（远程 HTTP server），不要用 transport / uri 这种通用 MCP 字段，否则会报「Server must have either a command or url」的错。

  • 如果已经有别的 server，只需要在同一个 mcpServers 里多加一个 mdn 键即可。

保存后重启 Cursor，或通过 Command Palette 执行一次「Reload Window」，就能在 MCP/Tools 面板里看到 mdn 了。

在 Claude Code 中接入 MDN MCP

Claude Code CLI 自带 MCP 管理命令。

  1. 确保本地已经安装 claude CLI。

  2. 执行：

claude mcp add --transport http mdn https://mcp.mdn.mozilla.net/

这条命令会在本地 MCP 配置里注册一个名为 mdn 的 HTTP server，指向 MDN MCP。

  1. 用下面命令确认是否添加成功：

claude mcp list

之后在 claude code 的对话里，直接用中文提示它「通过 MDN 工具查一下 xxx」即可，它会在后台调用 MDN MCP 并把结果融到回答里。

几个中文 Prompt 示例（以 Chrome 为例）

你可以直接在 Cursor / Claude 里抄这些句子用：

  1. 查询新 CSS 功能

「请使用 MDN MCP server，说明 light-dark() CSS 函数的作用，并给出一段在支持浅色/深色模式的页面中使用它的示例代码，重点说明在 Chrome 中如何配合 color-scheme。」

  1. 查浏览器兼容性

「通过 MDN 工具查询 Web Serial API 在 Chrome、Edge 和 Safari 中的支持情况，并总结在 Chrome 中使用 Web Serial 时的安全注意事项。」

  1. 决策是否上生产

「用 MDN MCP 检查 light-dark() 和 @view-transition 在最新 Chrome 中的支持情况，并给出一个适合生产环境的降级策略建议。」

只要客户端正确接了 MDN MCP，这些问题的回答都会明显更“像是刚查过文档的人”。

结语

MDN MCP 的意义不在于“又多了一个炫技的接入点”，而是把前端开发最常用的那一套官方文档，真正接到了 AI 开发流里。

如果你已经在重度使用 Cursor / Claude 写前端，这个改动的成本基本就是「加一行 URL + 重启」，但长期收益是：少查几次文档，少踩几个兼容性坑。

分享

XRedditFacebookInstagramLinkedIn