Skip to content

WebMCP

Last updated View as MarkdownAgent setup

WebMCP ↗︎ (Web Model Context Protocol) is a browser API that lets websites expose structured tools for AI agents to discover and execute directly. Instead of slow screenshot-analyze-click loops, agents can call website functions like searchFlights() or bookTicket() with typed parameters, making browser automation faster, more reliable, and less fragile.

Browser Run supports WebMCP through two browser backends:

  • Chrome Lab: Start a session with lab=true, wrangler browser create --lab, or lab: true in the launch() options of @cloudflare/puppeteer or @cloudflare/playwright.
  • Kitesurf: Add browser=kitesurf to the CDP WebSocket URL.

Pages register tools with document.modelContext, as defined in the WebMCP Community Group draft ↗︎. Both backends support the WebMCP CDP domain, which CDP clients and Chrome DevTools MCP use to list and run page tools. You can also run tools from the Application > WebMCP panel in Chrome DevTools, in the live view of a Lab session or in the Kitesurf playground ↗︎.

Get started

Manual testing with DevTools

1. Start a Lab session and open DevTools

WebMCP is an experimental Chrome feature, so it requires a lab session. Browser Run has an experimental pool with browser instances that enable experimental Chrome features so you can test new browser features before they reach stable Chrome. Your production workloads on the standard pool remain on a stable version of Chrome.

Lab sessions are experimental and should not be used for production workloads.

Use the new wrangler browser command to acquire a lab browser session:

# make sure you have the latest version of wrangler
npm i -g wrangler@latest

# create a lab browser session with 5 minute keep-alive
wrangler browser create --lab --keepAlive 300

It will open a live view of your browser session.

2. Interact with the page

You can now interact with the page as you would in a regular browser.

  1. Go to one of the sites listed in the WebMCP documentation ↗︎. The following instructions are based on the L'Atelier Hotel Chain ↗︎ demo.
  2. Open the hotel chain demo URL ↗︎ and then, in Chrome DevTools, select Application > WebMCP.

The Available Tools list shows the tools registered by the page: lookup_amenity, search_location, and view_hotel. To run a tool, select it, enter its input, and select Run tool. The Tool Activity list shows each call's status, input, and output. For details, refer to Debug WebMCP tools in Chrome DevTools ↗︎.

The list of tools changes depending on the website you are visiting and the actions you have performed on the page.

For instance, on the hotel chain website, after executing the search_location tool with this input:

{ "query": "Paris" }

The page redirects to the search results, and a new tool filter_search_results becomes available.

You can call it to filter by amenities. For example, if you want to eat a good croissant in the morning:

{ "amenities": ["breakfast"] }

You will get a list of filtered results, where you can pick the best option for your needs. Once you select a hotel, you can use the start_booking tool with an empty input:

{}

Then, you can complete the booking with complete_booking:

{
	"firstName": "James",
	"lastName": "Bond",
	"email": "james.bond@mi6.gov.uk"
}

Note that the complete_booking tool requires human confirmation. The tool waits until you select the Confirm Reservation button in the browser. This is an example of human-in-the-loop (HITL): WebMCP tools can pause execution and wait for user interaction before completing sensitive actions.

After you select Confirm Reservation, you will get a confirmation message and the booking is complete.

Using an AI Agent

1. Configure Chrome DevTools MCP

Chrome DevTools MCP ↗︎ allows AI agents to control a browser via CDP. Configure your MCP client (such as Claude Desktop, Claude Code, Cursor, or OpenCode) with the following settings. For more details on MCP client configuration, refer to Using with MCP clients.

{
	"browser-rendering-cdp": {
		"command": [
			"npx",
			"-y",
			"chrome-devtools-mcp@latest",
			"--wsEndpoint=wss://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/browser-run/devtools/browser?keep_alive=600000&lab=true",
			"--wsHeaders={\"Authorization\":\"Bearer <CLOUDFLARE_API_TOKEN>\"}",
			"--category-experimental-webmcp"
		]
	}
}

Replace <ACCOUNT_ID> with your Cloudflare account ID and <CLOUDFLARE_API_TOKEN> with your API token. The lab=true parameter ensures the agent connects to a lab session with WebMCP enabled. To use Kitesurf instead, replace keep_alive=600000&lab=true with browser=kitesurf. Kitesurf does not accept keep_alive.

The --category-experimental-webmcp flag adds the list_webmcp_tools and execute_webmcp_tool tools to Chrome DevTools MCP.

2. Interact with WebMCP sites

Once configured, your AI agent can navigate to WebMCP-enabled sites and use WebMCP tools. Here is an example conversation:

You: Go to https://googlechromelabs.github.io/webmcp-tools/demos/hotel-chain/ ↗︎ and find me a hotel in Paris with breakfast. Use WebMCP tools when available.

Agent navigates to the site, lists WebMCP tools, executes search_location with "Paris", then filter_search_results with breakfast amenity, and presents the results.

You: Pick the first one and book it for Bond, James Bond (james.bond@mi6.gov.uk).

Agent clicks the hotel, executes start_booking, then complete_booking with the provided guest details.

3. (Optional) Open DevTools to watch the agent

Some WebMCP tools require human confirmation before completing sensitive actions. For example, complete_booking waits for you to select Confirm Reservation before finalizing a reservation. To interact with these human-in-the-loop (HITL) prompts, you need to open the browser's live view.

Once the agent has started a session, list active sessions to get the session ID:

wrangler browser list

Then, use the session ID from the previous response to open the browser's live view:

wrangler browser view $SESSION_ID

You can now view the live browser session and interact with it.

Use WebMCP with Kitesurf

Kitesurf has its own WebMCP implementation and does not need a lab session. To connect a CDP client, use this WebSocket URL:

wss://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/browser-run/devtools/browser?browser=kitesurf

Kitesurf also supports declarative form tools, which use the toolname and tooldescription form attributes.

Limitations

  • Lab sessions use experimental Chrome features, which may have stability issues.
  • Kitesurf does not implement the WebMCP tools permissions policy or origin-based tool filtering.
  • Kitesurf does not expose tools registered in iframe or popup pages through CDP.
  • Kitesurf sessions do not appear in wrangler browser list and have no live view. When an agent uses Chrome DevTools MCP with Kitesurf, you cannot confirm tools that wait for user interaction, such as complete_booking. To confirm these tools, run them manually from the DevTools WebMCP panel in the Kitesurf playground ↗︎.
  • Lab sessions count against your regular rate limits and pricing.

More resources

Troubleshooting

If you have questions or encounter an error, see the Browser Run FAQ and troubleshooting guide.

Was this helpful?