Demo store — explore freely. Orders are test-only; nothing ships.
Northbound Coffee Roasters

Northbound Coffee Roasters

Agent tools on this storefront

This shop speaks WebMCP: the pages register typed, page-contextual tools via document.modelContext, so an in-browser AI agent acts through a real API instead of guessing at the DOM — while the human keeps the checkout.

Tools on this storefront

Tools register per route — progressive disclosure: an agent only ever sees the collection that makes sense on the page it is on. Contextual tools appear and disappear as you navigate; keep this page open in a second tab, browse the shop, and watch the live list below change.

Site-wide (every page)

Registered by the storefront layout the moment any page loads.

  • search_products→ products.search
  • get_cart→ cart.get_summary
  • navigateno data operation (navigation / pure compute / human-confirmed form)

Catalogue page (contextual)

The listing page teaches the agent its own filters — the visible product set and a schema built from the live categories.

  • list_visible_products→ products.search
  • filter_productsno data operation (navigation / pure compute / human-confirmed form)

Product page (contextual)

The PDP sells its own product: the tool description carries the page's name, price, variants and stock.

  • add_current_product_to_cart→ cart.add

Cart page (contextual)

Line-level editing with verifiable returns — every mutation answers with the fresh cart.

  • update_cart_item_quantity→ cart.update_quantity
  • remove_cart_item→ cart.remove
  • go_to_checkoutno data operation (navigation / pure compute / human-confirmed form)

Declarative forms

The forms themselves are the tools (toolname/tooldescription attributes + SubmitEvent.respondWith). Autosubmit only on read-only search; the human confirms communication.

  • site_searchno data operation (navigation / pure compute / human-confirmed form)
  • contact_storeno data operation (navigation / pure compute / human-confirmed form)
  • newsletter_signupno data operation (navigation / pure compute / human-confirmed form)

Design pack — Crema (cinematic dark roast)

The active design ships its own tools: a page capability the human uses as a widget, typed for agents from the same math.

  • calculate_brew_rationo data operation (navigation / pure compute / human-confirmed form)

I want to…

Pick the outcome, get the tool — with a copyable example input.

search_products — registers on: any page

{
  "query": "ethiopia",
  "limit": 5
}

Example input — the live schema is built from this page's real data. Run it in Chrome DevTools → Application → WebMCP, or ask an agent.

The safety moat

Every registered tool declares which customer-safe operation it maps to, and a unit test holds the whole browser surface to the products.* / cart.* families — across the layout, the per-route mounts and design packs. No order-placing tool exists in this browser. Checkout is deliberately tool-free: go_to_checkout only opens the page, and the purchase stays the human's. Every cart mutation returns the fresh cart so an agent can verify what actually happened instead of assuming.

Try it yourself

  • ChatGPT desktop app: open this site in the built-in browser and ask ChatGPT to use the shop — WebMCP is supported natively.
  • Chrome 146+: enable chrome://flags/#enable-webmcp-testing and reload (Chrome 149+ can also run it via an origin trial, no flag needed).
  • Chrome DevTools → Application → WebMCP: lists every tool with its schema, logs invocations, and lets you run a tool by hand.
  • WebMCP Inspector (Chrome extension): shows every tool registered on the current page and lets you invoke them with custom input.
  • Any other browser: this page loads the Chrome team's WebMCP polyfill (Apache-2.0) as a fallback, so the live check below works everywhere — the panel says when the polyfill is active.

Live check — this browser, this page

Checking…