Shopifyに新たに搭載されたWebMCPを調べてみた

Shopifyに新たに搭載されたWebMCPを調べてみた

2026年8月5日、Shopify が Liquid / Hydrogen の全ストアフロントに WebMCP を自動搭載したという告知がありました。設定は不要で、対応済みのストアなら今日この瞬間から動いています。実際に自分のストアと、無関係の大手ストアで動かしてみたので、その記録です。特に結論はありません。調べてみた内容をそのまま書きます。

WebMCPとは何か

WebMCP（Web Model Context Protocol）は、Webページがブラウザに対して「この操作ができます」という道具（ツール）を登録できる、策定中のWeb標準です。ページ側が document.modelContext.registerTool() を呼ぶと、その場でブラウザに道具が生まれます。ブラウザ内のAIエージェントは、そのページのHTMLを読んでクリックを再現する代わりに、道具を直接呼び出せます。

Shopify側の公式ドキュメントには、対応済みストアで自動搭載される10種の道具が挙げられています。

  • search_catalog / browse_store / get_product / show_variant — 検索・閲覧・商品詳細
  • get_cart / update_cart / cancel_cart — カート操作
  • proceed_to_checkout / manage_orders — 購入・注文確認
  • search_shop_policies_and_faqs — ポリシー・FAQ

UCPとは別物、役割が異なる。

Shopifyには既に UCP（Universal Commerce Protocol）があります。Google・OpenAI・Microsoftのような大手と個別に提携し、Shopify側が用意したサーバー（Storefront MCP・Cart MCP・Checkout MCP）にエージェントが接続する仕組みです。WebMCPのドキュメントには、この2つの使い分けがそのまま書かれていました。

"These tools serve agents that shoppers bring to your store in their browser. If you're building your own agent that connects to Shopify's MCP servers, refer to Storefront MCP and Agentic commerce."

つまり、UCPはShopifyと契約済みのエージェント向けの専用レーン、WebMCPは買い物客が自分で連れてきた、素性を問わないエージェント向けの一般道という役割分担です。そしてUCPが「エージェントにストアを見つけてもらう」ための仕組み（Global Catalog・Agentic Storefronts）を含むのに対し、WebMCPはすでにページを開いた後の行動だけを担います。見つけてもらう手段ではありません。

実際に動くか確かめてみた

まず素朴な疑問として、これは静的にページを取得しただけで見えるものかを確認しました。HTMLをテキストとして取得する方法では、webmcp や modelContext の痕跡は一切見つかりませんでした。

理由は、該当のスクリプトが最初からHTMLに書かれているのではなく、<head> にあるインラインの小さなローダーが、条件を満たしたときだけ外部スクリプト（webmcp-0.1.0.js）を動的に生成して挿入する仕組みだったためです。つまり実際にブラウザでJavaScriptを実行しない限り、存在すら分からない設計になっています。

そこで、実ブラウザのJS実行コンテキストに入れる方法で確認したところ、自分のストア（store-dojo.com）でも、無関係の大手ストア（Allbirds）でも、まったく同じ10個の道具が存在していました。

コンソールでdocument.modelContext.getTools()を実行した結果。10個の道具名が返っている

document.modelContext.getTools() を実行した結果

実際に商品を検索してカートに入れてみた

道具が存在することは分かったので、実際に呼び出して操作させてみました。

手順はこうです。

  1. browse_store でコレクション・商品一覧を取得
  2. get_product で商品詳細とバリアントIDを取得
  3. update_cart でカートに追加
  4. cancel_cart でカートを空に戻す

結果、実際のカート画面に商品が反映されました。実際にレンダリングされた /cart ページで目視確認しています。

サンプルストアのカート画面。JSのAPI呼び出しで追加した商品が実際に表示されている

ボタンを押さず、JavaScriptのAPI呼び出しだけでカートに反映された状態

ここで大事なのは、マウスで「カートに追加」ボタンをクリックしていないということです。公式ドキュメントにはこう書かれています。

"Cart tools call standard storefront actions, the same functions on Shopify.actions that apps use to update the cart"

ボタンを押したときに裏で動く関数そのものを、ボタンを介さず直接呼んだ、というのが実態です。結果は同じでも、経路がまったく違います。

実装の細かい癖

やってみて分かった、ドキュメントに書かれていない部分です。

  • getTools() が返す道具に execute 関数は無く、別途 document.modelContext.executeTool(tool, argsJson) を呼ぶ必要がある
  • 引数はJavaScriptオブジェクトではなく、JSON文字列化したものを渡す必要がある。オブジェクトのまま渡すと Failed to parse input arguments で失敗する
  • update_cart の商品指定は {item: {id: ...}} という入れ子構造。フラットな指定では通らない
  • 実行結果には「もう一度呼ぶな、これが正となる状態だ」というAIへの注意書きが埋め込まれている。同じ操作の重複実行を防ぐための工夫と見られる

使う側がまだ準備出来ていない

ここまでは「実行する側（私）が特殊な経路を持っていたから動いた」という話です。実際のAIがこれを使っているのかを、Chrome DevTools内蔵のAI（Gemini）に直接聞いてみました。

回答は「使えない」でした。理由として、実際のブラウザ画面上でボタンをクリックしたりフォームに入力・送信したりする操作機能が実装されていないこと、そしてユーザーの意図しないカート追加や決済進行を防ぐための制限、という2点が挙げられていました。読み取りと解説はできるが、実行はしない、という製品側の設計判断のようです。

つまり土台は3層あって、今動いているのは2層目までです。

  • ① Shopify側（サーバー）— 対応済み
  • ② ブラウザのJS API — 対応済み（Chrome上で実在を確認）
  • ③ 実際のAIエージェント本体 — まだ接続されていない（Google自身のGeminiも含めて）

まとめ

今回調べて分かったのは次の3点です。

  • ShopifyのLiquid / Hydrogenストア全体に、WebMCPが個別提携ゼロで自動搭載されている
  • 実際にJavaScriptから商品検索・カート追加まで動かせることを、自分のストアと第三者の本番ストアの両方で確認できた
  • ただし、この道具を実際に使う側（AIエージェント製品）はまだ来ていない。Google自身のGeminiも今のところ使わない設計になっている

土台はもう置かれていて、動かせることも確認できました。あとは使う側がいつ追いついてくるか、というところだと思います。しばらくは様子を見ながら、また試してみようと思います。

参照

Back to blog