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. A browser agent can call them, or you can run them yourself in the inspector.
Try it in 30 seconds
- Copy the prompt below.
- Paste it into an AI agent that can browse the web. Gemini in Chrome is the first agent built to use WebMCP, but you can try any agent and see what it does.
- Read its answer. The prompt asks it to say whether it used WebMCP tools or just clicked around the page.
Go to https://kylerisley.com/tools/webmcp-playground/. It's a test store that offers WebMCP tools. If you can call WebMCP tools, use them instead of clicking: search for a pour-over kettle, add one to my cart, then show me my cart. Don't check out. Then tell me whether you used WebMCP tools or clicked the page, and which tools you called.
If the agent works in this browser, you can also watch the Activity log below. Entries marked agent mean it used WebMCP. If the cart changed but no agent entries appear, it clicked the buttons instead. Agents that run in their own browser have their own copy of this page, so their calls won't show here.
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.