WebMCPについて調べて、動きを確認してみた
どうも！オペ部の西村祐二です！
Chrome 146のリリースに合わせて、Webアプリの機能をAIエージェントに公開できる新標準 WebMCP（Web Model Context Protocol） のアーリープレビューが開始されました。
この記事では、WebMCPの概要からAPIの仕組み、そして実際にサンプルサイトを作って動きをみるところまでを一通り紹介します。
WebMCPとは
WebMCPは、Webアプリがフロントエンド側で構造化されたJavaScriptベースのツールをAIエージェントに公開できる仕様案です。サイト側がエージェント向けに"使ってよい機能"を明示的に提供するという考え方で、W3C Community Groupが策定を進めています。
| 項目 | 内容 |
|---|---|
| 仕様の位置づけ | W3C Community Groupによる Draft Community Group Report |
| 公開日 | Early Previewの発表は2026年2月10日、現在の公開仕様書は2026年3月9日版 |
| 提供状況 | Chrome 146（安定版）でchrome://flagsから有効化可能。Early Preview Program 参加者向けにもプロトタイピング提供 |
| 公式リンク | WebMCP Early Preview、W3C仕様 |
ひとことで言えば、「Webサイトが『AIエージェントさん、うちのサイトではこの機能が使えますよ』と構造化された形で宣言できる仕組み」です。
注目ポイント
スクレイピング不要のエージェント連携
これまでAIエージェントがWebサイトと連携するには、PlaywrightなどでDOM要素を操作したり、スクリーンショットを解析してページの内容を読み取ったりする必要がありました。この方法にはいくつかの課題があります。
- サイトのHTML構造やUIデザインが変わると壊れる（ボタンの位置が変わっただけで動作しなくなる）
- サイト側が意図しない操作をエージェントが行うリスクがある
- スクリーンショット解析では正確性に限界がある
- エージェントがクリックすべきボタンを「見つける」ことに依存しており、信頼性が低い
WebMCPではこれらの課題を根本的に解決します。Webサイト側がnavigator.modelContext APIを通じて「このツールはこういう入力を受け取って、こういう結果を返す」という構造化されたインターフェースを公開し、エージェントがそれを呼び出す形になります。スクリーンショット解析ではなく構造化されたデータでやり取りするため、より正確で効率的なインタラクションが実現できます。サイト側が主導権を持ってエージェントに何を許可するかを制御できる点も大きな特徴です。
MCPとWebMCPの関係 — 競合ではなくパートナー
名前が似ているので「WebMCPはMCPに取って代わるのか？」と思われがちですが、両者はまったく異なるレイヤーで動作する補完関係にあります。Chrome公式ブログでは、企業のカスタマーサービスに例えて説明しています。
- MCP = コールセンター: いつでもどこからでも利用可能。バックエンドで常時稼働し、データやアクションを提供する
- WebMCP = 店舗の専門家: Webサイト（店舗）に来ているときだけ利用可能。ライブセッションに特化した対応ができる
技術的な違い
| 側面 | MCP | WebMCP |
|---|---|---|
| 目的 | データとアクションの提供（常時） | ライブWebサイトの操作（セッション中） |
| 動作レイヤー | バックエンド（サーバーサイド） | フロントエンド（ブラウザ内） |
| プロトコル | JSON-RPC | JavaScript API / HTML属性 |
| ライフサイクル | 永続的（サーバー/デーモン） | 一時的（タブにバインド。ページ遷移やタブを閉じると消える） |
| 接続範囲 | グローバル（複数プラットフォーム対応） | ブラウザエージェントに限定 |
| UI操作 | ヘッドレス・外部からの操作 | DOM認識型・ブラウザ統合 |
| ツール検出 | エージェント固有のフロー | ページアクセス時に自動登録 |
| 実装言語 | Rust、Python、TypeScript等のSDK | JavaScript / HTML属性 |
WebMCPならではの強み
WebMCPにはブラウザ内で動作するからこそのメリットがあります。
- 速度と信頼性: ブラウザの内部システムを使用するため、クライアントとツール間の通信がほぼ瞬時に行われます。ネットワーク越しのJSON-RPC通信が必要なMCPと比べて、レイテンシが格段に低いです
- ライブセッションへのアクセス: エージェントはライブブラウザタブでのみ利用可能なセッションデータ、Cookie、DOM要素にアクセスできます。ログイン済みユーザーのコンテキストでツールを実行できるのは大きな利点です
- UIリデザインへの耐性: WebMCPのツールはUIデザインではなくアプリケーションロジックに接続されるため、サイトのUIをリデザインしてもツール定義を変更する必要がありません。
今後予想される統合アプローチ
最も効果的な実装では、MCPとWebMCPを組み合わせて使います。
- MCPでコアロジックを管理: ビジネスロジック、データ取得、バックグラウンドタスクなど、常時稼働が必要な機能
- WebMCPでコンテキストUIを構築: ブラウザ内での直接操作、ユーザーセッションに依存する機能
たとえば、ECサイトがバックエンドにMCPサーバー（在庫管理・注文処理・レコメンドエンジンなど）を置き、フロントエンドにWebMCP（商品検索・カート操作・レビュー投稿など）を実装する、というように同じサービスが両方を使い分けるユースケースが想定されています。
試してみる
公式ブログではEarly Preview Programへの参加が案内されていますが、手元ですぐ試したい場合は、Chrome 146以上でchrome://flagsから有効化できます。2026年3月時点でChrome 146は安定版としてリリース済みのため、通常のChromeで試せます。
有効化の手順
- Chromeのバージョンが146以上であることを確認する（
chrome://settings/helpで確認可能） - アドレスバーに
chrome://flags#webmcp-for-testingと入力して開く - 該当するフラグを「Enabled」に変更する
- ブラウザの再起動を求められるので、再起動する
APIが有効か確認する
再起動後、適当なページ（例: https://www.google.com/ ）を開き、DevToolsのConsoleで以下を実行します。
"modelContext" in navigator
true→navigator.modelContextが公開されている（有効化成功）false→ まだ有効化されていないか、対応環境ではない可能性が高い
WebMCPの仕様では、NavigatorインターフェースにmodelContext属性が追加される形になっています。
さらに詳しく確認したい場合
Consoleでnavigator.modelContextと入力して実行すると、有効ならModelContextオブジェクトの中身が見えるはずです。W3C仕様ドラフトではregisterTool()とunregisterTool()が定義されています。Chrome 146の実装ではこれらに加えてprovideContext()とclearContext()も確認できます。
APIの存在確認をもう少し具体的にやるなら:
typeof navigator.modelContext?.registerTool
// → "function" が返ればAPIが利用可能
Model Context Tool Inspector で確認する
登録されたツールをGUIで確認したい場合は、Model Context Tool Inspector というChrome拡張機能（ソースコード）が便利です。この拡張を入れると、ツールバーの拡張機能アイコンからサイドパネルを開き、現在のページで公開されているWebMCPツールの一覧確認やツールの実行テストができます。後述のデモでツール登録の動作確認にも使います。
Imperative API
Imperative APIは、JavaScriptでnavigator.modelContextのメソッドを使い、AIエージェントが呼び出せるツールをプログラム的に登録する方法です。動的にツールを追加・削除でき、複雑なロジックを持つツールの実装に適しています。
registerTool() — ツールを個別に登録する
registerTool()に渡すオブジェクトには以下のプロパティを指定します。
| プロパティ | 型 | 説明 |
|---|---|---|
name |
string |
ツールの一意な名前。エージェントはこの名前でツールを識別します |
description |
string |
ツールの説明。エージェントが「どのツールを使うべきか」を判断する材料になります |
inputSchema |
object |
ツールが受け取るパラメータのJSON Schemaです。型・必須項目・説明を定義します |
execute |
function |
ツールが呼び出されたときに実行される関数。引数としてパラメータを受け取り、結果を返します |
コード例: 売上レポート生成ツール
if ("modelContext" in navigator) {
navigator.modelContext.registerTool({
// ツール名: エージェントがこの名前で呼び出す
name: "generate_sales_report",
// 説明: エージェントが適切なツールを選ぶための判断材料
description: "指定された期間の売上レポートを生成する",
// 入力スキーマ: JSON Schema形式でパラメータを定義
inputSchema: {
type: "object",
properties: {
startDate: {
type: "string",
description: "開始日（YYYY-MM-DD形式）"
},
endDate: {
type: "string",
description: "終了日（YYYY-MM-DD形式）"
}
},
required: ["startDate", "endDate"]
},
// 実行関数: エージェントがツールを呼び出すとこの関数が実行される
async execute({ startDate, endDate }) {
const response = await fetch("/api/reports/sales", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ startDate, endDate })
});
const data = await response.json();
return { success: true, totalRevenue: data.totalRevenue };
}
});
}
ポイントは、inputSchemaでパラメータの型や説明をしっかり定義することです。エージェントはこのスキーマを見て「どんな値を渡せばいいか」を判断します。descriptionも重要で、エージェントが複数のツールの中からどれを使うかを選ぶ際の判断材料になります。
registerTool()は既存のツールを保持したまま個別にツールを追加できます。不要になったツールはunregisterTool("ツール名")で削除できます。
// ツールの登録解除
navigator.modelContext.unregisterTool("generate_sales_report");
unregisterTool()を使えば、ユーザーの認証状態やページの状態に応じてツールを動的に出し入れすることもできます。たとえば、ログイン済みのユーザーにだけ「注文ツール」を公開する、といった制御が可能です。
provideContext() — ツール一覧を一括で登録・置き換える
provideContext()は、ツール一覧をまとめて登録するメソッドです。registerTool()との大きな違いは、呼び出すたびに既存のツールがすべてクリアされて新しいツール一覧に置き換わる点です。
navigator.modelContext.provideContext({
tools: [
{
name: "add-todo",
description: "TODOリストに新しいアイテムを追加する",
inputSchema: {
type: "object",
properties: {
text: { type: "string", description: "TODOのテキスト" }
},
required: ["text"]
},
async execute({ text }) {
addTask(text);
return { content: [{ type: "text", text: `追加しました: ${text}` }] };
}
},
{
name: "list-todos",
description: "現在のTODOリストを取得する",
inputSchema: { type: "object", properties: {} },
async execute() {
return { content: [{ type: "text", text: getTasks().join("\n") }] };
}
}
]
});
SPA（Single Page Application）では画面遷移のたびにツール構成が変わることがあります。provideContext()なら、新しい画面に合わせたツール一覧で丸ごと差し替えられるため、SPAとの相性が良いです。一方、registerTool() / unregisterTool()は既存ツールを保持しつつ個別に追加・削除したい場合に適しています。
利用可能なメソッドのまとめ
| メソッド | 用途 | 既存ツールへの影響 |
|---|---|---|
registerTool() |
ツールを個別に登録する | 保持される |
unregisterTool() |
名前を指定してツールを削除する | 指定したもののみ削除 |
provideContext() |
ツール一覧を一括で登録する | すべてクリアされて置き換わる |
Declarative API
Declarative APIは、HTMLフォームに専用の属性を付与するだけで、そのフォームをAIエージェント向けのツールとして公開できる方法です。JavaScriptを一行も書かずに実装できるため、既存のWebサイトへの導入ハードルが非常に低いのが特徴です。
基本的な使い方
フォーム要素と入力要素にそれぞれ専用の属性を追加します。
<form>要素の属性
| 属性 | 説明 |
|---|---|
toolname |
ツールの名前。エージェントがこの名前で識別します |
tooldescription |
ツールの説明。エージェントの判断材料になります |
toolautosubmit |
エージェントがフォームを入力した後、自動的に送信するかどうか（任意） |
<input>要素の属性
| 属性 | 説明 |
|---|---|
toolparamtitle |
引数のタイトル。スキーマのtitleフィールドに対応します |
toolparamdescription |
引数の説明。エージェントがどんな値を入力すべきか判断する材料になります |
コード例: TODO追加フォーム
<form toolname="add-todo-item"
tooldescription="TODOリストに新しいアイテムを追加する"
toolautosubmit>
<input
name="text"
type="text"
toolparamtitle="TODOテキスト"
toolparamdescription="追加するTODOアイテムのテキスト"
required
/>
<button type="submit">追加</button>
</form>
フォームから自動生成されるスキーマ
ブラウザはフォームのフィールドを自動的に解析して、以下のようなJSON Schemaに変換します。開発者がスキーマを手書きする必要はありません。
[
{
"name": "add-todo-item",
"description": "TODOリストに新しいアイテムを追加する",
"inputSchema": {
"type": "object",
"properties": {
"text": {
"type": "string",
"title": "TODOテキスト",
"description": "追加するTODOアイテムのテキスト"
}
},
"required": ["text"]
}
}
]
<input>のtype属性（text、number、emailなど）がスキーマの型に、required属性が必須フィールドに、toolparamtitle / toolparamdescriptionがそれぞれtitle / descriptionに対応します。
エージェントがツールを呼び出すと、ブラウザがフォームのフィールドを事前入力し、toolautosubmitが設定されていればそのまま送信されます。toolautosubmitがない場合は、ユーザーに確認を求めてからの送信になります。
エージェント経由の送信を判別する
エージェント経由でフォームが送信された場合はSubmitEventに追加される以下のプロパティで判別・応答できます。
| プロパティ / メソッド | 型 | 説明 |
|---|---|---|
agentInvoked |
boolean |
AIエージェント経由の送信かどうか |
respondWith() |
method |
エージェントに構造化された結果を返却する |
document.querySelector("form").addEventListener("submit", (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const text = formData.get("text").trim();
// 通常の処理（ユーザー操作でもエージェント経由でも共通）
addTask(text);
taskInput.value = "";
// エージェント経由の場合は構造化された結果を返す
if (e.agentInvoked) {
e.respondWith(Promise.resolve(`追加しました: ${text}`));
}
});
ポイントは、addTask()のようなメインロジックはユーザー操作でもエージェント経由でも共通で実行し、e.agentInvokedの分岐ではエージェントへの結果返却のみを行うという点です。これにより、既存のフォーム処理ロジックに最小限の変更を加えるだけでWebMCP対応ができます。
UXシグナリング
エージェントがフォームを操作しているとき、ユーザーから見ると「勝手にフォームが入力されている」状態になります。explainerドキュメントでは、この操作状態をUIに反映してユーザーに分かりやすく伝えるための仕組みも提案されています。
イベント
toolactivated — ツール実行開始時
AIエージェントがツールの呼び出しを開始したときに発火します。イベントオブジェクトのtoolNameプロパティで、どのツールが呼び出されたかを取得できます。
window.addEventListener("toolactivated", ({ toolName }) => {
console.log(`ツール "${toolName}" の実行が開始されました`);
});
toolcancel — ツール実行キャンセル時
以下の状況で発火します。
- ユーザーがエージェントによるツール使用を拒否した場合
- フォームのresetボタンが押された場合
window.addEventListener("toolcancel", ({ toolName }) => {
console.log(`ツール "${toolName}" の実行がキャンセルされました`);
});
CSSセレクタ
エージェントがフォームを操作中であることをビジュアルで示すための疑似クラスも提案されています。
| セレクタ | 適用条件 |
|---|---|
:tool-form-active |
エージェントがtoolname属性を持つフォームを操作中のとき |
:tool-submit-active |
エージェントがフォームの送信ボタンを操作中のとき |
これを使えば、たとえば「エージェントが操作中のフォームにハイライト表示を付ける」といったUX改善ができます。
/* エージェントがフォームを操作中のとき */
form:tool-form-active {
border: 2px solid #4285f4;
background-color: rgba(66, 133, 244, 0.05);
}
/* エージェントが送信ボタンを操作中のとき */
button:tool-submit-active {
background-color: #34a853;
color: white;
}
サンプルのWebMCP対応サイトを作って試す
ここまでの内容を踏まえて、実際にWebMCP対応のサンプルページを作って手元で動かしてみましょう。HTMLファイルを1つ作ってローカルサーバーで配信するだけなので、数分で試せます。
このデモでは以下を体験できます。
- Imperative API:
provideContext()でツールを一括登録 - Model Context Tool Inspector: 登録されたツールの確認と実行テスト
- AIによるツール呼び出し: 自然言語のプロンプトからAIがツールを自律的に選択・実行
1. サンプルHTMLを作成する
任意のディレクトリにwebmcp-demo.htmlというファイルを作成し、以下の内容を貼り付けます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>WebMCP デモサイト</title>
<style>
body {
font-family: system-ui, sans-serif;
max-width: 720px;
margin: 2rem auto;
padding: 0 1rem;
color: #333;
}
h1 { border-bottom: 2px solid #333; padding-bottom: 0.5rem; }
.status { padding: 1rem; border-radius: 8px; margin: 1rem 0; }
.ok { background: #d4edda; color: #155724; }
.ng { background: #f8d7da; color: #721c24; }
section {
margin: 2rem 0;
padding: 1.5rem;
border: 1px solid #ddd;
border-radius: 8px;
}
section h2 { margin-top: 0; }
pre {
background: #f5f5f5;
padding: 1rem;
border-radius: 4px;
overflow-x: auto;
}
#log { white-space: pre-wrap; font-size: 0.9rem; min-height: 3rem; }
.tool-info {
background: #e8f4fd;
padding: 0.75rem;
border-radius: 4px;
font-size: 0.9rem;
}
</style>
</head>
<body>
<h1>WebMCP デモサイト</h1>
<p>このページでは、WebMCP の Imperative API を使って
AIエージェント向けのツールを公開しています。</p>
<!-- ====== ステータス表示 ====== -->
<div id="status"></div>
<!-- ====== Imperative API デモ ====== -->
<section>
<h2>Imperative API デモ: 計算ツール</h2>
<p><code>provideContext()</code> を使い、
以下のツールを一括登録しています。</p>
<div class="tool-info">
<strong>登録ツール一覧:</strong><br>
・<code>calculate</code> — 2つの数値で四則演算を行う<br>
・<code>greet</code> — 名前を受け取って日本語で挨拶を返す
</div>
<h3>実行ログ</h3>
<pre id="log">（ツールが呼び出されるとここにログが表示されます）
</pre>
<p>登録されたツールの確認・実行テストには
<a href="https://chromewebstore.google.com/detail/webmcp-model-context-tool/gbpdfapgefenggkahomfgkhfehlcenpd"
target="_blank">Model Context Tool Inspector</a>
拡張機能が便利です。ツールバーのアイコンからサイドパネルを開くと、
ツール一覧の確認やJSON引数を指定しての実行テストができます。</p>
<p>DevTools Console で API の状態を確認:</p>
<pre><code>// API が有効か確認
typeof navigator.modelContext?.registerTool // → "function"
typeof navigator.modelContext?.provideContext // → "function"</code></pre>
</section>
<script>
const logEl = document.getElementById("log");
const statusEl = document.getElementById("status");
function log(msg) {
logEl.textContent += `[${new Date().toLocaleTimeString()}] ${msg}\n`;
}
// ========================================
// WebMCP 対応チェック
// ========================================
if ("modelContext" in navigator) {
statusEl.innerHTML =
'<div class="status ok">navigator.modelContext が利用可能です — WebMCP が有効化されています</div>';
// ========================================
// Imperative API: provideContext() でツール一括登録
// ========================================
navigator.modelContext.provideContext({
tools: [
// --- 計算ツール ---
{
name: "calculate",
description: "2つの数値で四則演算を行う。operation は add / subtract / multiply / divide のいずれか",
inputSchema: {
type: "object",
properties: {
a: { type: "number", description: "1つ目の数値" },
b: { type: "number", description: "2つ目の数値" },
operation: {
type: "string",
enum: ["add", "subtract", "multiply", "divide"],
description: "演算の種類"
}
},
required: ["a", "b", "operation"]
},
execute({ a, b, operation }) {
log(`calculate が呼ばれました: ${a} ${operation} ${b}`);
const ops = {
add: (x, y) => x + y,
subtract: (x, y) => x - y,
multiply: (x, y) => x * y,
divide: (x, y) => y !== 0 ? x / y : "Error: division by zero"
};
const result = ops[operation]?.(a, b) ?? "Error: unknown operation";
log(`→ 結果: ${result}`);
return { content: [{ type: "text", text: String(result) }] };
}
},
// --- 挨拶ツール ---
{
name: "greet",
description: "名前を受け取って日本語で挨拶を返す",
inputSchema: {
type: "object",
properties: {
name: { type: "string", description: "挨拶する相手の名前" }
},
required: ["name"]
},
execute({ name }) {
const message = `こんにちは、${name}さん！WebMCPの世界へようこそ！`;
log(`greet が呼ばれました → ${message}`);
return { content: [{ type: "text", text: message }] };
}
}
]
});
log("provideContext() でツールを一括登録しました（calculate, greet）");
// ========================================
// UXシグナリング: イベントリスナーの設定
// ========================================
window.addEventListener("toolactivated", ({ toolName }) => {
log(`[UX] ツール "${toolName}" の実行が開始されました`);
});
window.addEventListener("toolcancel", ({ toolName }) => {
log(`[UX] ツール "${toolName}" の実行がキャンセルされました`);
});
log("toolactivated / toolcancel イベントリスナーを設定しました");
log("---");
log("エージェントからのツール呼び出しを待機中...");
} else {
statusEl.innerHTML =
'<div class="status ng">navigator.modelContext が見つかりません。<br>' +
'Chrome 146 以上で <code>chrome://flags#webmcp-for-testing</code> を有効化してください。</div>';
}
</script>
</body>
</html>
デモの構成
このHTMLの中で行っていることをまとめると:
| 機能 | 使用API | 説明 |
|---|---|---|
計算ツール (calculate) |
Imperative API (provideContext) |
2つの数値で四則演算を行う |
挨拶ツール (greet) |
Imperative API (provideContext) |
名前を受け取って日本語で挨拶を返す |
| UXシグナリング | toolactivated / toolcancelイベント |
エージェントのツール実行開始・キャンセルをログに表示 |
2. ローカルサーバーで配信する
WebMCP APIはセキュリティ上の理由からfile://プロトコルでは動作しない可能性があります。webmcp-demo.htmlを保存したディレクトリで、以下のいずれかのコマンドを実行してローカルサーバーを起動します。
# Python がインストールされている場合
python3 -m http.server 8080
# Node.js がインストールされている場合
npx serve -p 8080
サーバーが起動したら、Chrome（WebMCPフラグを有効化済み）で以下のURLを開きます。
http://localhost:8080/webmcp-demo.html
3. 動作を確認する
ページを開くと、上部にWebMCPの有効/無効を示すステータスが表示されます。
- 緑色のバナー →
navigator.modelContextが利用可能（有効化成功） - 赤色のバナー → APIが見つからない（フラグの有効化を確認してください）
有効な場合、ログエリアに「provideContext() でツールを一括登録しました」と表示され、ツールの登録が完了しています。
4. Model Context Tool Inspectorで登録ツールを確認・実行する
前述の Model Context Tool Inspector をインストールしていれば、登録されたツールの確認と実行テストができます。
ツール一覧の確認
- ツールバーのModel Context Tool Inspectorアイコンをクリックしてサイドパネルを開く
- 自動的にページがスキャンされ、登録済みツールの一覧がテーブルに表示される
- Imperative APIで登録した
calculateとgreetが確認できる
ツールの実行テスト
サイドパネルからツールを直接実行して動作を確認できます。
- ドロップダウンから実行したいツールを選択する（例:
calculate） - JSON形式で引数を入力する（例:
{"a": 10, "b": 3, "operation": "add"}） - 「Execute Tool」ボタンをクリックする
- ツールの実行結果がサイドパネルに表示され、ページのログエリアにも反映される
navigator.modelContextオブジェクト自体には登録済みツール一覧を取得するプロパティが公開されていないため、この拡張機能がツールの確認・テストに最も有用です。
AIエージェントによるツール呼び出し（Interact with the page）
Model Context Tool Inspectorには「Interact with the page」機能があり、Gemini APIを設定することで自然言語のプロンプトを入力するとAIが登録済みツールを自律的に選択・実行します。
- サイドパネルの「Interact with the page」セクションを開く
- User Promptに自然言語で指示を入力する（例:
Johnに挨拶して、それから50と10を掛け算してください。） - 「Send」ボタンをクリックする
- AIがプロンプトを解析し、適切なツールを自動で選択・実行する
上記の例では、AIがgreetツール（name: "John"）とcalculateツール（a: 50, b: 10, operation: "multiply"）を順番に呼び出し、ページのログエリアにそれぞれの実行結果が表示されます。
これにより、「サイト側がツールを公開 → エージェントが自然言語の指示からツールを選択・実行」というWebMCPのエンドツーエンドの流れを体験できます。
まとめ
WebMCPは、Webサイトがエージェント向けの構造化されたインターフェースを公開するための標準を提供します。従来のスクレイピングベースの連携から、サイト側が公式にツールを提供する形への転換点になりそうです。
Model Context Tool Inspectorの「Interact with the page」機能を使えば、自然言語の指示からAIがツールを自律的に選択・実行するという、WebMCPのエンドツーエンドの流れを体験できます。正式な仕様確定と広範なブラウザ対応は今後の進展が待たれますが、Imperative APIでのツール登録と実行は今すぐ試せる段階です。
誰かの参考になれば幸いです。
関連リンク:
