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

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

この記事ではMCPに特化して解説します。MCP（Model Context Protocol）全般は MCPサーバーの作り方2026完全ガイド をご覧ください。

これにより何ができるのか：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エンドポイントに接続できれば、これらのライブラリをそのまま使えます。

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の選択肢が登場しました。

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

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

事前準備

1. CloudflareアカウントでWorkers Paid（または Free）プランを有効化
2. Browser Rendering - Edit 権限を持つAPIトークンを作成
3. 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ブラウザ自動化フレームワークと組み合わせることで、より高度なエージェントワークフローも構築できます。

料金と制限

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

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

競合サービスとの比較

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

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

主なユースケース

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

代表的なユースケース:

• 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}` } }
);

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

注記: 本セクションは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によるブラウザ操作との組み合わせで、より高度なエージェントワークフローが実現できます。

参照ソース

• Browser Rendering CDP Endpoint - Cloudflare Changelog (2026-04-10)
• Chrome DevTools Protocol - Cloudflare Browser Rendering docs
• Browser Rendering Overview - Cloudflare Docs
• Browser Rendering Pricing - Cloudflare Docs
• Browser Rendering Changelog - Cloudflare Docs
• Chrome DevTools Protocol - chromedevtools.github.io