WebMCP Testing: How to Test and Debug Tools

Use the pizza-maker demo to test a WebMCP tool in two ways: call it yourself in Inspector, then ask an agent to use it in Playground. Check both the tool response and what changed on the page.

What is WebMCP?

WebMCP is a proposed web standard that lets websites expose structured tools to AI agents. A page can describe actions through JavaScript or annotated HTML forms so an agent can discover and call them. The tools operate in the context of the website, making the visible page state part of what you need to test.

For WebMCP testing, check both layers: whether a tool works with known inputs and whether an agent selects it correctly from a natural-language request. MCPJam Inspector covers direct calls; Playground lets you inspect the agent's choices.

1. Open the WebMCP pizza demo in Inspector

Open the latest MCPJam Inspector. You can start it locally with:

npx @mcpjam/inspector@latest

Select the WebMCP tab. Paste the Google Chrome Labs pizza-maker demo URL into the website field and navigate to it:

https://googlechromelabs.github.io/webmcp-tools/demos/pizza-maker/

Once the page loads, Inspector lists the WebMCP tools it registers. The log panel on the right shows the session being created, navigation to the website, and tool registration.

If the tool list is empty, check those logs first. Confirm that navigation completed and that the page registered its tools before trying a call.

2. Test a WebMCP tool directly

Select the tool for adding a pizza topping. In the video, we choose pepperoni, set its size to medium, and add five.

Enter those values in the tool's input form, then invoke it. Look at two things:

• The page: did the pepperoni appear on the pizza?
• The call log: did the tool receive the values you entered, and what did it return?

This is the deterministic part of the test: you choose the tool and its inputs. No model decides which action to take. It lets you check the tool's behavior before introducing an agent.

Repeat the call with a different topping or count if you want to check another input. Keep track of the pizza's current state so you can tell what each call changed.

3. Try the same website in Playground

Switch to Playground to test the WebMCP tools with an agent. Use the same pizza-maker URL and ask for a simple change. For example:

Open https://googlechromelabs.github.io/webmcp-tools/demos/pizza-maker/ and add medium mushroom toppings to the pizza.

This follows the mushroom example in the video. Inspect the agent's calls as it navigates to the page and invokes the topping tool. Then check the pizza itself.

Did the agent select the right tool? Did it pass mushrooms and the requested size? Does the visible result match the request?

A successful direct call answers whether the tool works with inputs you supply. The Playground run checks whether the agent can get from a user's request to that call.

4. Debug WebMCP by comparing the results

If the direct call fails, start with its inputs, response, and the page state. If the direct call succeeds but the Playground run does not, compare the agent's chosen tool and arguments with the call you made yourself.

For a repeatable comparison, reset the pizza with the demo's Start Over button before each run. Try one request at a time, such as adding a topping or asking for a specific count. Confirm the result on the page rather than relying only on the agent's final message.

Once you've checked the demo, replace its URL with your own WebMCP-enabled website and follow the same steps.

Start testing your WebMCP website

Open MCPJam Inspector on GitHub or run the command above, select WebMCP, and enter your website URL. Start with one tool call, then test the same task with an agent in Playground.

Watch the WebMCP walkthrough on YouTube, or read how to test Skills over MCP in Playground.