WebMCP Documentation

In this tutorial, we will enable Chrome’s native WebMCP preview, open one of the Chrome team’s live demos, and inspect its tools with the official Model Context Tool Inspector. By the end, you will have seen the native document.modelContext API running in Chrome without any MCP-B runtime involved.

WebMCP is an experimental browser preview. The flag name and API can change between Chrome releases. For production use, follow the polyfill path in Build Your First Tool.

Prerequisites

A current Chrome channel that exposes the WebMCP testing flag
The ability to install a Chrome extension

What we will use

the Chrome flag that enables the preview
the Model Context Tool Inspector
the pizza-maker demo

Enable the WebMCP flag

Open Chrome and navigate to chrome://flags/#enable-webmcp-testing
Set WebMCP for testing to Enabled
Click Relaunch

Chrome restarts with the native WebMCP preview enabled.

Install the Model Context Tool Inspector

Open the Model Context Tool Inspector in the Chrome Web Store
Click Add to Chrome
Pin the extension so you can open it quickly

This is the Chrome team’s own inspection tool for native WebMCP pages.

Open the official demo

Open the pizza-maker demo
Wait for the page to finish loading
Open DevTools and switch to the console

You are now on a page that registers tools through Chrome’s native preview.

Verify the native APIs are available

Run:

console.log('modelContext:', !!document.modelContext);
console.log('modelContextTesting:', !!navigator.modelContextTesting);

You should see:

modelContext: true
modelContextTesting: true

List the demo tools

Run:

const tools = navigator.modelContextTesting.listTools();
console.log(tools);

You should see tool metadata from the demo. On the pizza demo, the list includes tools such as set_pizza_size, set_pizza_style, toggle_layer, and add_topping.

Inspect the same tools in the extension

Click the Model Context Tool Inspector while the demo tab is active
Open its panel
Confirm that the same tool list appears there

The extension and navigator.modelContextTesting are now showing the same native tool surface.

Execute a tool

Run this in the console:

const result = await navigator.modelContextTesting.executeTool(
  'add_topping',
  JSON.stringify({ topping: '🍄' })
);
console.log(result);

You should see the pizza update in the page, and the console should show the tool result. Now execute the same tool from the extension panel and compare the output.

Confirm that no MCP-B runtime is involved

Run:

console.log('Constructor:', document.modelContext.constructor.name);

On this Chrome-team demo, there is no @mcp-b/global or @mcp-b/webmcp-polyfill involved. You are looking at the browser preview itself.

What you learned

Chrome preview builds can expose document.modelContext behind the chrome://flags/#enable-webmcp-testing flag
Chrome also exposes navigator.modelContextTesting for inspection and execution during the preview
The Model Context Tool Inspector is the official Chrome-side inspection tool
The Chrome demos are the best place to see current native behavior without local setup drift

Next steps

Build Your First Tool to take the polyfill path for browsers people actually use today
Test Native and Polyfill Runtimes for repeatable browser test setup
What Is WebMCP? for the standard-level picture

Tutorials

Try the Native Chrome Preview

Prerequisites

What we will use

What you learned

Next steps

​Prerequisites

​What we will use

​What you learned

​Next steps

Prerequisites

What we will use

What you learned

Next steps