Claude Media
Claude Code MDN MCPでWeb標準の仕様と互換性データを引かせる手順
Claude CodeMCPチュートリアル

Claude Code MDN MCPでWeb標準の仕様と互換性データを引かせる手順

MDN公式のMCPサーバーをClaude Codeに1行で追加し、仕様の検索・ドキュメント取得・ブラウザ互換データの参照を任せる手順です。権限設定とプライバシー上の注意もまとめます。

読了目安 約13分

MDN Web Docsは、HTML・CSS・JavaScript・Web APIの仕様を日々引くフロントエンド開発者にとって基本の参照先です。そのMDNが、検索・ドキュメント・ブラウザ互換データにアクセスするMCP(Model Context Protocol)サーバーを公開しています。Claude Codeには1行のコマンドで追加でき、認証情報も要りません。

狙いは、LLMの学習時点で止まった知識ではなく、MDNの最新ページをその場で根拠にさせることです。この記事では、追加の手順、3つのツールの使い分け、実装時の頼み方、権限設定、そして実験サービスであることに伴う注意点を順に説明します。

MDN MCPサーバーで何ができるか

MDN MCPサーバーは、MDNの検索、ドキュメント本文、ブラウザ互換データ(BCD)の3つを提供するリモートサーバーです。MDN側は、提供の目的を「LLMやコーディングエージェントに、Web標準の最新で信頼できる情報源を渡すこと」と説明しています。

サーバーが初期化時に返すツールは3つで、いずれも読み取り専用として宣言されています。

ツール入力返すもの
search入力query(検索語)返すもの関連しそうなドキュメントの要約。pathやcompat-keyが付くことがある
get-doc入力path(パスまたはURL)返すものMDNの1ページをMarkdownで返す
get-compat入力key(BCDのキー)返すもの主要ブラウザの対応バージョンをJSONで返す

3つとも注釈でreadOnlyHintが真、destructiveHintが偽になっています。ローカルのファイルを書き換えたり外部へ書き込んだりするツールではなく、MDNの公開情報を引くだけです。

他のドキュメント系MCPとの違いは、get-compatの存在です。ページ本文だけでなく「どのブラウザの何版から使えるか」を構造化データで引けるので、対応ブラウザの判断を学習済みの記憶に頼らずに済みます。

Claude Codeに追加する

追加するコマンドは、MDNのMCPページに載っているものがそのまま使えます。リモートのHTTPサーバーなので、--transport httpを指定します。

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

最後のmdnは、このサーバーにClaude Code側で付ける名前です。以降の権限ルールでもこの名前を使います。

スコープを指定しない場合の保存先は、Claude Codeの既定どおりローカルスコープ(そのプロジェクトで自分だけが使う設定)です。使い分けは次のとおりです。

スコープ読み込まれる範囲チームへの共有保存先
local(既定)読み込まれる範囲現在のプロジェクトチームへの共有しない保存先~/.claude.json
project読み込まれる範囲現在のプロジェクトチームへの共有する(バージョン管理経由)保存先プロジェクト直下の.mcp.json
user読み込まれる範囲自分の全プロジェクトチームへの共有しない保存先~/.claude.json

フロントエンドのチーム全員で同じ参照先を使うなら、--scope projectを付けます。認証が要らないので、.mcp.jsonにコミットしても漏れる秘密情報はありません。

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

.mcp.jsonに生成される内容は、例えば次のような形になります(スコープ別の保存形式に沿った例示です)。

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

projectスコープのサーバーは、対話セッションで最初に使うときに承認を求められます。承認の記録を消したいときはclaude mcp reset-project-choicesを使います。

接続できたかを確かめる

追加後は、まず接続状態を見ます。

claude mcp get mdn
claude mcp list

claude mcp listは各サーバーの横に✔ Connectedなどの状態を出します。セッション内では/mcpでも同じ状態と、サーバーが持つツールの数を見られます。失敗時は✘ Failed to connectに続けて、HTTPステータスなどの原因が表示されます。

