Inventory belongs in the handler
The schema checks the quantity type. The handler checks remaining stock, including items already in the cart. Try adding 10 backpacks to see an intentional failure.
Industry playground / Commerce
WebMCP e-commerce demo.
Search a catalog, check inventory, and build a demo cart with the same functions an agent can call.
Checking browser support…Browser setup
Commerce playground
NORTH / SUPPLY
Find your everyday carry.
Search a catalog, check inventory, and build a demo cart with the same functions an agent can call.
4 resultsShared page state
Everyday backpack
22L · Recycled canvas
backpack$89
Steel water bottle
750ml · Insulated steel
bottle$28
Travel organizer
Compact · Three compartments
organizer$34
Studio headphones
Wireless · Out of stock
headphones$129
Demo cart
Local onlyYour cart is empty. Add a product to see shared state in action.
Tool inspector5 tools
Filter the visible demo catalog by search text and maximum USD price. Does not place an order.
Arguments
Schema
Code
Last result
// Run a tool to inspect its result.
Run tool calls the local handler directly. Native agent calls appear as “Native WebMCP” in the trace.
Try a complete workflow
Find products under $100, add a backpack, then prepare checkout.
What this example teaches
Preparing is different from purchasing
The checkout tool creates a review. Only the visible confirmation control completes this fictional order. A real shop would verify prices, inventory and authorization on its server.
Common questions
Does this place a real order?
No. Products and prices are fixtures. The cart lives only in this browser page and resets on reload.
How would this work with Shopify?
Connect the tool handlers to your authorized storefront cart operations and keep checkout in your existing purchase flow. This example is not a Shopify integration.
API references reviewed September 7, 2026.Chrome imperative API