Skip to main content
Guide

WebMCP Is How AI Agents Will Use Your Store. Here's How to Be Ready.

Chrome 146 shipped WebMCP behind a flag. It turns HTML forms into structured tools that AI agents can call directly. No API needed. Here's what merchants need to implement.

Colter Team·

WebMCP Is How AI Agents Will Use Your Store. Here's How to Be Ready.

WebMCP is a W3C Community Group draft specification that turns HTML forms into structured tools that AI agents can discover and call. Chrome 146 shipped it behind chrome://flags/#web-mcp. No API, no backend changes, no protocol server to build. You add attributes to your existing HTML forms and agents can use them.

This is the first merchant-facing guide to implementing it.

Why This Matters for Commerce

Today, an AI agent that wants to interact with your store has two options. It can use a structured API — UCP for discovery, MCP for tool calling — which requires real backend work. Or it can use browser automation, clicking buttons and filling forms like a slow, brittle human.

WebMCP creates a third path. Agents read your existing HTML forms, see what tools are available, and call them directly. The form is the API. Your search bar becomes a structured query tool. Your add-to-cart button becomes a callable action. No API to build, no protocol server to run, no Shopify app to install.

For merchants, this is the lowest-effort way to make your store agent-interactive. You're adding HTML attributes to forms that already exist. If your store has a search bar and a cart, you're 80% of the way there.

How It Works

WebMCP introduces four HTML attributes:

  • toolcallable — Marks a form as agent-callable. Without this, agents ignore the form.
  • toolname — A machine-readable name for the tool (e.g., product-search, add-to-cart).
  • tooldescription — A plain-English description of what the form does. Agents use this to decide which tool to call.
  • toolautosubmit — Allows the agent to submit the form without asking the user first. More on this below — it's the most important design decision you'll make.

An agent lands on your page, scans the DOM for toolcallable forms, reads their names and descriptions, maps the form fields to parameters, and calls the appropriate tool. The form submission happens through standard HTTP — same as if a human clicked submit.

The 6 Forms Every E-Commerce Store Needs

Here's what to implement, with code.

Your search bar, declared as an agent tool.

<form
  action="/search"
  method="GET"
  toolcallable
  toolname="product-search"
  tooldescription="Search the product catalog by keyword, category, or attribute. Returns a list of matching products with prices."
  toolautosubmit
>
  <input type="text" name="q" placeholder="Search products..." required />
  <input type="hidden" name="sort" value="relevance" />
  <button type="submit">Search</button>
</form>

Note toolautosubmit here. Search is read-only. There's no reason to gate it behind user confirmation.

2. Product Detail Lookup

Let agents request a specific product by ID. This form can live on your collection pages or be a hidden utility form.

<form
  action="/products/lookup"
  method="GET"
  toolcallable
  toolname="product-detail"
  tooldescription="Get full product details by product ID, including price, description, variants, availability, and images."
  toolautosubmit
>
  <input type="hidden" name="id" />
  <button type="submit">View Product</button>
</form>

3. Add to Cart

This is where agents start modifying state.

<form
  action="/cart/add"
  method="POST"
  toolcallable
  toolname="add-to-cart"
  tooldescription="Add a product to the shopping cart. Requires product ID and quantity. Optionally accepts a variant ID for products with size/color options."
>
  <input type="hidden" name="product_id" required />
  <input type="number" name="quantity" value="1" min="1" />
  <input type="hidden" name="variant_id" />
  <button type="submit">Add to Cart</button>
</form>

No toolautosubmit. The agent should confirm with the user before adding items. "I found the Nike Air Max 90 in size 11 for $130. Want me to add it to your cart?" That confirmation step is what makes agent shopping feel trustworthy instead of invasive.

4. Update Cart Quantity

<form
  action="/cart/update"
  method="POST"
  toolcallable
  toolname="update-cart-item"
  tooldescription="Update the quantity of an item already in the cart. Set quantity to 0 to remove."
>
  <input type="hidden" name="line_item_id" required />
  <input type="number" name="quantity" min="0" required />
  <button type="submit">Update</button>
</form>

5. Remove from Cart

A dedicated remove action, separate from the update form. Some platforms handle these differently on the backend, and giving agents a clear "remove" tool reduces ambiguity.

<form
  action="/cart/remove"
  method="POST"
  toolcallable
  toolname="remove-from-cart"
  tooldescription="Remove an item from the shopping cart by line item ID."
>
  <input type="hidden" name="line_item_id" required />
  <button type="submit">Remove</button>
</form>

6. Checkout Initiation

<form
  action="/checkout"
  method="POST"
  toolcallable
  toolname="initiate-checkout"
  tooldescription="Begin the checkout process with the current cart contents. Redirects to the checkout page where the user completes payment."
>
  <button type="submit">Proceed to Checkout</button>
</form>

No toolautosubmit. An agent should never silently initiate checkout. This is the form where explicit user consent is non-negotiable.

The toolautosubmit Decision

This attribute is the most consequential choice in your WebMCP implementation. It controls whether an agent can act on its own or needs to pause and ask the user.

Use toolautosubmit for:

  • Product search
  • Product detail lookup
  • Filtering and sorting
  • Checking stock availability
  • Viewing store policies

