Browser Rendering が Chrome DevTools Protocol (CDP) と MCP クライアントのサポートを追加

公開日: 2026-04-10

概要

• Browser Rendering は Chrome DevTools Protocol (CDP) を公開しました。CDP はブラウザ自動化の低レベルプロトコルです。
• CDP ベースのエージェントツールや既存の CDP 自動化スクリプトは、直接 Browser Rendering を利用できます。
• Puppeteer や Playwright を含む任意の CDP 互換クライアントは、Cloudflare Workers、ローカルマシン、クラウド環境など、どの環境からでも接続できます。
• 必要なのは Cloudflare API key（API_TOKEN）のみです。

CDP 接続の例

既存の CDP スクリプトを Browser Rendering に切り替えるのは 1 行の変更です。例（JavaScript）:

const puppeteer = require("puppeteer-core");
const browser = await puppeteer.connect({
  browserWSEndpoint: `wss://api.cloudflare.com/client/v4/accounts/${ACCOUNT_ID}/browser-rendering/devtools/browser?keep_alive=600000`,
  headers: { Authorization: `Bearer ${API_TOKEN}` },
});
const page = await browser.newPage();
await page.goto("https://example.com");
console.log(await page.title());
await browser.close();

コードの説明

• browserWSEndpoint: wss://api.cloudflare.com/client/v4/accounts/${ACCOUNT_ID}/browser-rendering/devtools/browser?keep_alive=600000 の形式で、<ACCOUNT_ID> を指定します。keep_alive パラメータは接続のタイムアウト保持時間（ミリ秒）です。
• headers: Authorization ヘッダーに Bearer ${API_TOKEN} を渡して認証します。

MCP クライアントのサポート

Claude Desktop、Claude Code、Cursor、OpenCode のような MCP クライアントは、chrome-devtools-mcp ↗ パッケージを介して Browser Rendering をリモートブラウザとして使用できます。Claude Desktop の設定例:

{
  "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>\"}"
      ]
    }
  }
}

コードの説明

• 上記設定は npx chrome-devtools-mcp@latest を起動し、--wsEndpoint と --wsHeaders を渡して Browser Rendering の WebSocket エンドポイントに接続します。
• <ACCOUNT_ID> と <API_TOKEN> を実際の値に置き換してください。

開始方法

CDP のドキュメントを参照してセットアップを開始してください。

---

その他のリソースや詳細は Cloudflare のドキュメントを参照してください。