CDPエンドポイントは無料プランで使えますか？

はい、Workers Freeプランでも利用可能ですが、1日10分のブラウザ使用時間制限があります。本番用途はWorkers Paid（月10時間無料）を推奨します。

既存のPuppeteerスクリプトをそのまま使えますか？

接続先エンドポイントをCloudflareのWSS URLに変更するだけで動作します。Puppeteer APIの呼び出し方は変更不要です。

Claude DesktopからBrowser Renderingに接続できますか？

可能です。chrome-devtools-mcpパッケージをMCPサーバーとして設定し、WSS接続URLを指定するだけで連携できます。

Browser Renderingの従量課金はいくらですか？

Workers Paid無料枠（月10時間）を超えた分は$0.09/時間、同時接続ブラウザは月平均ピーク値で$2.00/ブラウザです。

CDPとPuppeteer/Playwrightの違いは何ですか？

CDPはChrome DevTools Protocolの生プロトコルで、PuppeteerとPlaywrightはその上に構築された高レベルライブラリです。CDPエンドポイントにはどちらも接続できます。

Cloudflare Browser Rendering CDPエンドポイント完全ガイド【2026年版】

Cloudflareは2026年4月10日、Browser RenderingにChrome DevTools Protocol（CDP）エンドポイントを追加しました。これにより、PuppeteerやPlaywright、そしてClaude DesktopなどのMCPクライアントが、Cloudflareのグローバルネットワーク上のブラウザに直接CDPで接続できるようになりました。インフラ管理ゼロ・サーバーレスで動くブラウザ自動化基盤が、既存の自動化スクリプトと即座に統合できます。

これにより何ができるのか：7つの具体的なユースケース

CDPエンドポイント対応で「今まで必要だったものが不要になる」ケースを整理します。

① 既存のPuppeteerスクリプトをサーバーレス化 今まで：EC2やVMにChromiumをインストールしてサーバーを常時起動、メンテナンスが必要。これからは：browserWSEndpointのURLを変えるだけで、Cloudflareがブラウザを管理してくれる。

② AIエージェントにリモートブラウザを追加（MCPで1行） 今まで：Claude DesktopにWebブラウザ操作を追加するには、ローカルのChromiumを起動してMCPサーバーに繋ぐ必要があった。これからは：claude_desktop_config.jsonにMCPサーバー設定を1件追加するだけで、リモートブラウザが使える。

③ GitHub ActionsからブラウザE2Eテストをゼロ設定で実行 今まで：actions/setup-nodeでPlaywrightをインストールし、ブラウザのキャッシュ管理が必要。これからは：CDPエンドポイントにPlaywrightを接続するだけ。ブラウザのインストール不要。

④ Python/Go/Rustなど任意の言語からブラウザを制御 今まで：PuppeteerはNode.js必須、PlaywrightはPython/Java/.NETのラッパーが必要だった。これからは：WebSocketでCDPメッセージを送受信できる言語なら何でも接続可能。

⑤ 複数のブラウザタブを並列制御してスクレイピング高速化 1つのCDPセッション内で複数タブをjson/newで動的生成し、並列でページを取得できる。10並列まで無料枠内で運用可能（Workers Paid）。

⑥ Cursor/OpenCodeでAIがブラウザを操作しながらコーディング @playwright/mcpをCDPエンドポイントに向けるだけで、AIがリモートブラウザを介してデバッグ・確認作業を行える。ローカルにChromeが不要。

⑦ Workers上のKV/R2と組み合わせたスクレイピングパイプライン Workersからは従来のバインディングでPuppeteerを使い、外部サーバーやAIエージェントからはCDPエンドポイントで接続する、ハイブリッド構成が可能になった。

Chrome DevTools Protocol（CDP）とは

CDPはChromeブラウザを外部プログラムから操作するための低レベルプロトコルです。WebSocketを通じてChromeと通信し、DOMの操作・ネットワーク監視・スクリーンショット取得・JavaScriptの実行など、ブラウザのほぼすべての機能をプログラムで制御できます。