These are all read-only operations. The user loses nothing if the agent runs them autonomously. Speed matters here — an agent that asks "Can I search for running shoes?" before every query is useless.

Do not use toolautosubmit for:

  • Add to cart
  • Remove from cart
  • Quantity changes
  • Checkout initiation
  • Applying discount codes
  • Any action that modifies state or commits the user to something

The line is simple: if the action is reversible and read-only, auto-submit. If it changes the cart, costs money, or creates a commitment, require confirmation. Merchants who get this wrong will either build agents that feel annoying (confirming every search) or agents that feel dangerous (silently buying things).

Platform-Specific Guidance

Shopify (Liquid)

Add WebMCP forms to your theme's Liquid templates. Product search goes in sections/header.liquid or your search component. Add-to-cart lives in sections/main-product.liquid — augment the existing product form with the toolcallable, toolname, and tooldescription attributes. Cart update and remove forms go in sections/main-cart.liquid. Shopify's AJAX cart API endpoints (/cart/add.js, /cart/change.js) work with standard form submissions, so your existing endpoints are compatible.

WooCommerce

Modify searchform.php for product search. The add-to-cart form lives in templates/single-product/add-to-cart/simple.php and variable.php — add WebMCP attributes to the existing <form> tags. Cart operations go in templates/cart/cart.php. WooCommerce's form-based architecture maps cleanly to WebMCP since these are already real HTML forms with POST actions.

Headless / Custom

You have the most flexibility. Add the forms directly to your component templates. If you're using React or Vue, render the WebMCP attributes as standard HTML attributes on your <form> elements. The forms need to be present in the server-rendered HTML for agents to discover them — client-side-only rendering won't work if the agent is reading the initial page load. Make sure your SSR output includes the toolcallable forms.

The Discovery Gap (And Why It Matters)

WebMCP solves interaction. It does not solve discovery.

An agent can only read your WebMCP forms if it's already on your page. The specification defines how to declare tools, not how agents find your store in the first place. There's no WebMCP registry, no crawl index, no "here are all the stores with toolcallable forms."

This is an intentional design boundary. WebMCP handles what happens when an agent is on your site. Other protocols handle getting the agent there:

  • UCP handles discovery and transaction routing. Google's AI agents use UCP to find stores and products.
  • llms.txt tells agents how your site works, what it sells, and how to interact with it.
  • JSON-LD Product markup gives agents structured product data before they ever submit a form.
  • MCP exposes server-side tools that agents can call remotely, without visiting a page at all.

WebMCP sits downstream of all of these. An agent discovers your store via UCP, reads your llms.txt for context, uses JSON-LD to understand your product catalog, and then uses WebMCP forms to actually do things: search, add to cart, check out.

A store with WebMCP but no discovery layer is a vending machine in a locked room. Technically functional. Practically useless. Implement WebMCP alongside your discovery protocols, not instead of them.

Testing Your Implementation

Enable the Flag

Open Chrome 146 or later. Navigate to chrome://flags/#web-mcp and set it to Enabled. Restart the browser. Chrome will now recognize toolcallable form attributes and expose them through the WebMCP API.

Inspect in DevTools

Open DevTools on your product page. In the Console, you can query for toolcallable forms:

document.querySelectorAll('form[toolcallable]').forEach(form => {
  console.log({
    name: form.getAttribute('toolname'),
    description: form.getAttribute('tooldescription'),
    autosubmit: form.hasAttribute('toolautosubmit'),
    fields: [...form.elements].map(el => el.name).filter(Boolean)
  });
});

This shows you exactly what an agent sees: tool names, descriptions, whether auto-submit is enabled, and what parameters each tool accepts. If the output doesn't match your intent, the agent won't behave the way you expect.

Run a Colter Check

Colter Check scans for WebMCP form declarations alongside UCP manifests, llms.txt, JSON-LD, and other agent readiness signals. It'll tell you which forms were detected, whether they're well-formed, and how they fit into your overall agent readiness posture.

Timing

WebMCP is behind a flag. It is not widely deployed. Most AI agents are not yet reading toolcallable forms in production. This is early.

But "early" is exactly when implementation costs nothing and positioning costs everything. Adding these attributes to your existing forms is a few hours of work at most. There is no downside — the attributes are invisible to humans and ignored by browsers that don't support WebMCP. You're adding capability without breaking anything.

The pattern is familiar. HTTPS was optional, then preferred, then required. JSON-LD was a nice-to-have, then a ranking signal. UCP is following the same arc. WebMCP will too. Merchants who implement now will already be indexed and tested when agents start using it at scale.

The cost of implementing now is a few hours. The cost of implementing late is playing catch-up while your competitors are already converting agent traffic.

Check Your Store

Colter Check scans your store for WebMCP form declarations, UCP manifests, llms.txt, JSON-LD, and every other signal that AI agents look for. Free, no account required. Takes 30 seconds.

Check your store's agent readiness

For a full map of how WebMCP fits alongside UCP, ACP, MCP, and MPP, see our Agentic Commerce Protocol Stack guide.

See how your store scores

Free instant scan across 5 readiness dimensions. No account required.

Check your store free
← All posts