MDN 文档也有 MCP 服务器了,支持最新文档和浏览器兼容数据-夜雨聆风

MDN 文档也有 MCP 服务器了,支持最新文档和浏览器兼容数据

👇 今日要闻

打破信息壁垒，走近全球前端。Hello 大家好，我是林语冰。

MCP 全称“模型上下文协议“，是一个 AI 时代诞生的类似 HTTP 的开放标准，通过 MCP 服务器可以让大模型和 AI 工具访问到外部数据源。

MCP 刚诞生的时候火爆 AI 圈，后来 Skills 诞生，两者平分秋色，都成为 AI 编程中工程化架构的重要环节。

现在，MDN 文档官宣，正式上线 MDN 官方的 MCP 服务器！

MDN 文档是所有 Web 开发者最重要的参考资源，MDN 官方出品的 MCP 服务器能使用 MCP 协议，将最新文档和浏览器兼容性等数据集投喂给 AI Agent 代理。

本期一起来看看 MDN 全新上线的 MCP 服务器如何使用，有何作用。

MDN MCP 服务器提供了最新文档和浏览器兼容性等数据的服务，目的是为大模型和 AI 代理提供可靠和最新的 Web 开发文档。

这样，开发者和 AI 代理都能参考准确的信息，而不是大模型在训练时采用的可能已过时的数据。

举个栗子，大模型或 AI 代理可能不知道 light-dark() 等 CSS 新函数是否存在，也不确定该功能处于新晋基线还是泛用基线，是否在各个浏览器中良好支持。

总之，MDN MCP 服务器能让 AI 代理访问准确的、最新的 Web 平台信息，无需离开常用的工具即可轻松访问可靠的文档。

MDN MCP 服务器能与任何兼容 MCP 协议的客户端一起使用，包括：

其中，Trae 等 AI 编辑器本身就支持直接集成 MCP 服务器，而 VSCode 等传统编辑器需要使用相关的扩展插件配置，也可以在 VSCode 中使用 Agent CLI。

MDN MCP 服务器的配置和普通的 MCP 服务器大抵相同，可以使用远程服务器和本地服务器。

举个栗子，在 Claude Code 中使用 MDN MCP 远程服务器：

不同的 Agent 编程代理的命令大同小异，通过对应命令把远程服务器添加到你想要使用的 Agent CLI 即可。

另一个使用 MDN MCP 服务器的方式是本地集成，在 MDN MCP 的 GitHub 官方仓库获取源码，然后在本地运行服务器：

MDN MCP 本地服务器启动后，将其集成到指定的 Agent CLI 中使用，类似于远程服务器：

远程服务器和本地服务器可以根据你的网络环境进行取舍，一般本地会更快、更稳定，但会占用一定的硬件资源。

MDN MCP 服务器目前是一个 实验性原型，MDN 团队也对其进行了对照实验，来比较启用或禁用 MCP 服务器的实际效果。

以 Claude Code Opus 4.7 这个大语言模型为例，它们对分别对启用和禁用 MCP 服务器的不同场景测试，主要是访问浏览器近期发布的新型技术，拷问大模型这些新技术的基本用法和浏览器兼容性。

举个栗子：

实测结果表明，对于付费版的新款大模型，Claude Code 的回答基本一致，但使用了 MDN MCP 服务器的答案结构更清晰、内容更完整。

比如问题中没提及 light-dark() 函数支持线性渐变功能，启用 MCP 服务器的答案会额外提供使用了线性渐变的 light-dark() 示例。

对于旧版大模型，MCP 服务器的对比作用应该更加明显。而且，对于浏览器兼容性的问题，使用 MDN MCP 的回答也更优质可靠。

禁用 MCP 的 Claude Code 声称 Chrome 120 支持声明式的 shadowrootslotassignment 属性，这可能和其他功能混淆了，产生了经典的 AI 幻觉，一本正经地胡说八道。

启用 MCP 之后，Claude Code 的回答更完整，甚至还会做成完整的表格，列出不同浏览器的兼容性对照表。

MDN 团队正式上线 MDN MCP 官方服务器，它允许 AI 工具利用基于 MCP 协议的服务器，连接到 MDN 官方的数据源，访问 MDN 的最新文档和浏览器兼容性等数据，进一步集成到 Agent CLI 或 VSCode 等 IDE 中。

这能避免 AI 大语言模型使用过时的 MDN 文档，或者无法正确识别新技术，导致在生成代码时产生混淆视听的“幻觉“，也能更好地生成可靠优质的答案。

👍 以上就是本期《前端日报》的全部内容了，如果读完对你有所帮助，可以按赞打卡、在看推荐或转发分享。

🙏 已经关注我的粉丝们，我们下期再见啦，掰掰~~

👇 参考文献：

🔗 MDN MCP 官方文档：

https://developer.mozilla.org/en-US/mcp
🔗 MDN MCP 官方博客：

https://developer.mozilla.org/en-US/blog/introducing-mdn-mcp-server
🔗 MDN MCP 官方仓库：

https://github.com/mdn/mcp