PuppeteerとPlaywrightは、このCDPの上に構築された高レベルライブラリです。つまり、CDPエンドポイントに接続できれば、これらのライブラリをそのまま使えます。

graph TB A["開発者のコード
(Puppeteer / Playwright / 生CDP)"] B["CDPプロトコル
(WebSocket)"] C["Cloudflare Browser Rendering
(CDPエンドポイント)"] D["Chromiumブラウザ
(Cloudflareグローバルネット)"] E["対象Webサイト"] A -->|"wss://..."| B B --> C C --> D D -->|"HTTP/HTTPS"| E

MCPクライアント（Claude Desktop、Cursor、OpenCode等）も、chrome-devtools-mcpや@playwright/mcpパッケージを経由して同じCDPエンドポイントに接続できます。

従来のBrowser Renderingとの違い

これまでのCloudflare Browser Renderingには、REST API（Quick Actions）とWorkersバインディングでPuppeteer/Playwrightを使う2つの方式がありました。今回のCDPエンドポイント追加により、第3の選択肢が登場しました。

方式	使用場所	接続方法	向いているケース
REST API（Quick Actions）	Workers外も可	HTTP	スクリーンショット・PDF・スクレイピングの単発処理
Puppeteer/Playwright（Workers Binding）	Workers内のみ	Binding	WorkersからPlaywright/Puppeteer APIを使う複雑なワークフロー
CDP エンドポイント（新機能）	どこからでも	WebSocket（WSS）	既存スクリプト移行・MCPクライアント・CI/CD

CDPエンドポイントの最大の特長は「どこからでも接続できる」点です。ローカルマシン、CI/CDパイプライン、他のクラウドサービス、そしてAIエージェントのMCPクライアントまで、WebSocket接続さえ張れる環境なら利用できます。

既存スクリプトの移行が簡単
Puppeteerのconnect先をbrowserWSEndpointに変更するだけ。コードの書き換えは最小限です。

CDPエンドポイントの接続方法

事前準備

CloudflareアカウントでWorkers Paid（または Free）プランを有効化
Browser Rendering - Edit 権限を持つAPIトークンを作成
CloudflareアカウントIDを確認

TypeScript / Puppeteer での接続

import puppeteer from "puppeteer-core";

const ACCOUNT_ID = process.env.CF_ACCOUNT_ID;
const API_TOKEN = process.env.CF_API_TOKEN;

// CDPセッションの作成
const response = await fetch(
  `https://api.cloudflare.com/client/v4/accounts/${ACCOUNT_ID}/browser-rendering/devtools/browser`,
  {
    method: "POST",
    headers: {
      Authorization: `Bearer ${API_TOKEN}`,
      "Content-Type": "application/json",
    },
  }
);

const { result } = await response.json();
const { wsEndpoint, sessionId } = result;

// Puppeteer で接続
const browser = await puppeteer.connect({
  browserWSEndpoint: wsEndpoint,
});

const page = await browser.newPage();
await page.goto("https://example.com");
const screenshot = await page.screenshot({ encoding: "base64" });
console.log("スクリーンショット取得完了");

await browser.close();

Python での接続

import os, json, asyncio
import httpx
from pyppeteer import connect  # pip install pyppeteer

ACCOUNT_ID = os.environ["CF_ACCOUNT_ID"]
API_TOKEN = os.environ["CF_API_TOKEN"]

async def main():
    # CDPセッション作成
    async with httpx.AsyncClient() as client:
        resp = await client.post(
            f"https://api.cloudflare.com/client/v4/accounts/{ACCOUNT_ID}/browser-rendering/devtools/browser",
            headers={"Authorization": f"Bearer {API_TOKEN}"},
        )
    ws_endpoint = resp.json()["result"]["wsEndpoint"]

    # CDP経由でブラウザに接続
    browser = await connect(browserWSEndpoint=ws_endpoint)
    page = await browser.newPage()
    await page.goto("https://example.com")
    await page.screenshot({"path": "screenshot.png"})
    await browser.close()
    print("完了")

asyncio.run(main())

Claude Desktop / MCP クライアントでの設定

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--wsEndpoint=wss://YOUR_CDP_ENDPOINT?token=YOUR_API_TOKEN"
      ]
    }
  }
}

