0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@kai_kou(甲斐 甲)

WebMCP入門 — AIエージェント向けブラウザ標準をChrome 149で実装する

0
Posted at

WebMCPのアーキテクチャ概念図

はじめに

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の比較

具体的な解決シナリオ

旅行予約サイトの例:

  • 従来: エージェントがカレンダーのスクリーンショットを撮影→日付を解析→フォームフィールドをクリック→結果を再スクリーンショット
  • 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 のツールはユーザー確認を促す場合があります。

命令的APIのフロー図

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ネイティブな世界において競争力を持つことになります。早期プレビュープログラムへの参加で、今から実装を準備しておくことを推奨します。

参考リンク

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?