MCP クライアントでの利用（CDP）

CDP エンドポイントは、Model Context Protocol（MCP） ↗ 経由で AI コーディングエージェントから利用できます。chrome-devtools-mcp ↗ パッケージは、AI アシスタントがブラウザセッションを操作・検査できる MCP サーバーを提供します。

始める前に、Browser Rendering - Edit 権限付きのカスタム API トークンを作成してください。

MCP とは

Model Context Protocol（MCP）は、AI アシスタントが外部のツールやサービスと連携するためのオープンなプロトコルです。MCP クライアントに Browser Run を設定すると、AI コーディングエージェントはページへの移動、スクリーンショットの取得、パフォーマンス監査の実行、JavaScript のデバッグなどのブラウザ自動化を行えます。

前提条件

Node.js v20.19 以降
MCP 対応の AI クライアント（例: Claude Desktop、Claude Code、Cursor、OpenCode）
Browser Rendering - Edit 権限を持つ Browser Run API トークン

MCP クライアントを設定する

次の設定を、MCP クライアントの設定ファイルに追加します。ファイルの場所はクライアントによって異なります。

Claude Desktop と Claude Code

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

.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

~/.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 を Cloudflare のアカウント ID に、API_TOKEN を Browser Run API トークンに置き換えます。どちらも Cloudflare ダッシュボードから取得できます。

ほかの MCP クライアントについては、chrome-devtools-mcp のドキュメント ↗ を参照してください。

使用例

MCP クライアントを設定したあと、AI エージェントにブラウザ操作を依頼できます。

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 サーバーは、CDP プロトコルを使い、WebSocket で Browser Run に接続します。

WebSocket エンドポイント — --wsEndpoint の URL で Browser Run サービスに接続します
認証 — --wsHeaders パラメータに、認証用の API トークンを含めます
Keep-alive — keep_alive クエリパラメータ（ミリ秒）で、セッションの有効時間を指定します
MCP プロトコル — サーバーは MCP のツール呼び出しを CDP コマンドに変換します

トラブルシューティング

質問がある場合やエラーが発生した場合は、Browser Run の FAQ とトラブルシューティングガイドを参照してください。