Cursor や OpenCode などCDPをサポートするMCPクライアントでも同様に設定できます。Browser Use のようなAIブラウザ自動化フレームワークと組み合わせることで、より高度なエージェントワークフローも構築できます。

料金と制限

セッション課金に注意
CDPエンドポイントは「Browser Sessions」方式の課金対象です。ブラウザ時間（時間課金）と同時接続数（並列課金）の両方が計上されます。

プラン	無料枠（ブラウザ時間）	無料枠（同時接続）	追加料金
Workers Free	1日10分	3ブラウザ	※超過時429エラー
Workers Paid	月10時間	月平均10ブラウザ	$0.09/時間 + $2.00/ブラウザ

同時接続数の計算方式: 月の日次ピーク値の平均値です。一時的なスパイクで過剰請求されにくい設計になっています。

2026年3月のアップデート: 最大同時接続数が従来の2から10に増加。REST APIのリクエスト制限も毎分180→600（3倍）に引き上げられました。

競合サービスとの比較

Cloudflare Browser Rendering CDPエンドポイントは、既存のクラウドブラウザサービスと直接競合します。

サービス	月額費用	CDPサポート	インフラ管理	特徴
Cloudflare Browser Rendering	無料〜（$0.09/時間従量）	✅ 新機能	不要	Workersエコシステム統合
Browserless	$25〜/月（20,000ユニット〜）	✅	不要	CAPTCHA自動解決、アンチ検出
Puppeteer公式（セルフホスト）	無料	✅	必要	完全なカスタマイズ性
Playwright MCP（セルフホスト）	無料	✅	必要	アクセシビリティツリー活用

Cloudflareの強みは既存のWorkersエコシステムとの統合とサーバーレス運用です。一方、Browserlessはボット検出回避や自動CAPTCHA解決に強みがあり、スクレイピング特化の用途では差別化されています。

主なユースケース

CDPエンドポイントが特に有用な場面を整理します。

