はじめに

AIエージェントがWebサイトを操作する際、従来の手法はスクリーンショットの解析やDOMのスクレイピングに依存していました。ページのレイアウトが変わるたびに壊れ、計算コストも高い——これが「ブラウザエージェント」の根本的な課題でした。

WebMCP（Web Model Context Protocol） は、この問題を解消するために Google が提案したオープンWeb標準です。ウェブサイトがAIエージェント向けに構造化されたツールを直接公開できる仕組みを、ブラウザのAPIとして定義します。

2026年5月のGoogle I/O 2026 で正式発表され、Chrome 149でのOrigin Trialが開始されます。Expedia、Booking.com、Shopifyといった大手サービスがすでに実験を開始しており、W3C Web Machine Learning Community Groupでの標準化も進んでいます。

この記事で学べること

WebMCPの設計思想と技術的な仕組み
宣言的API（HTML属性）と命令的API（JavaScript）の実装方法
既存のMCPとの違いと使い分け
Chrome 149 Origin Trialへの参加方法

前提知識

HTML・JavaScriptの基本知識
MCPの概念（知らなくても読めます）
Webサイトの開発経験

TL;DR

WebMCPはブラウザ上のAIエージェント向けに構造化ツールを公開するW3C提案Web標準
HTMLの <form> に属性を追加するだけの 宣言的API と、navigator.modelContext を使う 命令的API の2種類
Chrome 146 Canaryとエッジ147がすでに対応、Chrome 149でOrigin Trial開始
バックエンド向けのMCPとは異なり、ブラウザ内のライブなページ操作に特化

なぜWebMCPが必要なのか

従来のブラウザエージェントの問題

AIエージェントがWebサイトを操作する従来の手法には大きな欠点があります。

手法	課題
スクリーンショット解析	計算コストが高く、UI変更で即座に壊れる
DOM解析	ページ構造の変更に脆弱、動的コンテンツに対応困難
シミュレートクリック	非公式な操作のため信頼性が低い

WebMCPは、ウェブサイト自身が「エージェントへの公式インターフェース」を公開する仕組みを提供します。

WebMCP provides a standard way for exposing structured tools, ensuring AI agents can perform actions on your site with increased speed, reliability, and precision.
— Chrome for Developers Blog（2026-05-19）

具体的な解決シナリオ

旅行予約サイトの例:

従来: エージェントがカレンダーのスクリーンショットを撮影→日付を解析→フォームフィールドをクリック→結果を再スクリーンショット
WebMCP: エージェントが searchFlights({ origin: "TYO", destination: "LAX", date: "2026-06-01" }) を直接呼び出し、構造化されたJSON結果を受け取る

WebMCPのアーキテクチャ

2つのAPIモデル

WebMCPは用途に応じて2種類のAPIを提供します。

API	実装方法	用途
宣言的API	HTMLの `<form>` 属性	標準的なフォーム操作
命令的API	`navigator.modelContext`	動的・複雑な操作

権限ポリシー

両APIは tools Permissions Policy で制御されます。

Permissions-Policy: tools=(self)

デフォルトは self（同一オリジンのみ許可）。クロスオリジンiframeで使用する場合は allow="tools" 属性が必要です。

宣言的API — HTMLに属性を追加するだけ

最もシンプルな実装方法は、既存の <form> 要素に専用属性を追加する宣言的APIです。JavaScriptのコードは不要で、HTMLを変更するだけで機能します。

基本的な実装

<form
  id="reservationForm"
  action="/api/reserve"
  method="post"
  toolname="book_table"
  tooldescription="レストランのテーブル予約を作成する。名前・電話番号・日時・人数が必要"
>
  <div>
    <label for="name">お名前</label>
    <input
      type="text"
      id="name"
      name="name"
      required
      toolparamdescription="予約者の氏名（フルネーム、2文字以上）"
    />
  </div>

  <div>
    <label for="phone">電話番号</label>
    <input
      type="tel"
      id="phone"
      name="phone"
      toolparamdescription="日本の電話番号（ハイフンあり、例: 03-1234-5678）"
    />
  </div>

  <div>
    <label for="date">日時</label>
    <input
      type="datetime-local"
      id="date"
      name="date"
      toolparamdescription="予約希望日時（ISO 8601形式）"
    />
  </div>

  <div>
    <label for="guests">人数</label>
    <input
      type="number"
      id="guests"
      name="guests"
      min="1"
      max="20"
      toolparamdescription="来店人数（1〜20名）"
    />
  </div>

  <button type="submit">予約する</button>
