WebMCPで商品検索やカート操作をツール化
Commerce.comとCloudflareは、AIエージェントがオンラインストアを利用する仕組みとして、WebMCPの導入を進めています。WebMCPは、ウェブページ上の機能をエージェントが呼び出せるツールとして登録する、Googleが提案した実験段階のブラウザー標準です。
従来のエージェントは、画面のHTMLやボタンを読み取り、操作方法を推測してクリックすることがあります。WebMCPでは、ページ側が商品検索などのツールを入力・出力の形式とともに登録し、エージェントは必要な機能を直接呼び出します。
Commerce.comはCloudflareを使って約10万のドメインを運用しています。Cloudflareは8月、エッジで小さなスクリプトを挿入し、店舗側がテーマを編集せずにWebMCPのツールを利用できるベータ版を開始しました。
ブラウザー内とサーバー側で異なる役割
買い物エージェントの利用形態には、サーバー上で動く方式、アプリをページに埋め込む方式、購入者のブラウザー内で動く方式があります。サーバー方式の例はMCP経由のUCPで、WebMCPはブラウザー内のエージェントがページ上のツールを使う方式です。
商品を探してカートを作る場面では、WebMCPのツールがページ上で商品検索や詳細確認、カート操作、チェックアウトへの移動を担います。エージェントの呼び出しは購入者のセッション内で実行されるため、開いているページの状態や認証を伴う操作ができます。
注文手続きでは、購入者のブラウザーを使うエージェントにはCheckout WebMCP、サーバー上で動くエージェントにはCheckout MCPを使います。両者はチェックアウトのデータ形式や状態、メッセージを共有し、実行場所に応じて接続方法が分かれます。
注文確定は購入者の画面で行う
Checkout WebMCPのツールは、購入者が開いているチェックアウト画面に登録されます。エージェントは画面上の注文内容を読み、連絡先や配送方法などを更新できますが、商品項目は購入者が画面上で変更します。
Shop Payへのログインや決済時の追加確認が必要な場合、購入者は同じタブで操作します。注文を確定するツールを呼び出す前に、エージェントが現在の注文内容と合計額を購入者に示し、確定の許可を得る手順が設けられています。
画面とツールの状態をそろえる
ツールがバックエンドのカートだけを更新すると、購入者の画面に変化が反映されず、エージェントから人へ操作を引き継ぎにくくなる場合があります。ShopifyのWebMCP実装では、カート操作を標準イベント経由でテーマにも通知し、人とエージェントが同じ実行経路を使う方法が示されています。
ページ遷移が起きると、登録済みのツールはいったん解除され、遷移先で再登録されます。ツールのローカル状態を保持する方法として、SessionStorageを使う案が挙げられています。
Commerce.comはWebMCPを各店舗で有効にする際、加盟店が選択できるようエッジ側のオプトアウトも用意しました。
