こんにちは！
2026年2月10日、GoogleからAIエージェントがWebサイト上のツールを直接呼び出せるようになる「WebMCP」のEarly Previewが告知されました。
「MCP（Model Context Protocol）」という言葉は聞いたことがあるかもしれませんが、WEB向けに対応ということで気になり調べました。
まだプレビュー段階のため、今後の変更の可能性はありますが、現時点で分かった実装のポイントをシェアします。
※2026/2/23 サンプルページの追加とDeclarative APIによる利用方法を追記しました。
WebMCPとは
これまでも、AIツールから外部機能を呼び出す「MCP」という仕組みはありました。
しかし、それは主に特定のアプリケーションを呼び出すためのものでした。
今回の「WebMCP」は、その仕組みをWebサイトに応用したものです。
WebサイトにアクセスしたAIエージェントが、そのサイトが提供している「ツール（機能）」を取得し、ユーザーのプロンプトに合わせて自ら実行してくれるようになります。
たとえば、「このサイトの人気レビューを教えて」とAIに頼むと、AIがサイト内のWebMCPツールを見つけ出し、必要な検索条件を判断してデータを取得してくれる、という動きをしてくれます。
デモサイト
公式に作成されたデモサイトはこちらです。
現時点ではWebMCPに対応したツールがまだないため、検証にはGoogleが提供しているChrome拡張機能を使用します。
ソースコード
試作品
公式のデモだけでは実感が湧かなかったので、自分で簡単な商品レビューページのサンプルを作成してみました。
今回のはImperative APIの場合を検証したものです。
サンプルページ
リポジトリ
内容
ページの構成
商品情報とレビューが並んでいるシンプルなHTMLページです。
このページから「AIがレビューを取得できるようにする」のが目的です。
※ページの商品の情報やレビューはダミーで作成したものです。
WebMCPのためのJavaScript(Imperative APIについて)
7行目から29行目
MCPのtoolの登録や解除などの処理
32行目から114行目
toolの設定や処理の定義
具体的には、以下のような情報をAIに伝えます。
・名前（name）: getProductReviews
・説明（description）: 「商品ページから名前や評価を取得する」
・入力形式（inputSchema）: limit（何件取得するか）という数値
例えば、「3件だけ見たい」という要望があれば、limit: 3 という数値がAIから渡される仕組みになっています。
117行目から119行目
toolの登録
動きの確認
ツールの概要
実際の登録処理はこのような形で行いました。
window.navigator.modelContext.registerTool(getProductReviewsTool);
この一行があることで、ブラウザにインストールした拡張機能が「このページにはこんなツールがある」と認識してくれます。取得できるとname、description、inputSchemaが表示されます。
name: "getProductReviews",
description: "Retrieve customer names, ratings, dates, and review comments from the product page.",
inputSchema: {
type: "object",
properties: {
limit: {
type: "integer",
description: "The maximum number of reviews to return. Optional."
}
}
},
outputSchema: {
type: "object",
properties: {
content: {
type: "array",
items: {
type: "object",
properties: {
type: { type: "string" },
text: { type: "string" }
}
}
}
}
},
プロンプト入力した結果
User prompt: "評価の高いレビューを五件教えて"
AI calling tool "getProductReviews" with {"limit":5}
Tool "getProductReviews" result: {"content":[{"type":"text","text":"[\n {\n \"id\": \"1\",\n \"reviewerName\": \"田中 健太\",\n \"reviewDate\": \"2023年10月15日\",\n \"rating\": \"★★★★★\",\n \"ratingValue\": 5,\n \"comment\": \"音質が素晴らしいです。ノイズキャンセリングも強力で、電車の中でも音楽に集中できます。バッテリーの持ちも文句なしです。\"\n },\n {\n \"id\": \"2\",\n \"reviewerName\": \"鈴木 美咲\",\n \"reviewDate\": \"2023年11月2日\",\n \"rating\": \"★★★★☆\",\n \"ratingValue\": 5,\n \"comment\": \"デザインがかっこいいです。長時間つけていても耳が痛くなりません。ただ、ケースが少し大きいかなと感じました。\"\n },\n {\n \"id\": \"3\",\n \"reviewerName\": \"佐藤 一郎\",\n \"reviewDate\": \"2023年12月10日\",\n \"rating\": \"★★★★★\",\n \"ratingValue\": 5,\n \"comment\": \"ペアリングがとてもスムーズでした。マイクの音質も良く、Web会議でも問題なく使えています。この価格でこのクオリティは満足です。\"\n },\n {\n \"id\": \"4\",\n \"reviewerName\": \"佐々木 健治\",\n \"reviewDate\": \"2024年1月5日\",\n \"rating\": \"★☆☆☆☆\",\n \"ratingValue\": 5,\n \"comment\": \"全然ダメ。届いたその日に充電できなくなりました。サポートの対応も遅く、非常に残念です。\"\n },\n {\n \"id\": \"5\",\n \"reviewerName\": \"山田 花子\",\n \"reviewDate\": \"2024年2月10日\",\n \"rating\": \"★★☆☆☆\",\n \"ratingValue\": 5,\n \"comment\": \"期待ほどではなかったです。音質は普通ですが、長時間つけていると耳が痛くなります。私の耳には合わなかったようです。\"\n }\n]"}]}
AI result: 以下に評価の高いレビューを3件ご紹介します。
* **田中 健太**さん (2023年10月15日) - ★★★★★
音質が素晴らしいです。ノイズキャンセリングも強力で、電車の中でも音楽に集中できます。バッテリーの持ちも文句なしです。
* **鈴木 美咲**さん (2023年11月2日) - ★★★★☆
デザインがかっこいいです。長時間つけていても耳が痛くなりません。ただ、ケースが少し大きいかなと感じました。
* **佐藤 一郎**さん (2023年12月10日) - ★★★★★
ペアリングがとてもスムーズでした。マイクの音質も良く、Web会議でも問題なく使えています。この価格でこのクオリティは満足です。
上位5件のレビューから、特に評価の高いものを3件選ばせていただきました。
どうやらプロンプトの5件がlimitに誤って設定されてしまって結果は正しくないのですが、ツールに設定されている処理でデータが取得されているような動きを確認できました。
WebMCPのためのHTML(Declarative APIについて)
WebMCPの実装のもう一つはHTML上に追記することでAI側に認識させる方法があります。
主な使用目的としてはJavascriptまで実装する程ではない部分で、入力補助をするために利用されるものとなります。
実装内容
HTMLにtoolname（ツール名）と tooldescription（ツールの説明）属性を追加することでクライアント側が認識してAIへの指示内容をもとに、選択などが実行されます。
今回は並び替えの要素に追加しています。
<form class="sort-controls" toolname="sortReviews" tooldescription="レビュー一覧を指定した順序に並び替えます"
style="margin-bottom: 2rem; display: flex; justify-content: flex-end; align-items: center;">
<span id="webmcp-info-trigger"
style="margin-right: 0.5rem; display: flex; align-items: center; font-weight: bold; cursor: pointer; color: var(--accent-color); transition: opacity 0.3s;"
onmouseover="this.style.opacity=0.8" onmouseout="this.style.opacity=1">
並び替え(Declarative API実装)
<span
style="display: inline-flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem; background-color: var(--accent-color); color: var(--white); border-radius: 50%; font-size: 0.8rem; margin-left: 0.3rem;">?</span>
</span>
<select id="sort-select" name="sortValue"
style="padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; color: #333;"
title="ソート順序を選択してください">
<option value="default">標準</option>
<option value="newest">新しい順</option>
<option value="oldest">古い順</option>
<option value="highest">評価が高い順</option>
<option value="lowest">評価が低い順</option>
</select>
<button type="submit" style="display: none;">並び替え実行</button>
</form>
特徴としてはOptionの部分に新たに何かを追加しなくても、toolnameとtooldescriptionがあることでoptionが選択肢であることを自動的に認識してくれることです。
拡張機能側DE以下のように検出されたことも確認できました。
まとめ
WebMCPに触れてみて、Webサイトの役割が大きく変わる可能性あるなと思いました。
これまでは、人間がボタンを押して操作するのが当たり前でした。
これからは、サイト側が「AIが使いやすい道具（MCP）」を用意しておくのが必要になるのかもしれません。