← Browser Run / browser-run / cdp

Использование с MCP-клиентами (CDP)

Эндпоинты CDP можно использовать с AI-агентами для написания кода через Model Context Protocol (MCP) ↗. chrome-devtools-mcp ↗ пакет предоставляет MCP-сервер, который позволяет ИИ-ассистентам управлять сессиями браузера и проверять их.

Прежде чем начать, создание пользовательского API Token с Browser Rendering - Edit разрешение.

Model Context Protocol (MCP) представляет собой открытый протокол, позволяющий ИИ-ассистентам взаимодействовать с внешними инструментами и сервисами. Настроив MCP-клиент для работы с Browser Run, ваш ИИ-агент для написания кода сможет выполнять задачи автоматизации браузера: переходить по страницам, делать скриншоты, запускать аудиты производительности и отлаживать JavaScript.

• Node.js v20.19 или новее
• ИИ-клиент, совместимый с MCP (например, Claude Desktop, Claude Code, Cursor, OpenCode)
• Токен API Browser Run с Browser Rendering - Edit разрешения

Добавьте следующую конфигурацию в файл настроек вашего MCP-клиента (точное расположение зависит от клиента):

Добавьте в claude_desktop_config.json (Claude Desktop) или ~/.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>\"}"
			]
		}
	}
}

Добавьте в .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
		}
	}
}

Добавьте в ~/.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>\"}"
			]
		}
	}
}

Замените ACCOUNT_ID с ID вашего аккаунта Cloudflare и API_TOKEN с помощью токена API Browser Run. Его можно получить в панели управления Cloudflare.

Для других MCP-клиентов см. в документация chrome-devtools-mcp ↗.

После настройки MCP-клиента вы можете попросить своего ИИ-агента выполнять задачи в браузере:

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

Сервер MCP подключается к Browser Run через WebSocket по протоколу CDP:

1. WebSocket-эндпоинт - --wsEndpoint URL-адрес подключается к сервису Browser Run
2. Аутентификация - --wsHeaders параметр включает ваш API-токен для аутентификации
3. Keep-alive - keep_alive параметр запроса (в миллисекундах) задаёт, как долго сессия остаётся активной
4. Протокол MCP - сервер преобразует вызовы инструментов MCP в команды CDP

• репозиторий chrome-devtools-mcp ↗ - официальный сервер MCP для Chrome DevTools
• Документация Model Context Protocol ↗ - подробнее о MCP
• Настройка MCP для Claude Desktop ↗ - настройка серверов MCP в Claude Desktop
• Настройка MCP для Claude Code ↗ - настройка серверов MCP в Claude Code
• Настройка MCP для Cursor ↗ - настройка серверов MCP в Cursor
• Настройка OpenCode MCP ↗ - настройка серверов MCP в OpenCode

Если у вас есть вопросы или возникла ошибка, см. Часто задаваемые вопросы и руководство по устранению неполадок Browser Run.