AIエージェントがスクリーンショット解析なしでWebを操作できる「WebMCP」— サーバー不要でブラウザAPIからツールを直接公開する新仕様

10月12日、O'Reillyが「Designing Websites for People and AI Agents with WebMCP」と題した記事を公開した。この記事では、AIエージェントと人間の両方が同じWebインターフェースを使えるようにする新しいブラウザAPI「WebMCP」の設計思想と実装方法を詳しく紹介している。WebMCPを使うと、Webサイトの機能を構造化されたツールとして直接ブラウザから公開でき、エージェントはスクリーンショット解析やDOM探索なしに既存のUIを操作できるようになる。

AIエージェントはWebをうまく使えない

現在のWebサイトは人間向けに設計されている。AIエージェントがWebを操作する場合、スクリーンショットを解析するか、HTMLの構造を解析して目的のコントロールを推論する必要がある。この余分な処理はトークン消費を増やし、解釈ステップのたびにエラーの可能性が生まれる。

WebMCP は、Web開発者がサイトの機能を「構造化されたツール」として公開するための標準仕様だ。エージェントはスクリーンショットやDOM解析を経由せず、定義済みの関数を構造化された入力で直接呼び出せる。なお、Anthropicが策定したMCP（Model Context Protocol）とは別物であり、混同しないよう注意が必要だ。

`document.modelContext` でツールを登録する

開発者は document.modelContext.registerTool() を使い、エージェントが呼び出せるツールを登録する。以下は記事サイトの検索ツールの例だ。

const searchToolController = new AbortController();
await document.modelContext.registerTool(
  {
    name: "search-articles",
    title: "Search articles",
    description: "Search published articles by topic.",
    inputSchema: {
      type: "object",
      properties: {
        query: {
          type: "string",
          description: "The topic or phrase to search for."
        }
      },
      required: ["query"],
      additionalProperties: false
    },
    async execute({ query }) {
      const articles = await searchArticles(query);
      renderSearchResults(articles);
      return { articles };
    }
  },
  { signal: searchToolController.signal }
);
// ツールを無効化するときは:
// searchToolController.abort();

name と description でエージェントがツールの用途を判断し、inputSchema で受け取る引数を定義する。execute 関数は既存の検索ロジックをそのまま呼び出せるため、サーバーサイドに別途MCPエンドポイントを追加する必要がない。ツールはページがアクティブな間だけブラウザに公開され、AbortController で随時無効化できる。

既存のHTMLフォームに属性を付与するだけで同様のツールを宣言的に定義する方法も提案されている。

<form
  action="/articles"
  method="get"
  toolname="search-articles"
  tooldescription="Search published articles by topic."
>
  <label for="article-query">Topic</label>
  <input
    id="article-query"
    name="query"
    type="search"
    toolparamdescription="The topic or phrase to search for."
    required
  >
  <button type="submit">Search</button>
</form>

この例では toolautosubmit 属性を省略しているため、ブラウザはフィールドを埋めるが最終的な送信ボタンのクリックは人間が行う。エージェントが入力した値を人間がレビューしてから実行できる設計だ。

人間とエージェントが同じ画面を共有する

WebMCPの核心は、人間とエージェントが同一インターフェースを同時に使えるという点にある。エージェントがツールを呼び出すとページの状態が更新され、人間はその結果を通常のUI操作で確認・修正できる。

OpenAIの「Runme」はこのアプローチの実例として記事中で紹介されている。ノートブックアプリとして動作するブラウザアプリケーションがWebMCPツールを登録しており、別サーバーを立てることなくエージェントに機能を提供している。なお、元記事で参照されているURLはOpenAIのCodexに関するブログ記事（Automating repetitive work at OpenAI with Codex）であり、Runme固有のドキュメントについてはOpenAIの開発者向けドキュメントを別途参照されたい。

MCPとの使い分けと組み合わせ

WebMCPとMCPは役割が異なり、併用できる。

MCP: 関連するページが開いていない状態でもツールを提供できる。サーバーサイドで動作。
WebMCP: 現在開いているドキュメントに紐付き、ページの現在の状態を活用できる。

ブラウザはWebMCPで登録されたツールをMCPや他の関数呼び出し機構を通じてエージェントに公開する。たとえばECサイトで compare_products ツールをWebMCPで公開し、その比較UIをMCP Appsと組み合わせるといった使い方が想定されている。MCP Appsとは、MCPサーバーが提供するツールをホストしてエージェントから利用可能にするアプリケーション形式を指す概念で、WebMCPとサーバーサイドMCPを橋渡しする役割を担う。

セキュリティ上の注意点

WebMCPは既存のアクセス制御やバリデーションをバイパスしない。update_cart のようなツールでも、サーバー側で商品の存在確認やユーザー権限の検証を従来通り実施する必要がある。構造化された入力であっても、それ自体は信頼の証明にはならない。

また、ツール登録メタデータの書き換えによってエージェントを誘導できる「tool surface poisoning」に関するプレプリントがarXiv（arxiv.org/abs/2606.06387）で公開されている。なお、このarXiv IDの採番体系（2606.xxxxx）は2026年6月を示す可能性があり、記事中の「2025年6月」という日付との整合性は確認が必要だ。いずれにせよ、ポリフィルとヘッドレスエージェントを使った実験環境での結果であり、ネイティブのブラウザ実装では挙動が異なる可能性があるが、WebMCPを実装する際のテストケースとして参考にできる。

現時点での実装状況

WebMCPはすでにいくつかの実験的実装が存在する。

Chrome: フラグとOrigin Trialで実装済み。Sarah Drasnerによるインタラクティブデモをブラウザ上で試せる。
Cloudflare: 既存サイトにWebMCPブリッジを追加できる開発者プレビューを公開。
Brave: Leo assistantとの連携をテスト済み。

仕様はまだ策定中であり、フィードバックはWebMCPのIssueトラッカーで受け付けている。

詳細はDesigning Websites for People and AI Agents with WebMCPを参照していただきたい。