2026/06/16隨筆1 閱讀

用 MDN MCP 為 AI 接上「正版即時前端文件」

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 裡（沒有就自己建一個物件）：

jsonc

{
  "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 管理命令。

確保本地已經安裝 claude CLI。
執行：

bash

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

這條命令會在本機 MCP 設定裡註冊一個名為 mdn 的 HTTP server，指向 MDN MCP。

用下面命令確認是否新增成功：

bash

claude mcp list

之後在 claude code 的對話裡，直接用中文提示它「透過 MDN 工具查一下 xxx」即可，它會在後台調用 MDN MCP 並把結果融到回答裡。

幾個中文 Prompt 範例（以 Chrome 為例）

你可以直接在 Cursor / Claude 裡抄這些句子用：

查詢新 CSS 功能

「請使用 MDN MCP server，說明 light-dark() CSS 函數的作用，並給出一段在支援淺色/深色模式的頁面中使用它的範例程式碼，重點說明在 Chrome 中如何配合 color-scheme。」

查瀏覽器相容性

「透過 MDN 工具查詢 Web Serial API 在 Chrome、Edge 和 Safari 中的支援情況，並總結在 Chrome 中使用 Web Serial 時的安全注意事項。」

決策是否上生產

「用 MDN MCP 檢查 light-dark() 和 @view-transition 在最新 Chrome 中的支援情況，並給出一個適合生產環境的降級策略建議。」

只要用戶端正確接了 MDN MCP，這些問題的回答都會明顯更「像是剛查過文檔的人」。

結語

MDN MCP 的意義不在於「又多了一個炫技的接入點」，而是把前端開發最常用的那一套官方文檔，真正接到了 AI 開發流裡。

如果你已經在重度使用 Cursor / Claude 寫前端，這個改動的成本基本就是「加一行 URL + 重啟」，但長期收益是：少查幾次文檔，少踩幾個相容性坑。

分享這篇文章。

𝕏X r/Reddit fFacebook @Threads inLinkedIn