WebMCP for Shopify

Step-by-step: add WebMCP tools to a Shopify storefront so browser agents can search products, read details, and add to cart — using the Storefront AJAX API, an origin-trial token, and the @mcp-b polyfill.

Updated 2026-08-28 · webmcp-ai.dev research desk

Shopify stores are the ideal WebMCP candidates: high-intent actions (search, cart, checkout), a stable AJAX API already exposed on every storefront, and agents actively shopping — Shopify itself has been reported among the early WebMCP experimenters. This guide wires three tools into any theme, without an app.

Step 1 — Origin-trial token

Native WebMCP in Chrome 149–156 requires an origin-trial token. Register your storefront domain at developer.chrome.com/origintrials (trial: WebMCP), then add the token in theme.liquid inside <head>:

<meta http-equiv="origin-trial" content="YOUR_TOKEN_HERE">

Step 2 — Polyfill for non-trial browsers

The @mcp-b/webmcp-polyfill package provides the same modelContext surface for extension-based agents everywhere else. Add it via your theme's assets or a CDN bundle, before your tool registration script.

Step 3 — Register the tools

Create assets/webmcp-tools.js, include it from theme.liquid (<script src="{{ 'webmcp-tools.js' | asset_url }}" defer></script>), and wrap Shopify's storefront endpoints:

const mc = document.modelContext ?? navigator.modelContext;
if (mc) {
  mc.registerTool({
    name: "search_products",
    description: "Search this store's product catalog. Returns titles, prices, availability and product URLs.",
    inputSchema: { type: "object",
      properties: { query: { type: "string" } }, required: ["query"] },
    annotations: { readOnlyHint: true },
    async execute({ query }) {
      const r = await fetch(`/search/suggest.json?q=${encodeURIComponent(query)}&resources[type]=product&resources[limit]=8`);
      const data = await r.json();
      return data.resources.results.products.map(p => ({
        title: p.title, price: p.price, url: p.url, available: p.available
      }));
    }
  });

  mc.registerTool({
    name: "add_to_cart",
    description: "Add a product variant to the cart. Confirm the variant with the user first. Returns the cart state and checkout URL.",
    inputSchema: { type: "object",
      properties: { variantId: { type: "number" }, quantity: { type: "number", default: 1 } },
      required: ["variantId"] },
    async execute({ variantId, quantity = 1 }) {
      await fetch("/cart/add.js", { method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ items: [{ id: variantId, quantity }] }) });
      const cart = await (await fetch("/cart.js")).json();
      return { itemCount: cart.item_count, total: cart.total_price / 100,
               currency: cart.currency, checkoutUrl: "/checkout" };
    }
  });
}

Note what the add_to_cart tool does not do: it doesn't check out. The agent fills the cart in the shopper's real session; the human completes payment. That division is the WebMCP security model working as intended.

Step 4 — Verify

Install Google's Model Context Tool Inspector extension (from the GoogleChromeLabs webmcp-tools repo) and confirm all tools appear with valid schemas.
In Chrome DevTools, check the console for registration errors on page load.
Run our free scan — the capabilities category should now pass.

What else moves the needle for stores

Product JSON-LD with price and availability on every product page, an accurate llms.txt, and deliberate robots.txt decisions for shopping agents. The deep audit checks all of it and blueprints store-specific tools like check_return_policy and get_order_status.