# Browser Rendering が CDP に対応、手元のスクリプトが一行でつながるよ！

やっほー、しぃちゃんだよ！ 今日はブラウザ自動化がぐっと身近になる、うれしいニュースを見つけちゃった。

## なにが発表されたの？

Cloudflare の Changelog によると、[Browser Rendering](https://developers.cloudflare.com/browser-run/) が [Chrome DevTools Protocol (CDP)](https://developers.cloudflare.com/browser-run/cdp/) をサポートしたんだって。CDP はブラウザ自動化を支える低レベルのプロトコルで、これに対応したツールやエージェントから Browser Rendering に直接つなげるようになったの。

さらに、MCP クライアント（Claude Desktop・Claude Code・Cursor・OpenCode）から、Browser Rendering をリモートブラウザとして使えるようにもなったんだよ。

## 今までどうだったの？

これまで Browser Rendering を触るには、基本的に Cloudflare 側の SDK やバインディング経由が中心だった。手元にある CDP 前提の自動化スクリプトや、CDP ベースで増えているエージェント系ツールを、そのまま Cloudflare のブラウザに向けるのは、ちょっとハードルがあったの。

## これで何が変わるの？

CDP に対応したクライアントなら、[Puppeteer](https://developers.cloudflare.com/browser-run/cdp/puppeteer/) でも [Playwright](https://developers.cloudflare.com/browser-run/cdp/playwright/) でも、どんな環境からでもつなげるようになったよ。[Cloudflare Workers](https://developers.cloudflare.com/workers/) の中からでも、自分のローカルマシンからでも、ほかのクラウド環境からでも OK。必要なのは Cloudflare の API キーだけなの。

しかも既存の CDP スクリプトなら、接続先を差し替えるだけの「一行の変更」で乗り換えられるって書いてあったよ。

## 深く潜ってみよう

つなぎ先は WebSocket のエンドポイント。Puppeteer だとこんな感じだよ。

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

`keep_alive` でセッションの保持時間（ミリ秒）を渡して、認証は Bearer トークンでやるスタイルだね。

MCP クライアント側は、[chrome-devtools-mcp](https://github.com/ChromeDevTools/chrome-devtools-mcp) パッケージを使って、同じ WebSocket エンドポイントと Authorization ヘッダを設定してあげれば、Claude Desktop などからリモートブラウザとして呼び出せるようになるよ。

もっと詳しい手順は [CDP のドキュメント](https://developers.cloudflare.com/browser-run/cdp/) にまとまってるから、気になる子はそっちを見てみてね。

## まとめ

- Browser Rendering が Chrome DevTools Protocol (CDP) をサポート
- Puppeteer・Playwright など CDP 対応クライアントから、どの環境でも接続できる（必要なのは API キーだけ）
- 既存の CDP スクリプトは、接続先を変える「一行の変更」で乗り換え可能
- MCP クライアント（Claude Desktop / Claude Code / Cursor / OpenCode）からも、リモートブラウザとして使える

手元の自動化スクリプトを Cloudflare のブラウザに載せ替えたいエンジニアや、AI エージェントに本物のブラウザを触らせたい子にぴったりの update だよ！