検索から互換性確認までの流れ

3つのツールには依存関係があります。サーバーの初期化時の説明では、次の順で使うよう指示されています。

手順

MDN MCPのツールを使う順序

  1. 1

    searchで候補を探す

    関連ページの要約が返ります。ここで得たpathと、あればcompat-keyを次の段で使います。

  2. 2

    get-docで本文を読む

    searchの結果のpathを渡すと、そのページ全体がMarkdownで取れます。APIシグネチャやコード例が必要なときの段です。

  3. 3

    get-compatで対応ブラウザを調べる

    searchかget-docから得たcompat-keyを渡します。キーを推測で組み立ててはいけない、とサーバー側の説明に明記されています。

クエリの作り方にも指示があります。ユーザーの質問をそのまま渡さず、fetchやflexboxのようなWeb技術のキーワードに言い直して検索すること。互換性を知りたいときも、「browser compatibility」という語は入れず、機能名だけで検索すること。この2点は、Claudeに依頼する側が意識しておくと結果が安定します。

依頼文の例

次のような依頼が、このサーバーの得意な範囲です。

  • 「structuredCloneはSafariのどの版から使えるか、MDN MCPで調べて」
  • 「:has()セレクターの構文と注意点をMDNから取得して、今のCSSに当てはめて」
  • 「IntersectionObserverのオプション一覧をMDNの本文で確認してから実装して」

サーバー名を明示すると、Claudeは学習済みの知識で答えずにツールを呼びやすくなります。

フロント実装に組み込む

追加しただけでは、Claudeは自分の判断で使うかどうかを決めます。仕様の確認を毎回の習慣にしたいなら、プロジェクトのCLAUDE.mdに方針を書いておくのが確実です。次はその断片の例です(運用の一例で、公式が定めた書式ではありません)。

## Web標準の確認ルール
- 新しいWeb API・CSS機能を使う前に、MDN MCP(mdn)の search → get-doc で仕様を確認する
- 対応ブラウザが問われる場面では get-compat の結果を根拠にし、記憶で答えない
- 回答には参照したMDNのURLを添える

最後の1行は、サーバー側の説明にある「MDNへのリンクを示して案内する」という方針とも合います。出力に参照URLが付けば、人間のレビューでも裏取りが速くなります。

互換性を確認させる実用パターン

使いどころは、実装前と実装後の2か所です。

  • 実装前: 使いたい機能のcompat-keyを引き、プロジェクトの対応ブラウザ方針(Browserslistの設定など)と照らして採否を決める
  • 実装後: 書いたコードが使っているAPIを列挙させ、それぞれget-compatでサポート状況を確認させる

後者は、レビューの観点を「このAPI、古いSafariで動くか」に絞れる点が便利です。結果は表にまとめさせると読みやすくなります。

権限を事前に許可する

MCPツールの呼び出しは、既定では実行のたびに確認を求められます。MDN MCPは読み取り専用なので、サーバー単位で許可しても危険は小さい部類です。許可ルールはmcp__<サーバー名>__*の形で書けます。

{
  "permissions": {
    "allow": ["mcp__mdn__*"]
  }
}

mcp__mdnのようにサーバー名だけを書く形でも、そのサーバーの全ツールに一致します。ツール名を1つずつ書く形もあります。ワイルドカードを許可ルールで使えるのは、mcp__<サーバー名>__というリテラルの接頭辞が付いた場合だけです。mcp__*のような接頭辞のない許可は無視されます。

権限ルール全般の設計は、/permissionsコマンドの解説にまとめています。

プライバシーと提供条件の注意点

MDN MCPには、他のサーバーにはあまりない注意書きがあります。ここは導入前に読んでおく価値があります。

