WebMCP in this store

WebMCP is a browser API, shipping in Chrome behind an origin trial, that lets a page register tools on document.modelContext. A browser-based agent can then read those tools and call them directly instead of guessing at buttons and forms. Each tool has a name, a description written for the model, a JSON Schema for its input, and an execute function that returns text the agent can read.

This store uses nextjs-webmcp to register tools from React components, so they follow the App Router: the root layout provides search_products, get_cart, update_quantity, remove_item, navigate_to and start_checkout; a product page adds get_product and add_to_cart; a search page adds refine_results. Tools unregister when their route unmounts. The newsletter form in the footer is a declarative tool (subscribe_newsletter) that Chrome fills in and submits by itself.

Every tool call updates the page, so the shopper can see what the agent did: adding an item opens the cart, refining results changes the URL, and start_checkout opens the checkout page. The panel in the bottom-right corner lists the registered tools, runs them with sample arguments, and logs each call.