</form>

主要な属性

属性	必須	説明
`toolname`	必須	エージェントが認識するツール名（snake_case推奨）
`tooldescription`	必須	ツールの機能を自然言語で説明。エージェントの理解精度に直結
`toolparamdescription`	任意	個々のフィールドの詳細な説明
`toolautosubmit`	任意	エージェントがフォームを埋めた後に自動送信するか制御

ブラウザは <form> の構造からJSONスキーマを自動生成し、エージェントに提供します。エージェントは適切な値を推論してフォームを正確に埋めることができます。

tooldescription の品質が鍵
自然言語の説明が正確であるほど、エージェントの入力精度が向上します。「何を」「どの形式で」入力すべきかを明記することを推奨します。

命令的API — JavaScriptで柔軟に実装

より複雑な操作や動的なデータ取得が必要な場合は、navigator.modelContext を使う命令的APIを使用します。

機能検出と基本構造

// WebMCP対応確認
if (!("modelContext" in navigator)) {
  console.log("WebMCP未対応のブラウザです");
}

const modelContext = window.navigator.modelContext;

ツール定義の構造

const searchFlightsTool = {
  name: "searchFlights",
  description: "フライト検索を実行する。出発地・目的地・日付・乗客数が必要",
  readOnly: true, // データを変更しない読み取り専用ツール
  inputSchema: {
    type: "object",
    properties: {
      origin: {
        type: "string",
        description: "出発地のIATAコード（例: TYO, LAX, NRT）"
      },
      destination: {
        type: "string",
        description: "目的地のIATAコード（例: TYO, LAX, NRT）"
      },
      outboundDate: {
        type: "string",
        description: "出発日（ISO 8601形式: YYYY-MM-DD）"
      },
      passengers: {
        type: "number",
        description: "乗客数（1〜9名）"
      }
    },
    required: ["origin", "destination", "outboundDate"]
  },
  outputSchema: {
    type: "string",
    description: "検索結果の説明メッセージまたはエラー情報"
  },
  execute: async (params) => {
    // 入力バリデーション
    if (!params.origin.match(/^[A-Z]{3}$/)) {
      return "エラー: originは3文字のIATAコードを指定してください";
    }

    // 実際のフライト検索API呼び出し
    const response = await fetch(`/api/flights/search`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(params)
    });

    if (!response.ok) {
      return `エラー: フライト検索に失敗しました（${response.status}）`;
    }

    const data = await response.json();
    return `${data.count}件のフライトが見つかりました`;
  }
};

ツールの登録と登録解除

// ツール登録
function registerTools() {
  const modelContext = navigator.modelContext;
  if (!modelContext) return;

  modelContext.registerTool(searchFlightsTool);
  modelContext.registerTool(bookFlightTool);
}

// Reactコンポーネントでのライフサイクル管理
import { useEffect } from "react";

function FlightSearch() {
  useEffect(() => {
    registerTools();

    // コンポーネントのアンマウント時に登録解除
    return () => {
      const modelContext = navigator.modelContext;
      if (modelContext) {
        modelContext.unregisterTool("searchFlights");
        modelContext.unregisterTool("bookFlight");
      }
    };
  }, []);

  return <div>{/* フライト検索UI */}</div>;
}

readOnly フラグの使い分け

// 読み取り専用（データ変更なし）
const getFlightStatusTool = {
  name: "getFlightStatus",
  readOnly: true, // エージェントが安全に呼び出せる
  // ...
};

// 書き込みあり（データ変更を伴う）
const bookFlightTool = {
  name: "bookFlight",
  readOnly: false, // エージェントは確認を求める場合がある
  // ...
};

readOnly: true は「副作用がない」ことをエージェントに伝えます。エージェントはこのツールをより積極的に呼び出す一方、readOnly: false のツールはユーザー確認を促す場合があります。

WebMCPとMCPの違い

WebMCPはMCPから着想を得ていますが、異なる問題を解決します。

