WebMCP Documentation

In this tutorial, we will enable Chrome’s native WebMCP preview, open a live GoogleChromeLabs demo, and inspect its tools with the Model Context Tool Inspector linked from Chrome’s WebMCP documentation. By the end, you will have used document.modelContext in Chrome without installing an MCP-B runtime.

WebMCP is an experimental browser preview. The flag name and API can change between Chrome releases. Follow Chrome’s imperative API guide for the current native surface. 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 recommended by Chrome’s WebMCP documentation
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

Chrome’s WebMCP documentation links to this extension for inspecting native WebMCP pages.

Open the 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:

Check the WebMCP surface

console.log('modelContext:', !!document.modelContext);
console.log('getTools:', typeof document.modelContext?.getTools);
console.log('executeTool:', typeof document.modelContext?.executeTool);

You should see:

Expected console output

modelContext: true
getTools: function
executeTool: function

List the demo tools

Run:

List registered tools

const tools = await document.modelContext.getTools();
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 document.modelContext.getTools() are now showing the same native tool surface.

Execute a tool

Run this in the console:

Execute add_topping

const modelContext = document.modelContext;
const addTopping = tools.find((tool) => tool.name === 'add_topping');
if (!addTopping) throw new Error('add_topping is unavailable');

const executeTool = modelContext.executeTool;
if (typeof executeTool !== 'function') {
  throw new Error('This Chrome build does not expose the optional executeTool extension');
}

const result = await executeTool.call(modelContext, addTopping, 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.

What you learned

Chrome can expose document.modelContext locally behind the chrome://flags/#enable-webmcp-testing flag
document.modelContext.getTools() discovers tools, and Chrome’s feature-detected executeTool() extension executes a discovered tool
Chrome’s WebMCP documentation recommends the Model Context Tool Inspector for inspecting native tools
The GoogleChromeLabs demos provide a convenient view of current native behavior

Next steps

Build your first tool to take the portable polyfill path
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