押さえておきたい点は4つです。

  1. クエリが保存される: searchに渡す語は、MDN側に記録されうる前提で扱います。社外秘の機能名や顧客名を検索語に含めないよう、CLAUDE.mdで禁じておく手があります
  2. 第一者の分析はオプトアウトできる: リクエストにX-Moz-1st-Party-Data-Opt-Out: 1ヘッダーを付けると、第一者分析から外れます
  3. 利用規約に従う: 利用にはMozillaの許容利用ポリシー(Acceptable Use Policy)への同意が前提です
  4. 撤回される可能性がある: 実験のため、サーバーはいつでも提供を終了されうるとされています

オプトアウトヘッダーを付けて追加する場合は、claude mcp addの--header(短縮形-H)を使います。次は、公式の追加コマンドとClaude Codeのヘッダー指定を組み合わせた例です。

claude mcp add --transport http mdn https://mcp.mdn.mozilla.net/ \
  --header "X-Moz-1st-Party-Data-Opt-Out: 1"

撤回の可能性があるため、このサーバーだけに仕様確認の運用を依存させないほうが安全です。止まった場合は、MDN本体のページをWebFetchで取得させる、といった代替手段を手元に残しておけます。

ローカルで動かす場合

リポジトリのREADMEには、サーバーを手元で動かす手順も書かれています。依存関係をインストールして起動し、ローカルのURLを同じ要領で追加する形です。

npm install
npm start
claude mcp add --transport http mdn-local http://localhost:3002/

READMEは、開発用にnpm run devでMCPインスペクターを開く手順も案内しています。通常の利用ならリモート版で足りるので、ローカル版は仕様を調べる目的よりも、サーバー自体への貢献やクエリが外へ出ない環境が必要なときの選択肢になります。リポジトリへの要望や不具合は、MDNのDiscordまたはGitHubのissueで受け付けています。

導入後のつまずきを切り分ける

追加したのにMDNを引いてくれないときは、次の順に見ます。

  • /mcpでmdnが接続済みか。Pending approvalなら、claudeを対話で起動して承認する(projectスコープの場合)
  • 依頼文にサーバー名や「MDNで確認して」を入れているか。入れないと、Claudeは記憶で答えることがある
  • 検索語がWeb技術のキーワードになっているか。長い自然文よりfetchのような短い語のほうが、サーバー側の指示にも合う
  • 互換性を聞くとき、compat-keyをsearchから得ているか。推測のキーは通らない

接続自体が失敗するときは、claude mcp get mdnのIssue:行にHTTPステータスなどが出ます。MCPの追加・スコープ・接続状態の見方を体系的に確認したいときは、Claude Code MCP設定ガイドが役立ちます。

似た認証不要サーバーとの比較

読み取り専用で認証不要のドキュメント系サーバーは他にもあります。たとえばTwilio MCPサーバーは、特定ベンダーのAPI仕様を引く用途です。MDN MCPは、ベンダーを問わないWeb標準側の仕様とブラウザ互換性を引く用途で、守備範囲が重なりません。

一方、任意のWebページを取り込む用途なら、Firecrawl MCPのようなスクレイピング系が向きます。MDNに載っている内容はget-docで整形済みのMarkdownとして取れるため、わざわざスクレイピングする必要はありません。

まとめ

MDN MCPは、claude mcp add --transport http mdn https://mcp.mdn.mozilla.net/の1行で入る、読み取り専用の3ツール構成です。実装前にsearch→get-docで仕様を、get-compatで対応ブラウザを引く運用にすると、Web標準まわりの記憶違いを減らせます。

導入時に決めておきたいのは3点です。チームで使うなら--scope projectにするか。権限はmcp__mdn__*で許可するか。そして、検索語にクエリが保存される実験サービスであることを踏まえ、機密語を含めない運用にするか、オプトアウトヘッダーを付けるか。提供が終了しうる前提で、仕様確認の代替手段も1つ決めておくと安心です。全体像はClaude Codeの全体像から追えます。

この記事を共有:XはてブLinkedIn

関連する記事

Claude Code をもっと見る →