One button. One counter. The agent presses it.

Start with a page that already works for humans.

Semantic HTML first. A real <button>, not a <div onClick>, so it surfaces in the accessibility tree and the click handler owns the state. The agent layer comes second and reuses this exact handler.

<button id="add-to-cart">Add to cart</button>
<span>Cart: <strong id="cart-count">0</strong></span>

<script>
  let cart = 0;

  // The one function both callers use.
  function addToCart(qty) {
    const n = Math.max(1, parseInt(qty, 10) || 1);
    cart += n;
    document.getElementById("cart-count").textContent = cart;
    return cart;
  }

  document.getElementById("add-to-cart")
    .addEventListener("click", () => addToCart(1));
</script>

Register add_to_cart. Ten lines.

Feature-detect, then register. The execute calls the same addToCart the button calls, and returns the new cart total as an MCP text result so the agent knows it worked. That return value is the agent's confirmation.

if (navigator.modelContext && typeof navigator.modelContext.registerTool === "function") {
  navigator.modelContext.registerTool({
    name: "add_to_cart",
    description: "Add the current product to the shopping cart. "
               + "Optionally pass how many units to add.",
    inputSchema: {
      type: "object",
      properties: {
        quantity: { type: "integer", minimum: 1, description: "Units to add. Defaults to 1." }
      }
    },
    execute: async (args) => {
      const total = addToCart(args && args.quantity);
      return { content: [{ type: "text", text: "Added to cart. New total: " + total + "." }] };
    }
  });
}

Click it as a human first.

Press Add to cart below. The counter ticks. The log records a human call. Nothing surprising yet. This is just a store.

Now let the agent press it.

Open the WebMCP Tool Inspector extension on this page. You will see add_to_cart in the tool list, with the schema you wrote. Invoke it with { "quantity": 3 }. Watch the counter jump by three and a new line appear tagged agent. Nobody touched the button. That is the whole demo, and it lands every time.

No Canary set up yet? The Simulate agent call button runs the tool's own execute locally so you can see the agent path first, then wire up the real inspector.

{ "content": [ { "type": "text", "text": "Added to cart. New total: 3." } ] }