AIエージェントがWebサイトを操作するとき、毎回スクリーンショットを撮って内容を解析して操作を指示するのが当たり前でした。処理は遅く、ページのデザインが変わるたびに壊れやすい方法です。

WebMCP（Web Model Context Protocol）はこのボトルネックを解消する新しいブラウザ標準です。ChromeとCloudflareが相次いで対応を発表し、Web開発者とAIエージェント開発者の両方から注目を集めています。

この記事でわかること:
– WebMCPがスクリーンショット方式に代わって何を変えるのか
– navigator.modelContextTesting APIの基本的な動作
– Chrome・Cloudflareでの対応状況
– Webサイト側が実装するメリット

スクリーンショットループの何が問題か

AIエージェントがブラウザを操作する従来の方法は次のような流れです。スクリーンショットを撮影→画像を解析→クリックや入力を指示→スクリーンショットを再撮影、この繰り返しです。

この方法には3つの問題があります。処理が遅い、ページデザインの変更に脆弱、トークン消費量が大きい。スクリーンショット方式と比べてWebMCPは89%のトークン効率改善を達成できるという結果も報告されています（参考）。

DOMを直接操作するアプローチでも、XPathやCSSセレクターはページのリニューアルで簡単に壊れます。WebMCPはWebサイト側が意図的にAPIを公開する設計のため、デザイン変更があっても動作に影響しません。

WebMCPの仕組み

https://webmachinelearning.github.io/webmcp/

WebMCPはWebサイトが「ツール」を定義・公開するためのJavaScript APIです。ツールとは、自然言語の説明と型付きスキーマを持つ関数のことです。AIエージェントはブラウザが提供する navigator.modelContextTesting を通じて、そのサイトで使えるツールを一覧取得し、直接呼び出せます。

W3C Web Machine Learning Community Groupが2026年4月23日に公開したドラフト仕様で、GoogleとMicrosoftが共同で仕様策定を進めています。

ツールの取得はシンプルな一行で完結します。

navigator.modelContextTesting.listTools();

たとえばホテル予約サイトで実行すると、次のようなツール一覧が返ります。

[
  { "name": "search_location", "description": "Find me a hotel in a specific location" },
  { "name": "view_hotel", "description": "View the details of a specific hotel by name or id" },
  { "name": "lookup_amenity", "description": "Look up specific amenity or policy details for a hotel" }
]

ツールを実行するには executeTool を使います。

await navigator.modelContextTesting.executeTool(
  "search_location",
  JSON.stringify({ query: "Paris" })
);

ページの状態が変わるとツールの一覧も変わります。ホテルを選んだあとは start_booking が新たに現れ、エージェントは次に何をすべきかを自律的に判断できます。

2つのAPI

WebMCPは「Declarative API」と「Imperative API」の2種類を定義しています。

Declarative APIはHTMLフォームに直接記述するシンプルな方法です。通常のフォーム送信のような標準的なアクションに向いています。

Imperative APIはJavaScriptで動的に定義する柔軟な方法です。ページ状態に応じてツールが変化する複雑な操作や、人間の確認が必要なアクション（Human-in-the-Loop、以下HITL）に対応しています。

HITLは特に重要な仕組みです。たとえば complete_booking（予約確定）ツールは、ユーザーが「予約を確認する」ボタンを押すまで実行が停止します。AIエージェントが決済や個人情報の送信を行う場面でも、人間の最終確認を挟めます。

ChromeとCloudflareの対応状況

Google Chrome 146（2026年2月10日）でEarly Previewとして実装されました。現時点ではChrome betaの機能フラグが必要で、chrome://flags で「WebMCP」または「model-context」を検索して有効化できます。Microsoftも仕様策定に共同参加しており、Edgeへの対応も見込まれています。FirefoxとSafariはまだ公式な発表がありません。

Cloudflare Browser Runは2026年4月15日にWebMCPサポートを追加しました。

https://developers.cloudflare.com/changelog/post/2026-04-15-br-webmcp/

Cloudflare Browser Run（旧Browser Rendering）のLab Sessionを使うと、Chrome betaで動くブラウザインスタンスをAPIから取得できます。CDPエンドポイント経由でMCPクライアントを接続することで、AIエージェントがWebMCPを利用できます。Lab Sessionの起動は次のコマンドで完結します。

# wranglerを最新バージョンに更新
npm i -g wrangler@latest

# Lab Sessionを5分間の有効期限で作成
wrangler browser create --lab --keepAlive 300

AIエージェントからCloudflare経由でWebMCPを使う設定例はこちらです。

{
  "browser-rendering-cdp": {
    "command": [
      "npx", "-y", "chrome-devtools-mcp@latest",
      "--wsEndpoint=wss://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/browser-rendering/devtools/browser?keep_alive=600000&lab=true",
      "--wsHeaders={\"Authorization\":\"Bearer <CLOUDFLARE_API_TOKEN>\"}"
    ]
  }
}

この設定をClaude DesktopやCursorなどのMCPクライアントに追加するだけで、エージェントがWebMCP対応サイトのツールを自律的に発見・実行できます。

Anthropicの「MCP」との違い

WebMCPはAnthropicが提唱した「MCP（Model Context Protocol）」と名前が似ていますが、別の仕様です。

AnthropicのMCPはAIモデルとサーバー（ツール・API）をつなぐ汎用プロトコルで、ブラウザを前提とした設計ではありません。別途MCPサーバーを立てて管理する必要があります。

WebMCPはブラウザのJavaScript APIとして設計されており、Webサイト自体がツールを公開します。AIエージェントはページを開くだけでツール一覧を取得でき、サーバーの追加管理が不要です。両者は用途が異なる規格で、併用することも想定されています。

まとめ

WebMCPはAIエージェントとWebの接続方法を根本から変えようとする規格です。Webサイト側がツールを公開することで、AIエージェントはスクリーンショット不要で操作できるようになります。

GoogleがChromeに実装し、Cloudflareがインフラ側で対応するなど、2026年に入ってエコシステムの形成が加速しています。現時点はEarly Previewで本番利用には適しませんが、Webサイト側の実装が広がれば、AIエージェントの操作精度とコストが大きく変わります。フロントエンド開発者にとっても、今後見逃せない動向です。