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

2026年4月10日

Browser Renderingが**Chrome DevTools Protocol (CDP)**を公開しました。CDPは、ブラウザ自動化を支える低レベルプロトコルです。CDPベースのエージェントツールの成長するエコシステムと、既存のCDP自動化スクリプトが、Browser Renderingを直接使用できるようになりました。

PuppeteerやPlaywrightを含む、CDP互換のクライアントは、Cloudflare Workers、ローカルマシン、クラウド環境など、あらゆる環境から接続できます。必要なのはCloudflare APIキーだけです。

既存のCDPスクリプトの移行

既存のCDPスクリプトをBrowser Renderingに切り替えるのは、わずか1行の変更で済みます：

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();

MCPクライアントサポート

さらに、Claude Desktop、Claude Code、Cursor、OpenCodeなどのMCPクライアントが、chrome-devtools-mcpパッケージを通じて、Browser Renderingをリモートブラウザとして使用できるようになりました。

Claude Desktop用のBrowser Rendering設定例：

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

開始方法

開始するには、CDPドキュメントを参照してください。