観点	MCP	WebMCP
実行環境	サーバー・バックエンド	ブラウザ（タブ内）
プロトコル	JSON-RPC、stdio/SSE	ブラウザネイティブAPI
ライフサイクル	永続的（サーバープロセス）	一時的（タブのライフタイム）
主な用途	DBアクセス・外部APIの統合	訪問中のWebページ操作
標準化状況	Anthropic主導、業界採用が進む	W3C Web Machine Learning CG (Draft CG Report)
認証	サーバー側で管理	Permissions Policy
DOM操作	不可	可能

組み合わせた活用

両者は競合せず、補完関係にあります。

ユーザー ←→ ブラウザエージェント
                    ↓
         ┌──────────┴──────────┐
         ↓                     ↓
     WebMCP                  MCP
（ページ内ツール呼び出し） （バックエンドAPI・DB接続）
（DOM操作・フォーム入力）  （ファイルシステム・外部サービス）

MCPでコア業務ロジックを管理（在庫確認・決済処理など）
WebMCPでコンテキスト依存のUI操作を実装（フォーム入力・ページナビゲーション）

Chrome 149 Origin Trialへの参加

現在の対応状況（2026年5月時点）

ブラウザ	バージョン	状態
Chrome Canary	146+	利用可能（フラグ有効化が必要）
Microsoft Edge	未定	2026年後半に対応予定
Chrome 安定版	149	Origin Trial実施中（2026年5月〜）

フラグによる有効化（Chrome 146+ Canary）

chrome://flags/#enable-webmcp-testing

このフラグを有効にすると、navigator.modelContext APIが利用可能になります。

Origin Trial参加（Chrome 149以降）

Origin Trialへの参加はChrome developer blogの早期プレビュープログラムから登録できます。

参照: WebMCP Early Preview Program

実際の活用事例

Expedia

フライト検索ツールをWebMCPで公開。エージェントが出発地・目的地・日付を直接APIに渡すことで、複数画面のスクリーンショット解析が不要になりました。

Booking.com

ホテル検索と予約フローをWebMCPツールとして公開。チェックイン日・アウト日・人数・部屋タイプを構造化入力として受け取ります。

Shopify

ECサイトの商品検索・カート追加・決済フローをWebMCPツールとして整備中。

実装時の注意点

セキュリティ

toolname と tooldescription は外部から参照可能です。機密情報を含めないでください
命令的APIのexecuteハンドラーでは、受け取った入力を必ずバリデーションしてください
readOnly: false のツールは副作用を持つため、ユーザーへの確認フローを設計することを推奨します

`tooldescription` の書き方

エージェントの精度は tooldescription の品質に大きく依存します。

<!-- NG: 曖昧すぎる -->
<form toolname="search" tooldescription="検索する">

<!-- OK: 具体的で明確 -->
<form
  toolname="search_products"
  tooldescription="商品名またはカテゴリでECサイトの商品を検索する。キーワード・カテゴリID・価格範囲・ソート順を指定できる"
>

フォールバック対応

WebMCPに未対応のブラウザでも、通常のフォームとして動作するよう設計します。宣言的APIはHTMLの標準フォームにWebMCP用の属性を追加するだけのため、フォールバックは自動的に確保されます。

まとめ

WebMCPは、AIエージェントがWebサイトを操作する方法を根本から変える提案です。

スクリーンショット・DOM解析から構造化ツール呼び出しへ: エージェントの信頼性と速度が大幅に向上
2つのAPIで段階的に導入可能: HTMLに属性を追加するだけの宣言的APIから、複雑な命令的APIまで
MCPとの補完関係: バックエンドMCPとフロントエンドWebMCPの組み合わせで強力なエージェント体験を構築
W3C標準化プロセスで進行中: Chrome・Edgeの対応が先行し、Chrome 149でOrigin Trialが開始

エージェントエンジニアリングの観点では、WebMCPの対応を進めることで自サービスがAIネイティブな世界において競争力を持つことになります。早期プレビュープログラムへの参加で、今から実装を準備しておくことを推奨します。

参考リンク

WebMCP is available for early preview — Chrome for Developers（2026-05-19）
When to use WebMCP and MCP — Chrome for Developers
WebMCP | AI on Chrome — Chrome for Developers 公式ドキュメント
15 updates from Google I/O 2026 in Chrome — Chrome for Developers
WebMCP GitHub demos — GoogleChromeLabs 公式デモ