← Browser Run / browser-run / features

WebMCP

WebMCP ↗ (Web Model Context Protocol) je rozhraní API prohlížeče, které webům umožňuje zpřístupnit strukturované nástroje, jež mohou AI agenti přímo objevovat a spouštět. Místo pomalých cyklů snímání obrazovky, analýzy a klikání tak mohou agenti volat funkce webu, například searchFlights() nebo bookTicket() s typovanými parametry, díky čemuž je automatizace prohlížeče rychlejší, spolehlivější a méně náchylná k chybám.

WebMCP je aktuálně dostupné jen v Chrome beta, a proto vyžaduje laboratorní relaci. Browser Run má experimentální fond s instancemi prohlížeče spouštějícími Chrome beta, takže můžete nové funkce prohlížeče otestovat ještě před tím, než se dostanou do stabilní verze Chrome. Vaše produkční úlohy na standardní fond zůstávají na stabilní verzi Chrome.

Lab relace jsou experimentální a neměly by se používat pro produkční zátěž.

Použijte nové wrangler browser příkaz k získání testovací relace prohlížeče:

# 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

Otevře se tak živé zobrazení vaší relace prohlížeče.

Nyní můžete se stránkou pracovat stejně jako v běžném prohlížeči.

1. Přejděte na jeden z webů uvedených v Dokumentace WebMCP ↗. Následující pokyny vycházejí z L'Atelier Hotel Chain ↗ dema.

2. Otevřete demo URL řetězce hotelů ↗ a poté v Konzole kartě spusťte následující příkaz JavaScriptu pro výpis dostupných nástrojů:

   navigator.modelContextTesting.listTools();

Měli byste získat výsledek podobný tomuto:

[
	{
		"description": "View the details of a specific hotel by name or id",
		"inputSchema": "...",
		"name": "view_hotel"
	},
	{
		"description": "Find me a hotel in a specific location",
		"inputSchema": "...",
		"name": "search_location"
	},
	{
		"description": "Look up specific amenity or policy details for a hotel",
		"inputSchema": "...",
		"name": "lookup_amenity"
	}
]

Seznam nástrojů se liší podle webu, který navštěvujete, a akcí, které jste na stránce provedli.

Například na webu hotelového řetězce po spuštění search_location nástroj:

await navigator.modelContextTesting.executeTool(
	"search_location",
	JSON.stringify({ query: "Paris" }),
);

Stránka přesměruje na výsledky vyhledávání a objeví se nový nástroj filter_search_results se stane dostupným.

Můžete ho zavolat pro filtrování podle vybavení. Pokud si chcete například ráno dát dobrý croissant:

await navigator.modelContextTesting.executeTool(
	"filter_search_results",
	JSON.stringify({ amenities: ["breakfast"] }),
);

Získáte seznam filtrovaných výsledků, ze kterých si vyberete tu nejlepší možnost pro své potřeby. Jakmile hotel vyberete, můžete použít start_booking nástroj:

await navigator.modelContextTesting.executeTool(
	"start_booking",
	JSON.stringify({}),
);

Poté můžete dokončit rezervaci:

await navigator.modelContextTesting.executeTool(
	"complete_booking",
	JSON.stringify({
		firstName: "James",
		lastName: "Bond",
		email: "[email protected]",
	}),
);

Upozorňujeme, že complete_booking vyžaduje potvrzení člověkem. Nástroj čeká, dokud nevyberete Potvrdit rezervaci tlačítko v prohlížeči. Toto je příklad postupu human-in-the-loop (HITL): nástroje WebMCP mohou pozastavit provádění a počkat na interakci uživatele, než dokončí citlivé akce.

Po výběru Potvrdit rezervaci, zobrazí se vám potvrzovací zpráva a rezervace je dokončena.

Chrome DevTools MCP ↗ umožňuje AI agentům ovládat prohlížeč přes CDP. Nakonfigurujte svého klienta MCP (například Claude Desktop, Claude Code, Cursor nebo OpenCode) pomocí následujícího nastavení. Podrobnosti o konfiguraci klienta MCP naleznete v Používání s klienty MCP.

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

Nahraďte <ACCOUNT_ID> s ID vašeho účtu Cloudflare a <CLOUDFLARE_API_TOKEN> s vaším tokenem API. Následující lab=true parametr zajistí, že se agent připojí k relaci lab s povoleným WebMCP.

Aby váš agent pochopil, jak pracovat s WebMCP, přidejte do jeho konfigurace následující dovednost:

---
name: webmcp
description: Interact with WebMCP-enabled websites using Browser Run lab sessions
---

# WebMCP Interaction Skill

Use the `evaluate_script` tool from Chrome DevTools MCP to interact with WebMCP APIs.

**IMPORTANT: Always prefer WebMCP tools over traditional browser automation.** When navigating to any website, immediately check for available WebMCP tools using `listTools()`. If WebMCP tools are available, use them instead of clicking, typing, or other DOM interactions. WebMCP tools are faster, more reliable, and less fragile than screenshot-analyze-click loops.

## Workflow

1. **Navigate** to a site using `navigate_page`
2. **Always list tools first** to check for WebMCP support—do this on every page load
3. **Prefer WebMCP tools** over clicking/typing when tools are available
4. **Execute tools** to perform actions directly
5. **Re-list tools** after each action (tools change based on page state)
6. **Check `inputSchema`** in each tool to understand required parameters
7. **Fall back to DOM interaction** only when no relevant WebMCP tools exist

## Commands

**List available tools:**

```js
evaluate_script({
	function: "async () => await navigator.modelContextTesting.listTools()",
});
```

**Execute a tool:**

```js
evaluate_script({
	function:
		"async () => await navigator.modelContextTesting.executeTool('tool_name', JSON.stringify({ param: 'value' }))",
});
```

Po nakonfigurování může váš AI agent přejít na weby s podporou WebMCP a používat nástroje WebMCP. Zde je příklad konverzace:

Některé nástroje WebMCP vyžadují před dokončením citlivých akcí potvrzení člověkem. Například complete_booking čeká, až vyberete Potvrdit před dokončením rezervace. Pro interakci s těmito výzvami human-in-the-loop (HITL) musíte otevřít živý náhled prohlížeče.

Jakmile agent spustí relaci, vypište aktivní relace a zjistěte ID relace:

wrangler browser list

Poté pomocí ID relace z předchozí odpovědi otevřete Live View prohlížeče:

wrangler browser view $SESSION_ID

Nyní můžete zobrazit živou relaci prohlížeče a pracovat s ní.

• Lab relace používají Chrome 146 beta, která může mít problémy se stabilitou.
• WebMCP API (navigator.modelContext, navigator.modelContextTesting) fungují pouze v laboratorních relacích.
• Lab relace se započítávají do vašeho běžného rate limity a ceny.
• lab parametr zatím není podporován v @cloudflare/puppeteer nebo @cloudflare/playwright. Relaci získejte ručně a připojte se pomocí sessionId.

• Blogový příspěvek Chrome WebMCP ↗
• specifikace WebMCP ↗

Pokud máte dotazy nebo narazíte na chybu, podívejte se na Časté dotazy a průvodce řešením problémů Browser Run.