注目 Open Source MCP Claude Code Cloudflare Browser Rendering

CF Browser をオープンソース化：Claude Code に 9 つのブラウザツールを追加する MCP サーバー

CF Browser は Claude Code に本物のブラウザ機能を与えます — JS レンダリング、スクリーンショット、PDF 生成、AI 構造化データ抽出、マルチページクロール。すべて MCP 経由、完全オープンソース。

2026年3月13日 • 7 分で読める • 著者：Claude World

Claude Code の組み込み WebFetch は生の HTML しか返しません。静的ページなら問題ありませんが、現代のウェブは JavaScript で動いています — React のドキュメントサイト、動的な価格ページ、SPA アプリ。WebFetch が返すのは空の <div id="root"></div> だけです。

この問題を解決するために CF Browser を作りました。本日、オープンソースとして公開します。

GitHub: github.com/claude-world/cf-browser（MIT License）

問題：Claude Code は JavaScript を理解できない

Claude Code に React のドキュメントページを読ませてみてください。WebFetch が返すのは空のシェルです。コンテンツなし、レンダリング済みテキストなし。

この状況は頻繁に発生します：

  • SPA 技術ドキュメント（Next.js、Nuxt、Svelte）
  • 動的な価格・商品ページ
  • JavaScript レンダリングのダッシュボード
  • ブラウザがないと表示できないページ全般

解決策：9 つの MCP ツール

CF Browser は Cloudflare Browser Rendering API（クラウド上のヘッドレス Chrome）をラップし、Claude Code がネイティブに使える 9 つの MCP ツールとして公開します：

ツール機能
browser_markdown任意のページをクリーンな Markdown として読み取り（JS レンダリング済み）
browser_content完全にレンダリングされた HTML を取得
browser_screenshotPNG スクリーンショット（任意のビューポートサイズ）
browser_pdfPDF レポート生成（A4、Letter など）
browser_scrapeCSS セレクターで特定の要素を抽出
browser_jsonAI 駆動の構造化データ抽出
browser_linksページ上のすべてのハイパーリンクを発見
browser_crawl非同期マルチページクロールを開始
browser_crawl_statusクロール結果をポーリングまたは待機

インストール後は、Claude Code に自然言語で話しかけるだけ：

  • 「Next.js 15 のマイグレーションガイドを読んで」 → JS をレンダリング、Markdown を返す
  • 「モバイル版のホームページをスクリーンショット」 → 375×667 PNG
  • 「このページの全商品名と価格を抽出して」 → 構造化 JSON
  • 「ドキュメントサイトをクロールしてリンク切れを見つけて」 → マルチページクロール

アーキテクチャ

3 つの独立パッケージ、疎結合：

Claude Code
  ↓ MCP (stdio)
MCP Server（Python, FastMCP）
  ↓ HTTP
Python SDK（httpx, async）
  ↓ HTTPS + Bearer token
Cloudflare Worker（TypeScript, Hono）
  ├── 認証（timing-safe SHA-256）
  ├── レート制限（KV, 60 req/min）
  └── キャッシュ（KV テキスト用, R2 バイナリ用）
  ↓ REST API
Cloudflare Browser Rendering（headless Chrome）

各レイヤーは独立して使用可能：

  • Worker のみ — 任意の言語から REST API を呼び出し
  • SDK のみ — Python スクリプトで使用
  • MCP Server — Claude Code との完全統合

セットアップ：3 ステップ

1. Worker をデプロイ

git clone https://github.com/claude-world/cf-browser.git
cd cf-browser/worker

# Cloudflare リソースを作成
wrangler kv namespace create CACHE
wrangler kv namespace create RATE_LIMIT
wrangler r2 bucket create cf-browser-storage

# シークレットを設定
wrangler secret put CF_ACCOUNT_ID
wrangler secret put CF_API_TOKEN
echo "$(openssl rand -hex 32)" | wrangler secret put API_KEYS

# デプロイ
cp wrangler.toml.example wrangler.toml
# （KV namespace ID を貼り付け）
wrangler deploy

2. Python パッケージをインストール

pip install "cf-browser @ git+https://github.com/claude-world/cf-browser.git#subdirectory=sdk"
pip install "cf-browser-mcp @ git+https://github.com/claude-world/cf-browser.git#subdirectory=mcp-server"

3. .mcp.json に追加

{
  "mcpServers": {
    "cf-browser": {
      "type": "stdio",
      "command": "python",
      "args": ["-m", "cf_browser_mcp.server"],
      "env": {
        "CF_BROWSER_URL": "https://cf-browser.your-subdomain.workers.dev",
        "CF_BROWSER_API_KEY": "your-api-key"
      }
    }
  }
}

Claude Code を再起動すると、9 つの browser_* ツールが表示されます。

他のソリューションとの違い

vs. Playwright MCP：CF Browser のヘッドレス Chrome は Cloudflare のエッジネットワーク上で動作します。ローカルブラウザプロセス不要、メモリ消費なし。CI/CD やローカルブラウザを実行できないリモート環境でも動作します。

vs. 標準 WebFetch：完全な JavaScript レンダリング。ページが完全にロードされてからコンテンツを抽出。動的コンテンツ、SPA、クライアントサイドレンダリングのページすべてに対応。

vs. 自作：認証、レート制限、キャッシュ、SSRF 防止、エラーハンドリングがすべて組み込み済み。Worker がインフラを処理し、MCP ツールを呼ぶだけ。

コスト：Cloudflare の無料プランに Browser Rendering（1 日 10 分）、KV（1 日 100K 読み取り）、R2（10GB）、Workers（1 日 100K リクエスト）が含まれています。一般的な開発ワークフローでは完全無料です。

セキュリティ

  • Timing-safe 認証：Web Crypto API の SHA-256 ハッシュで API キーを検証、タイミング攻撃を防止
  • レート制限：キーごとの制限値をハッシュ化して KV に保存
  • SSRF 防止：http:// と https:// URL のみ許可
  • コードにシークレットなし：すべての認証情報は wrangler secret put 経由

実際の活用事例

CF Browser を自社ワークフローに導入してから：

  • コンテンツパイプライン：任意のウェブページを取得 → クリーンな Markdown → Claude に記事を書かせる
  • ビジュアル QA：デプロイごとに複数ビューポートでスクリーンショットチェック
  • 競合分析：競合サイトから構造化データを抽出
  • リンク監査：100+ ページをクロール、リンク切れと不足メタタグを検出
  • ドキュメントインデックス：ドキュメントサイト全体をクロール、RAG 用 Markdown に変換

コントリビューション

CF Browser は MIT ライセンスです。コントリビューション歓迎：

  • Worker（worker/）：TypeScript, Hono
  • SDK（sdk/）：Python, httpx, Pydantic
  • MCP Server（mcp-server/）：Python, FastMCP
cd worker && npm install && npm run dev    # Worker は :8787
cd sdk && pip install -e ".[dev]" && pytest
cd mcp-server && pip install -e ".[dev]"

Claude Code はコードを書くのは得意です。しかしコードはウェブ上に存在します — ドキュメント、API、ダッシュボード、競合サイト。CF Browser はそのギャップを埋めます。

GitHub: github.com/claude-world/cf-browser