WebMCP for Shopify: How to Make Your Store AI-Agent Ready

AI agents are starting to shop for people, and a Shopify store is a good place for them to do it: products, prices and stock already sit behind clean APIs. This guide shows how to add WebMCP tools to a Shopify storefront. New to the topic? Start with what WebMCP is.

WebMCP or Shopify’s own MCP?

Every Shopify store now has an MCP endpoint at /api/mcp, which AI apps can call for product search, carts and policies. That runs on Shopify’s servers and you do not control its tools. WebMCP is different: the tools live on your page, run in the shopper’s browser, and do exactly what you design, such as your own sizing advice or bundle rules. The two work well together. Our guide to WebMCP vs MCP explains the difference.

Where the code goes

• Theme: a script asset loaded from theme.liquid. Simple, and fine for one store, but it needs care when you change themes.
• Theme app extension: an app embed block that the merchant switches on in the theme editor. It survives theme changes and is the better route for agencies and several stores.

A product search tool

Shopify’s predictive search endpoint is public and returns what shoppers can already see, so it needs no private key:

const mc = document.modelContext || navigator.modelContext;
if (mc && mc.registerTool) {
  mc.registerTool({
    name: 'search_products',
    description: 'Search this store. Returns up to 5 products with price, availability and link.',
    inputSchema: {
      type: 'object',
      properties: { query: { type: 'string', description: 'Keywords, e.g. linen shirt' } },
      required: ['query'],
    },
    annotations: { readOnlyHint: true },
    execute: async ({ query }) => {
      const url = new URL('/search/suggest.json', location.origin);
      url.searchParams.set('q', String(query).slice(0, 80));
      url.searchParams.set('resources[type]', 'product');
      url.searchParams.set('resources[limit]', '5');
      const data = await (await fetch(url)).json();
      return JSON.stringify(data.resources.results.products.map((p) => ({
        name: p.title, price: p.price, available: p.available, url: p.url,
      })));
    },
  });
}

Cart actions need the shopper

A tool can call /cart/add.js with the shopper’s own session, but mark it with consequentialHint: true so the shopper approves first. Leave checkout and payment to the shopper. Do not put an Admin API token in storefront code: anything in the browser is public.

Safety rules

• Start read-only. Search and details first; mark them with readOnlyHint.
• Ask before acting. Mark cart, booking and form actions with consequentialHint, so the visitor confirms.
• Check on the server. The browser is not a security boundary, so validate every input and permission in your backend.
• Return little. Send only what a customer may see, never admin data or other customers’ records.

Test it

1. Use a recent Chrome with WebMCP turned on, through the origin trial or the testing flag.
2. Call each tool with good and bad inputs.
3. Check that normal visitors see no change.
4. Run the free WebMCP checker on the exact page where your tools live.

Want it done for you?

We add WebMCP tools to Shopify and other stacks, starting with a free readiness audit. See our WebMCP integration services.