graph LR subgraph "ローカル / CI/CD" A["既存Puppeteer
スクリプト"] B["GitHub Actions
E2Eテスト"] end subgraph "AIエージェント" C["Claude Desktop
(MCP)"] D["Cursor / OpenCode
(MCP)"] end subgraph "クラウド" E["他社クラウド
(AWS/GCP等)"] end A -->|"browserWSEndpoint変更のみ"| F["Cloudflare
CDP Endpoint"] B --> F C -->|"chrome-devtools-mcp"| F D -->|"@playwright/mcp"| F E -->|"WSS接続"| F F --> G["Cloudflare
Chromium"]

代表的なユースケース:

Webスクレイピング: JavaScriptを多用するSPAサイトのデータ収集
スクリーンショット・PDF生成: 動的コンテンツのキャプチャ
E2Eテスト: CI/CD パイプラインからのブラウザテスト実行
AIエージェントのWeb操作: MCPクライアントがWebページをナビゲート・フォーム入力
Webページの構造化データ抽出: HTMLをMarkdownや構造化JSONに変換

agent-browser（Vercel Labs製）のようなAIエージェント向けCLIと組み合わせると、LLMがCloudflare上のブラウザを直接操作するパイプラインも構築できます。

セッション管理の仕組み

CDPセッションのライフサイクルを理解することで、コストを最適化できます。

// セッションの明示的な管理
const SESSION_ID = "your-session-id";

// タブ一覧の取得
const tabs = await fetch(
  `https://api.cloudflare.com/client/v4/accounts/${ACCOUNT_ID}/browser-rendering/devtools/browser/${SESSION_ID}/json/list`,
  { headers: { Authorization: `Bearer ${API_TOKEN}` } }
);

// 新しいタブを作成
await fetch(
  `https://api.cloudflare.com/client/v4/accounts/${ACCOUNT_ID}/browser-rendering/devtools/browser/${SESSION_ID}/json/new`,
  { method: "PUT", headers: { Authorization: `Bearer ${API_TOKEN}` } }
);

// セッションの削除（課金を停止）
await fetch(
  `https://api.cloudflare.com/client/v4/accounts/${ACCOUNT_ID}/browser-rendering/devtools/browser/${SESSION_ID}`,
  { method: "DELETE", headers: { Authorization: `Bearer ${API_TOKEN}` } }
);

コスト最適化のポイント
タスク完了後は必ずDELETEでセッションを削除しましょう。keep_aliveパラメータ（デフォルト120秒）でセッションのタイムアウト時間も制御できます。

評価：メリット・デメリット・おすすめ対象

注記: 本セクションはCloudflare公式ドキュメントおよびGitHub上の実装例（cf-browser-cdp等）に基づく分析です。実アカウントによる実測値は含みません。

良い点

移行コストが最小限: browserWSEndpointのURLを差し替えるだけで既存Puppeteerスクリプトが動く。コードの書き換えはほぼ不要
Workers Freeプランで即試せる: 1日10分の無料枠があり、費用ゼロでプロトタイプを作れる
MCPエコシステムと即統合: chrome-devtools-mcpまたは@playwright/mcpを1コマンドで起動すれば、Claude Desktop・Cursor・OpenCodeがリモートブラウザを使える
インフラ管理ゼロ: Chromiumのバージョン管理、セキュリティパッチ、スケーリングはすべてCloudflareが担当
グローバルネットワーク: Cloudflareの200+拠点から対象サイトにアクセスできる（地域制限の回避やレイテンシ最適化に有効）
Workers KV/R2/D1との統合: Workersエコシステム内でスクレイピングデータの保存・処理を完結できる

惜しい点

CAPTCHA自動解決なし: Browserlessなど競合サービスが持つCAPTCHA自動解決・ステルスモードは未対応。Cloudflare保護サイトへのアクセスは別途対策が必要
Workerバインディング方式との料金差: CDPセッション方式は時間課金＋同時接続課金の二重課金。REST API（Quick Actions）は時間課金のみのため、単発処理ならQuick Actionsのほうがコスト効率が良い
セッション管理が手動: セッションを明示的にDELETEしないと課金が続く。タイムアウト（デフォルト120秒）を適切に設定する必要がある
1MBのWebSocketフレーム制限: 大量のCDPメッセージ（高解像度スクリーンショット等）は1MBのフレーム上限に引っかかる場合がある

こんな人におすすめ

強くおすすめ

既存のPuppeteer/Playwrightコードベースを持つチーム: 変更箇所が最小限でCloudflareに移行できる
Claude Desktop/CursorユーザーでWebブラウジングをAIに使わせたい人: MCP設定1つで完結する

検討の余地あり

重度なスクレイピング用途（CAPTCHA回避が必要）: Browserlessの方が適している可能性が高い
Workerバインディングで完結するユースケース: REST APIやPuppeteerバインディングの方がシンプルで安い場合がある

まとめ

Cloudflare Browser Rendering CDPエンドポイントは、既存のブラウザ自動化スクリプトをインフラ管理なしでCloudflareのグローバルネットワークに移行できる実用的な機能追加です。

特に以下の用途で導入メリットが大きいです:

既存のPuppeteer/Playwrightスクリプトを持ち、インフラ管理を省きたいチーム
Claude DesktopなどMCPクライアントにリモートブラウザを繋ぎたいAIエージェント開発者
Workers上の他のサービスとブラウザ自動化を統合したいCloudflareユーザー

Workers Freeプランでも試せるため、まず小規模なプロジェクトでCDP接続を検証してみることをおすすめします。Browser Useなど、AIによるブラウザ操作との組み合わせで、より高度なエージェントワークフローが実現できます。