介绍 MDN MCP 服务器

# 介绍 MDN MCP 服务器 | MDN 博客 来源：https://developer.mozilla.org/zh-CN/blog/introducing-mdn-mcp-server/ 我们很高兴宣布发布MDN MCP 服务器(https://developer.mozilla.org/zh-CN/mcp)。 MCP（模型上下文协议）(https://modelcontextprotocol.io/docs/learn/server-concepts) 是一种开放标准，使 AI 工具能够连接到外部数据源。MDN MCP 服务器利用此协议，将 MDN 的文档和浏览器兼容性数据直接引入你的 AI 代理或IDE(https://developer.mozilla.org/zh-CN/docs/Glossary/IDE) 中。 ## 为什么我们构建了 MDN MCP (https://developer.mozilla.org/zh-CN/blog/introducing-mdn-mcp-server/#why_we_built_the_mdn_mcp) 越来越多的 AI 工具正被集成到 Web 开发工作流程中，但它们可能会基于其训练数据和知识截止日期而提供过时的 Web 平台信息。例如，LLM 或编码代理可能不知道像`@view\-transition` CSS at-rule(https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/At-rules/@view-transition) 这样的特性存在，或者它是否已达到"广泛可用"的基线状态(https://developer.mozilla.org/zh-CN/docs/Glossary/Baseline/Compatibility#baseline_badges) 并且可以安全地在各浏览器中使用。MDN MCP 为你的编码代理提供准确、最新的 Web 平台信息。它还使你无需离开偏好的工具即可轻松访问最新的文档。 该服务器目前处于实验阶段。请参阅我们的隐私声明(https://developer.mozilla.org/zh-CN/mcp#privacy_and_data_retention) 了解此阶段的数据处理详情。 ## 如何使用 MDN MCP (https://developer.mozilla.org/zh-CN/blog/introducing-mdn-mcp-server/#how_to_use_the_mdn_mcp) MDN MCP 服务器可与任何兼容 MCP 的客户端配合使用，包括： - **编辑器**：VS Code(https://code.visualstudio.com/docs/copilot/chat/mcp-servers)、Zed(https://zed.dev/docs/ai/mcp) 和Cursor(https://docs.cursor.com/context/mcp)。 - **代理 CLI**：Claude Code(https://docs.claude.com/en/docs/claude-code/mcp)、Codex CLI(https://developers.openai.com/codex/mcp) 和Antigravity CLI(https://antigravity.google/docs/mcp)（原 Gemini CLI）。 - **聊天应用**：Claude Desktop(https://support.claude.com/en/articles/11176164-use-connectors-to-extend-claude-s-capabilities)。 请参阅此列表中的链接，了解如何为每个工具设置 MCP。有关安装说明和其他详细信息，请查看我们的MDN MCP 服务器(https://developer.mozilla.org/zh-CN/mcp) 页面。 作为一个快速示例，要在 Claude Code 中使用它，你可以运行以下命令： `` claude mcp add --transport http mdn https://mcp.mdn.mozilla.net/ `` 我们期待看到你如何将其集成到你的 Web 开发工作流程中，以及你发现它最有用的场景。 ## MCP 带来了什么不同？ (https://developer.mozilla.org/zh-CN/blog/introducing-mdn-mcp-server/#what_difference_does_the_mcp_make) 鉴于 LLM 的非确定性以及可用模型的多样性，比较它们在启用或不启用某些技能、提示、工具和 MCP 时的行为通常很有挑战性。我们针对最近在Firefox 151(https://developer.mozilla.org/zh-CN/docs/Mozilla/Firefox/Releases/151) 中发布的一些功能，测试了有无 MDN MCP 的 Claude Code Opus 4.7，询问如何使用这些功能以及浏览器支持情况。具体来说： 1. 如何使用`light\-dark\(\)` CSS 函数处理图片，以及哪些浏览器支持它？ 2. 如何使用`:buffering` CSS 伪类，以及哪些浏览器支持它？ 3. 如何使用`<template>`上的`shadowrootslotassignment`属性，以及哪些浏览器支持它？ 4. 如何使用 Web Serial API，以及哪些浏览器支持它？ 我们注意到了结果中的某些模式。在大多数情况下，无论是否启用 MDN MCP，Claude Code 的使用说明都相当。有些使用 MCP 的答案结构更好、更完整。例如，关于`light\-dark\(\)` CSS 函数(https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Values/color_value/light-dark) 的说明还包括了线性渐变示例，这些问题并未直接提及，但同样受支持。 在浏览器支持信息方面，优劣很明显：MDN MCP 产生了更好、更可靠的结果。未使用 MCP 的 Claude Code 仅在一种情况下正确提供了浏览器支持：即针对`:buffering`(https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference/Selectors/:buffering) 伪类。 例如，未使用 MCP 的 Claude Code 坚称声明式`shadowrootslotassignment`(https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/template#shadowrootslotassignment) 属性受到 Chrome 120 和 Safari 18.3 的支持，这可能将其与`Element.attachShadow()`的`slotAssignment`(https://developer.mozilla.org/zh-CN/docs/Web/API/Element/attachShadow#slotassignment) 选项混淆了。但实际上，Firefox 151 是第一个对该属性提供支持(https://developer.mozilla.org/zh-CN/docs/Mozilla/Firefox/Releases/151#html) 的浏览器。 没有 MCP 时，Claude Code 也未能提供关于在`light\-dark\(\)`函数中使用图片的具体浏览器支持信息："支持不如颜色变体那样一致"，而使用 MCP 时，它提供了完整的表格，列出了 Firefox 150 和 Chrome（需启用标志）作为支持的浏览器。 未使用 MCP 的 Claude Code 表现最差的是 Web Serial API 问题。Firefox 151 于 2026 年 5月提供了 Web Serial API 的支持(https://hacks.mozilla.org/2026/05/web-serial-support-in-firefox/)。然而，未使用 MCP 的 Claude Code 虽然正确提到了基于 Chromium 的浏览器支持此功能，但也坚称在 Firefox 中： > 未实现（且不在路线图中——参见 Mozilla 的标准立场："有害"） 启用 MCP 后，Claude Code 正确识别了 Firefox 151 提供 Web Serial API 支持，与发行说明(https://developer.mozilla.org/zh-CN/docs/Mozilla/Firefox/Releases/151) 一致。 此外，我们注意到在我们的测试中，使用 MDN MCP 的响应速度大约快了一倍。没有 MCP 时，Claude Code 必须获取并解析大量 HTML 页面以查找最新信息，这需要一些时间，但即便如此仍未能提供准确结果。 ## 参与进来 (https://developer.mozilla.org/zh-CN/blog/introducing-mdn-mcp-server/#get_involved) 你的反馈帮助我们改进。如果你遇到问题、有意见或建议，或者想分享你如何使用 MDN MCP，我们期待你的反馈。请随时来我们的 Discord 中platform 频道(https://discord.com/channels/1009925603572600863/1170042997212184576) 与我们交流。如果你发现任何问题，请在mdn/mcp GitHub 仓库(https://github.com/mdn/mcp/issues) 中提出。 ## 接下来做什么 (https://developer.mozilla.org/zh-CN/blog/introducing-mdn-mcp-server/#whats_next) 随着 AI 工具在 Web 开发工作流程中扮演更重要的角色，我们致力于确保 MDN 的文档在你需要的地方可用。此次发布是朝着这一目标迈出的一步，我们期待根据你的反馈继续改进体验。