MDN MCP Server——Mozilla 把 Web 文档接进 AI Agent，从此 LLM 不再瞎编 API

让 Cursor 写一段用 CSS :has() 做表单校验高亮的代码，它一般会很流畅地告诉你"这个特性现代浏览器都支持了"。听上去没毛病------直到你打开 Firefox 一年前的稳定版，发现样式根本没生效。

让它写 AbortSignal.any([signalA, signalB]) 合并两个取消信号，它甚至会自信地补一句"从 Node 18 起原生支持"。事实是：Node 20.3 才进的，浏览器侧更晚，Safari 17.4 才补上。

LLM 不是不懂 Web API，它只是停在了训练数据截止的那一天，然后用看起来对的语气把后面的部分补完了。

这是 2026 年所有 AI 编程工具的同一个伤口。6 月 15 日，Mozilla 决定从源头给它缝一针------把整个 MDN 接进了 MCP 协议。

AI 写前端代码时最爱犯的三类错

在动手介绍工具之前，先把症状对清楚。下面三种，是日常用 Cursor / Claude Code 写代码时最容易踩到的：

第一类：浏览器兼容性张口就来。 CSS :has()、Container Query Units、view-transition-name、text-wrap: balance 这一批近两年才在各家浏览器陆续落地的特性，AI 经常给出过于乐观的兼容性结论，因为它的训练语料里这些特性"刚上路"，但你看到回答的时候，世界已经又往前走了半年。

第二类：新旧 API 张冠李戴。 把 XMLHttpRequest 写成 fetch 的 polyfill，把 AbortController 的用法套到根本不支持取消的旧接口上，或者把 Promise 风格的新 API 用 callback 形式调用。语法能跑，语义已经偏了。

第三类：浏览器之间的差异盲区。 在 Chrome 上验证过的代码默认就当成跨浏览器可用，Safari 的 quirk、Firefox 的差异、各家在 Service Worker / Storage / Permissions 上的实现分歧，AI 几乎从不主动提醒。

这三类错的共同点是：LLM 自己并不知道自己错了。它没法验证 caniuse 的最新状态，更没法分辨"我记忆里的 MDN 这一页"和"今天的 MDN 这一页"差了多少。

"文档没有变，是 LLM 与文档之间的距离变了。"

MDN MCP Server 是什么

一句话定义：Mozilla 把整个 MDN（文档 + 浏览器兼容性数据 BCD）做成了一个 MCP 协议的服务端，让 AI 编程客户端能实时拉取最新 Web API 文档。

官方端点就是一个 URL：

https://mcp.mdn.mozilla.net/

MCP（Model Context Protocol）是 Anthropic 牵头制定的协议，让 LLM 客户端能以标准方式调用外部工具和数据源。MDN MCP Server 把 MDN 站点的能力暴露成 MCP 工具------Cursor、Claude Code、VS Code 任何支持 MCP 的客户端连上去，就能让模型自己去查文档，而不是依赖训练时残留的那份过期记忆。

它具体能做三件事：

能力	说明	示例
全文搜索 MDN	关键词搜索文档索引	搜 view transitions，拿到所有相关页面
拉取完整文档 Markdown	单页面完整内容直接喂给模型	把 CSS :has() 整页读进上下文
查询 BCD 浏览器兼容性	精确到具体版本号	Container Query Units 在 Safari 17 起支持

第三项是这次最有意义的部分。BCD（Browser Compat Data）是 MDN 维护的一个独立结构化数据集，每个 Web API、CSS 属性、HTML 属性都标注了各家浏览器从哪个版本开始支持，是 caniuse 的上游数据源之一。过去 LLM 只能用它训练时"听说过"的版本号回答兼容性问题，现在能直接拉到今天的数据。

幻觉率不会一夜归零，但至少"兼容性"这一类、最难自查的错误，从口胡变成了可验证。

3 分钟接入

接入难度低到不像 2026 年的工具。

Claude Code 一行命令：

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

跑完之后重启 Claude Code，模型在写前端代码时就会自己决定要不要去查 MDN。你能在对话里直接看到它调用了 mdn.search 或 mdn.compat 这样的工具。

Cursor 配置（编辑 ~/.cursor/mcp.json）：

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

保存文件，重启 Cursor，在设置里的 MCP 面板能看到 mdn 已连接。之后 Composer 和 Chat 里的模型都能调用它。

VS Code（带 MCP 支持的版本同理） ：在 settings.json 里加同样结构的 mcpServers 节点即可。

接入完成后建议自己 prompt 一句简单的验证用例，比如让模型查"AbortSignal.any 在 Safari 上从哪个版本开始支持"。如果它调用了 MDN MCP 并返回准确版本号，说明链路通了；如果它还在凭印象答，那要么客户端没重启，要么模型没把这条工具加进规划。

一个容易忽略的隐私开关

实验阶段 Mozilla 会记录查询日志，用于评估 server 的真实用法。如果你不希望自己的 prompt 关键词被采样，可以在请求里加一个 HTTP 头：

X-Moz-1st-Party-Data-Opt-Out: 1

Claude Code 和 Cursor 目前都允许在 mcpServers 配置里加 headers 字段：

{
  "mcpServers": {
    "mdn": {
      "url": "https://mcp.mdn.mozilla.net/",
      "headers": {
        "X-Moz-1st-Party-Data-Opt-Out": "1"
      }
    }
  }
}

对个人开发者其实没那么敏感，但如果你在公司机器上接入、查询里可能带项目代号或内部 API 名，加一下这一行是稳妥的默认。

这件事真正的分量

很多人会把 MDN MCP 当成"又一个 MCP 工具"。但放在 2026 年 6 月这周的工具链事件里看，它的分量完全不一样。

这是 MDN 第一次主动适配 AI 编程时代------文档不再是"给人看的网页"，而是"给 AI 读的协议端点"。

过去十年的开发流程是：人去 MDN 查文档，记下来或开着标签页，再回到编辑器里写代码。Cursor 出现之后变成：人问 Cursor，Cursor 答。中间那一道"查 MDN"的人工动作消失了，模型用脑子里的旧版本 MDN 顶上------这就是幻觉的来源。

MDN MCP 把这一步重新接回链路里，只是接的对象从人换成了 AI。MDN 第一次以"机器读者"为一等公民设计接口，过去那种结构松散、依赖搜索引擎索引的文档形态，开始往结构化、可被工具协议直接调用的方向走。

把它和本周另外两件事放在一起更清楚：

• TypeScript 7 RC 把编译器从 TS 自举换成 Go，VS Code 全量类型检查从 77.8 秒到 7.5 秒
• React Compiler 用 Rust 重写并入 React 主干，1725 个测试全过，Meta 工程师公开承认大部分代码 AI 写
• Mozilla 把 MDN 接进 MCP，文档第一次面向 AI 输出

前端工具链的三个底盘------编译器、运行时、文档------都在 2026 年 6 月这一周换了。 这不是巧合，是同一个判断在三个团队同时落地：人写工具、人读文档的时代，不够用了。

对天天用 Cursor 写 Vue 和 Electron 的我们来说，前两件事还需要等版本稳定、等生态跟上；但第三件事，是本周就能装上、当天就能感觉到差别的。今晚回去配五分钟，明天早上写第一段涉及新 Web API 的代码，你会发现 Cursor 答得不一样了。

---

参考资料：

• Mozilla 官方公告：Introducing the MDN MCP Server
• MDN MCP Server 官方端点
• 山月《前端周刊 #50》收录
• Model Context Protocol 协议文档

---

本内容由AI辅助生成