Skip to main content
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 navigator.modelContext API running in Chrome without any MCP-B runtime involved.
WebMCP is available behind a flag in Chrome 146 and later. This is an experimental preview and the API may change between Chrome versions. For production use, follow the polyfill path in Build Your First Tool.

​
Prerequisites

  • Chrome version 146.0.7672.0 or later
  • The ability to install a Chrome extension

​
What we will use

1

Enable the WebMCP flag

  1. Open Chrome and navigate to chrome://flags/#enable-webmcp-testing
  2. Set WebMCP for testing to Enabled
  3. Click Relaunch
Chrome restarts with the native WebMCP preview enabled.
2

Install the Model Context Tool Inspector

  1. Open the Model Context Tool Inspector in the Chrome Web Store
  2. Click Add to Chrome
  3. Pin the extension so you can open it quickly
This is the Chrome team’s own inspection tool for native WebMCP pages.
3

Open the official demo

  1. Open the pizza-maker demo
  2. Wait for the page to finish loading
  3. Open DevTools and switch to the console
You are now on a page that registers tools through Chrome’s native preview.
4

Verify the native APIs are available

Run:
console.log("modelContext:", !!navigator.modelContext);
console.log("modelContextTesting:", !!navigator.modelContextTesting);
You should see:
modelContext: true
modelContextTesting: true
5

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.
6

Inspect the same tools in the extension

  1. Click the Model Context Tool Inspector while the demo tab is active
  2. Open its panel
  3. Confirm that the same tool list appears there
The extension and navigator.modelContextTesting are now showing the same native tool surface.
7

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.
8

Confirm that no MCP-B runtime is involved

Run:
console.log("Constructor:", navigator.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 146+ provides a native navigator.modelContext API 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