<p data-line="0" class="code-line">Model Context Protocol（MCP）、最近流行っていますね。割と簡単に作れることが売りのようです。</p>
<p data-line="2" class="code-line">というわけで私も勉強がてら、Web Platform APIからBaselineの状況を提供するMCPサーバーを作成し、OSSとして公開しました。</p>
<p data-line="4" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__67ef7ca6b2774" src="https://embed.zenn.studio/card#zenn-embedded__67ef7ca6b2774" data-content="https%3A%2F%2Fjsr.io%2F%40yamanoku%2Fbaseline-mcp-server" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://jsr.io/@yamanoku/baseline-mcp-server" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://jsr.io/@yamanoku/baseline-mcp-server</a></p>
<p data-line="6" class="code-line">使い方の詳細や実装内容については、下記にあるGitHubリポジトリを参照してください。READMEに設定方法やコードの説明を記載しています。</p>
<p data-line="8" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__6b3e51693059d" src="https://embed.zenn.studio/card#zenn-embedded__6b3e51693059d" data-content="https%3A%2F%2Fgithub.com%2Fyamanoku%2Fbaseline-mcp-server" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/yamanoku/baseline-mcp-server" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/yamanoku/baseline-mcp-server</a></p>
<h2 id="baseline-mcp-server%E3%81%A8%E3%81%AF%E4%BD%95%E3%81%8B" data-line="10" class="code-line">
<a class="header-anchor-link" href="#baseline-mcp-server%E3%81%A8%E3%81%AF%E4%BD%95%E3%81%8B" aria-hidden="true"></a> Baseline MCP Serverとは何か</h2>
<p data-line="12" class="code-line"><br>
<img src="https://res.cloudinary.com/zenn/image/fetch/s--4blAdRss--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/1642e0b88f1bd9de48a2fb9f.png%3Fsha%3D2a5d4537776c86bf9ad97c2bc948807e28a556ec" alt="Baseline MCP Serverのロゴ" width="350" loading="lazy" class="md-img"><br>
</p>
<p data-line="16" class="code-line">Baseline MCP Serverは、<a href="https://webstatus.dev/" target="_blank" rel="nofollow noopener noreferrer">Web Platform Dashboard</a>のAPIを利用して、WebのAPI機能のBaselineステータス（ブラウザ対応状況）を取得できるMCPサーバーです。Claude DesktopやCline、VSCodeなどでMCPクライアントを通じてWeb機能のBaseline情報へアクセスできるようになります。</p>
<p data-line="18" class="code-line">Baselineについての詳細は「<a href="https://developer.mozilla.org/ja/docs/Glossary/Baseline/Compatibility" target="_blank" rel="nofollow noopener noreferrer">Baseline (互換性) - MDN Web Docs 用語集</a>」を参照してください。</p>
<p data-line="20" class="code-line">例えば、「<code>&lt;dialog&gt;</code> 要素はどのブラウザでサポートされているの？」といった質問に対して、LLmがBaseline MCP Serverを通じて最新の対応状況を取得し、より正確に回答できるようになります。</p>
<p data-line="22" class="code-line"><img src="https://res.cloudinary.com/zenn/image/fetch/s--M4nrYZcz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/8bb63870abb04cdc4c092cec.png%3Fsha%3Da767940d0e19b04f64acc2e1d54e9cdcde5f18fe" alt="Claude Desktop上でdetails要素にまつわるBaseline情報を質問してMCPサーバーを経由してその結果が反映されている。" loading="lazy" class="md-img"></p>
<h2 id="%E3%81%AA%E3%81%9Cbaseline-mcp-server%E3%82%92%E9%96%8B%E7%99%BA%E3%81%97%E3%81%9F%E3%81%AE%E3%81%8B" data-line="24" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AA%E3%81%9Cbaseline-mcp-server%E3%82%92%E9%96%8B%E7%99%BA%E3%81%97%E3%81%9F%E3%81%AE%E3%81%8B" aria-hidden="true"></a> なぜBaseline MCP Serverを開発したのか</h2>
<p data-line="26" class="code-line">LLMモデルは知識カットオフなどの制約があるため、コンテキストを都度提供しないと最新のブラウザ対応状況を把握できないという課題がありました。この問題を解決するために、リアルタイムでWeb Platform APIの対応状況を取得できるMCPサーバーが作れないかと思い、開発に着手しました。</p>
<p data-line="28" class="code-line">また、フロントエンド開発において、MCPクライアントと連携したワークフローの効率化も目指していました。この機能はBaselineではどのステータスだったのか？ということをいちいちMDNやCan I Useなどから確認する手間を省き、AIエージェントにBaselineに関する使い方を把握してもらい命令させることで開発の生産性向上に貢献したいと考えています。</p>
<h2 id="%E3%81%AA%E3%81%9Cdeno%E3%81%8B%E3%82%89%E5%8B%95%E4%BD%9C%E3%81%99%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%81%AE%E3%81%8B" data-line="30" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AA%E3%81%9Cdeno%E3%81%8B%E3%82%89%E5%8B%95%E4%BD%9C%E3%81%99%E3%82%8B%E3%82%88%E3%81%86%E3%81%AB%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%81%AE%E3%81%8B" aria-hidden="true"></a> なぜDenoから動作するようにしているのか</h2>
<p data-line="32" class="code-line">Baseline MCP ServerではランタイムとしてDenoをサポートしています。記事執筆時点ではNode.jsやBunでのサポートはありませんが、この選択にはセキュリティ上の理由があります。</p>
<p data-line="34" class="code-line">MCPサーバーは本質的に外部からの入力を処理し、外部APIと通信するため、セキュリティリスクが存在します。Denoはデフォルトで安全なパーミッションモデルを採用しており、明示的に許可されたネットワークドメインにのみアクセスできるような制限が可能です。</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="36">deno run --allow-net<span class="token operator">=</span>api.webstatus.dev jsr:@yamanoku/baseline-mcp-server
</code></pre></div><p data-line="40" class="code-line">このように特定のドメイン（<code>api.webstatus.dev</code>）へのアクセスのみを許可することで、MCPサーバーが意図しないネットワーク通信をしてしまうリスクを大幅に低減させます。</p>
<p data-line="42" class="code-line">対照的に、最近公開されている多くのMCPサーバーは以下のような方法で実行されています。</p>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash code-line" data-line="44">npx <span class="token parameter variable">-y</span> @organization/some-mcp-server
</code></pre></div><p data-line="48" class="code-line">この <code>npx -y</code> アプローチには、パッケージのインストールと実行を無条件に許可するため、潜在的なセキュリティリスクがあります。公式ではない野良のMCPサーバーを無意識的に使ってしまうことで、ユーザーが知らないうちに悪意のあるコードを実行してしまいかねません。</p>
<p data-line="50" class="code-line">MCPサーバーのセキュリティリスクについて詳しく知りたい方は、<a href="https://findy-code.io/media/articles/modoku20250404-yusuktan" target="_blank" rel="nofollow noopener noreferrer">MCPことはじめ / MCPサーバーのセキュリティリスク</a>、<a href="https://blog.lai.so/crashing-mcp-server/" target="_blank" rel="nofollow noopener noreferrer">MCPサーバーを安全に動かすための工夫</a>という記事を参照することをお勧めします。Baseline MCP Serverでは、これらのリスクを念頭に置いて、より安全に使用もらうことを推奨しています。</p>
<p data-line="52" class="code-line">また、Docker環境がある場合は以下、Dockerfileから使うこともできます。</p>
<p data-line="54" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__da5059ad02e42" src="https://embed.zenn.studio/github#zenn-embedded__da5059ad02e42" data-content="https%3A%2F%2Fgithub.com%2Fyamanoku%2Fbaseline-mcp-server%2Fblob%2F919596d85371a0392124b911756b63bcbd19ab2f%2FDockerfile" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/yamanoku/baseline-mcp-server/blob/919596d85371a0392124b911756b63bcbd19ab2f/Dockerfile" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/yamanoku/baseline-mcp-server/blob/919596d85371a0392124b911756b63bcbd19ab2f/Dockerfile</a></p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81" data-line="56" class="code-line">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<p data-line="58" class="code-line">Baseline MCP Serverを使うことで、LLMモデルは常に最新のWeb Platform APIよりBaselineの状況へアクセスできるようになります。フロントエンドエンジニアがAIを活用する際、より信頼性の高い情報を得ることができるようになるでしょう。</p>
<p data-line="60" class="code-line">MCPの可能性はまだまだ広がっており、今後もWeb開発者とAIの連携をより強化するツールを開発していきたいと考えています。セキュリティを考慮した実装アプローチによって、安全かつ実用的なツールとなることを目指しています。</p>
<p data-line="62" class="code-line">ぜひBaseline MCP Serverを試してみて、フィードバックをいただければ幸いです。</p>
<p data-line="64" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__c6cc94ef45895" src="https://embed.zenn.studio/card#zenn-embedded__c6cc94ef45895" data-content="https%3A%2F%2Fgithub.com%2Fyamanoku%2Fbaseline-mcp-server" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/yamanoku/baseline-mcp-server" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/yamanoku/baseline-mcp-server</a></p>
<h2 id="%E8%AC%9D%E8%BE%9E" data-line="66" class="code-line">
<a class="header-anchor-link" href="#%E8%AC%9D%E8%BE%9E" aria-hidden="true"></a> 謝辞</h2>
<p data-line="68" class="code-line">本記事は、Claude 3.7 Sonnetに記事作成を協力してもらい作成されました。感謝申し上げます。</p>
<h2 id="%E8%BF%BD%E8%A8%98-%EF%BC%882025-04-20%EF%BC%89" data-line="70" class="code-line">
<a class="header-anchor-link" href="#%E8%BF%BD%E8%A8%98-%EF%BC%882025-04-20%EF%BC%89" aria-hidden="true"></a> 追記 （2025-04-20）</h2>
<p data-line="72" class="code-line"><a href="https://www.w3.org/community/webdx/" target="_blank" rel="nofollow noopener noreferrer">WebDX Community Group</a>が運営するBaselineホームページ内の<a href="https://web-platform-dx.github.io/web-features/baseline-in-the-wild/" target="_blank" rel="nofollow noopener noreferrer">Baseline in the wild</a>にて、Baseline MCP ServerをBaselineの活用事例としてToolsのセクションに追加させてもらいました。</p>
<p data-line="74" class="code-line"><img src="https://i.gyazo.com/32972dc3d6b79d703bfbebfd6c84e38b.png" alt="Baselineサイトのスクリーンショット。画面の左半分にはBaselineのロゴと「Baseline gives you clear information about which web platform features work across browsers.」という説明文、その下には関連するリンク一覧がある。右半分には様々なBaselineに関連ツールやプロジェクトのリストがあり、赤枠で強調されている項目にはBaseline MCP Serverが載っていて、説明文には「Baseline MCP Server, a Model Context Protocol (MCP) server that provides Baseline information for web features.」と書かれている。" loading="lazy" class="md-img"></p>
<p data-line="76" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__2310687f19568" src="https://embed.zenn.studio/card#zenn-embedded__2310687f19568" data-content="https%3A%2F%2Fgithub.com%2Fweb-platform-dx%2Fweb-features%2Fpull%2F2877" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/web-platform-dx/web-features/pull/2877" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/web-platform-dx/web-features/pull/2877</a></p>


Baseline MCP Serverを公開しました！

なぜBaseline MCP Serverを開発したのか

なぜDenoから動作するようにしているのか

Discussion