WebMCP · 体験デモ

同じ予約フォーム、WebMCP対応で何が変わるか エージェントから「見える」フォームと「見えない」フォームを、実際に並べて確かめる

これは AI エージェント向けの仕様 WebMCP の体験用ダミーサイトです。見た目も機能も同じ予約フォームを、WebMCP に対応させた版と、対応させていない版で用意しました。Chrome の開発者ツールから、エージェントにフォームがどう見えているかを実際に確認できます。

このブラウザーの対応を確認しています…

試し方（Chrome 149 以降）

  1. chrome://flags/#enable-webmcp-testing と chrome://flags/#devtools-webmcp-support を Enabled にして再起動します。
  2. 各ページを開き、開発者ツールを開いて Application パネル → WebMCP を選びます。
  3. 登録されたツール（Available Tools）を選び、パラメーターを入れて実行すると、フォームが埋まり予約結果が表示されます。対応版ではツールが見え、非対応版では何も見えないことを比べてください。

方式 A

Declarative API

reserveTable

標準の <form> に属性を足すだけの方式。フォームの構造から、エージェント用の入力スキーマが自動で作られます。

開く

方式 B

Imperative API

reserveTable

JavaScript でツールを登録する方式。registerTool() で予約処理をツールとして定義します。動的な UI 向け。

開く

比較対象

非対応（素のフォーム）

ツールなし

WebMCP の属性も登録もない、ふつうのフォーム。エージェントには構造が伝わらず、画面を推測するしかありません。

開く

WebMCP は HTTPS（または localhost）でのみ動作します。仕様は実験段階で変更されることがあります。対応ブラウザーはネイティブでは現状 Chrome 系のみです。各ページのフォームから送信した場合、実際の予約は行われません（ダミーです）。