WebMCP Playground
A small store that offers its features to AI agents as WebMCP tools.
WebMCP lets a web page register tools with the browser through document.modelContext.registerTool(). Each tool has a name, a description, a JSON Schema for its input, and a function that runs in the page. A browser agent can call the tools instead of reading the screen and clicking buttons.
This page registers 8 tools against the store below. If your browser has an agent that supports WebMCP, ask it to "find a pour-over kettle and add it to my cart" and watch the activity log. If it doesn't, use the inspector to run the same tools yourself.
Browser support
What this page detected in your browser.
Clients you can test with
- Chrome: works on this page during Chrome's WebMCP origin trial (Chrome 149–162). For other pages or localhost, turn on
chrome://flags/#enable-webmcp-testing. Gemini in Chrome is the first built-in agent to use WebMCP tools. - Microsoft Edge: experimental support behind a flag in
edge://flags(search "WebMCP"). - Inspector extensions: the Model Context Tool Inspector and MCP-B extensions list the tools a page registers and let you call them.
Approve agent checkout?
Store
The state the tools act on. Agent and inspector calls show up here as they happen. Nothing is charged; reloading the page resets everything.
Cart
Orders
Checkout form (declarative WebMCP)
This form uses the proposed declarative attributes toolname, tooldescription and toolparamdescription, so an agent can fill it in without any JavaScript tool. The spec section for these is still a draft. Without toolautosubmit, the agent fills the form and you submit it.
Tool inspector
Every tool this page registers. Run one to call it the way an agent would. Untick "Registered" to unregister a tool and watch it disappear from your agent's tool list.
Tool calls, results and WebMCP events, newest first. Calls are labeled agent or inspector.
Nothing yet.