← Browser Run / browser-run / cdp

Používání s klienty MCP (CDP)

Koncové body CDP můžete s AI agenty pro psaní kódu použít prostřednictvím Model Context Protocol (MCP) ↗. chrome-devtools-mcp ↗ balíček poskytuje server MCP, díky kterému mohou AI asistenti ovládat relace prohlížeče a nahlížet do nich.

Než začnete, vytvoření vlastního API Tokenu hodnotou Browser Rendering - Edit oprávnění.

Model Context Protocol (MCP) je otevřený protokol, který AI asistentům umožňuje komunikovat s externími nástroji a službami. Když MCP klienta nakonfigurujete s Browser Run, váš AI kódovací agent může provádět úlohy automatizace prohlížeče, jako je přechod na stránky, pořizování snímků obrazovky, spouštění výkonnostních auditů nebo ladění JavaScriptu.

• Node.js v20.19 nebo novější
• AI klient kompatibilní s MCP (například Claude Desktop, Claude Code, Cursor, OpenCode)
• Token API Browser Run s Browser Rendering - Edit oprávnění

Do souboru s nastavením klienta MCP přidejte následující konfiguraci (přesné umístění závisí na vašem klientovi):

Přidejte do claude_desktop_config.json (Claude Desktop) nebo ~/.claude.json (Claude Code):

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

Přidejte do .opencode.jsonc:

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

Přidejte do ~/.cursor/mcp.json:

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

Nahraďte ACCOUNT_ID s ID vašeho účtu Cloudflare a API_TOKEN s vaším tokenem Browser Run API. Tyto údaje získáte v řídicím panelu Cloudflare.

Informace o dalších klientech MCP najdete v dokumentace chrome-devtools-mcp ↗.

Po nakonfigurování klienta MCP může váš AI agent provádět úlohy v prohlížeči, stačí ho o to požádat:

Navigate to https://example.com and take a screenshot of the homepage

Check the console messages on the current page for any errors

Run a Lighthouse audit on https://developers.cloudflare.com

Server MCP se k Browser Run připojuje přes WebSocket pomocí protokolu CDP:

1. Koncový bod WebSocket - --wsEndpoint URL adresa se připojí ke službě Browser Run
2. Ověřování - --wsHeaders parametr obsahuje váš API token pro ověření
3. Keep-alive - keep_alive parametr dotazu (v milisekundách) určuje, jak dlouho relace zůstává aktivní
4. Protokol MCP - Server převádí volání nástrojů MCP na příkazy CDP

• repozitář chrome-devtools-mcp ↗ - Oficiální server MCP pro Chrome DevTools
• Dokumentace Model Context Protocol ↗ - Další informace o MCP
• Nastavení MCP pro Claude Desktop ↗ - Konfigurace serverů MCP v Claude Desktop
• Nastavení MCP pro Claude Code ↗ - Konfigurace serverů MCP v Claude Code
• Nastavení Cursor MCP ↗ - Konfigurace serverů MCP v Cursoru
• Nastavení OpenCode MCP ↗ - Konfigurace serverů MCP v OpenCode

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.