Playground
WebMCP · React state demo
Driving React State with a WebMCP Tool
The Filters panel registers a
setProductFilters
WebMCP tool on mount. The Tool Invoker
calls it the same way an AI agent would — via
getTools() then
executeTool(). Watch the product list update in real time.
Requires Chrome 149+ with chrome://flags/#enable-webmcp-testing enabled.
Filters
Registering…Wireless Headphoneselectronics$89In stock
Running Shoessports$120In stock
Coffee Makerhome$65Out of stock
Laptop Standelectronics$45In stock
Yoga Matsports$35In stock
Desk Lamphome$55Out of stock
Bluetooth Speakerelectronics$75In stock
Winter Jacketclothing$180In stock
Running Shortssports$40In stock
Throw Pillowhome$25In stock
Tool Invoker
Simulates an agent calling setProductFilters. Pick a preset or edit the JSON, then click Invoke — the filters and product list update instantly.