Cloudflare Browser Rendering Experiments & MCP Server

Cloudflare Browser Rendering の実験と MCP サーバー

このプロジェクトでは、Cloudflare Browser Rendering を使用して、LLM のコンテキスト用にウェブコンテンツを抽出する方法を紹介します。REST API と Workers Binding API を使った実験に加え、LLM にウェブコンテキストを提供するために利用できる MCP サーバーの実装も含まれています。

プロジェクト構成

cloudflare-browser-rendering/
├── examples/                   # Example implementations and utilities
│   ├── basic-worker-example.js # Basic Worker with Browser Rendering
│   ├── minimal-worker-example.js # Minimal implementation
│   ├── debugging-tools/        # Tools for debugging
│   │   └── debug-test.js       # Debug test utility
│   └── testing/                # Testing utilities
│       └── content-test.js     # Content testing utility
├── experiments/                # Educational experiments
│   ├── basic-rest-api/         # REST API tests
│   ├── puppeteer-binding/      # Workers Binding API tests
│   └── content-extraction/     # Content processing tests
├── src/                        # MCP server source code
│   ├── index.ts                # Main entry point
│   ├── server.ts               # MCP server implementation
│   ├── browser-client.ts       # Browser Rendering client
│   └── content-processor.ts    # Content processing utilities
├── puppeteer-worker.js         # Cloudflare Worker with Browser Rendering binding
├── test-puppeteer.js           # Tests for the main implementation
├── wrangler.toml               # Wrangler configuration for the Worker
├── cline_mcp_settings.json.example # Example MCP settings for Cline
├── .gitignore                  # Git ignore file
└── LICENSE                     # MIT License

前提条件

• Node.js（v16 以降）
• Browser Rendering が有効になっている Cloudflare アカウント
• TypeScript
• Wrangler CLI（Worker のデプロイ用）

インストール

1. リポジトリをクローンします。

git clone https://github.com/yourusername/cloudflare-browser-rendering.git
cd cloudflare-browser-rendering

2. 依存関係をインストールします。

npm install

Cloudflare Worker のセットアップ

1. Cloudflare Puppeteer パッケージをインストールします。

npm install @cloudflare/puppeteer

2. Wrangler を設定します。

# wrangler.toml
name = "browser-rendering-api"
main = "puppeteer-worker.js"
compatibility_date = "2023-10-30"
compatibility_flags = ["nodejs_compat"]

[browser]
binding = "browser"

3. Worker をデプロイします。

npx wrangler deploy

4. Worker をテストします。

node test-puppeteer.js

実験の実行

基本的な REST API の実験

この実験では、Cloudflare Browser Rendering REST API を使用してウェブコンテンツを取得し、処理する方法を紹介します。

npm run experiment:rest

Puppeteer Binding API の実験

この実験では、Cloudflare Browser Rendering Workers Binding API を Puppeteer と組み合わせて使用し、より高度なブラウザー自動化を行う方法を紹介します。

npm run experiment:puppeteer

コンテンツ抽出の実験

この実験では、LLM のコンテキストとして使用するために、ウェブコンテンツを抽出して処理する方法を紹介します。

npm run experiment:content

MCP サーバー

この MCP サーバーは、Cloudflare Browser Rendering を使用してウェブコンテンツを取得・処理し、LLM のコンテキストとして利用するためのツールを提供します。

MCP サーバーのビルド

npm run build

MCP サーバーの実行

npm start

または、開発用に次のコマンドを実行します。

npm run dev

MCP サーバーのツール

この MCP サーバーは、次のツールを提供します。

1. fetch_page - LLM のコンテキスト用にウェブページを取得して処理します
2. search_documentation - Cloudflare のドキュメントを検索し、関連するコンテンツを返します
3. extract_structured_content - CSS セレクターを使用してウェブページから構造化コンテンツを抽出します
4. summarize_content - LLM のコンテキストをより簡潔にするため、ウェブコンテンツを要約します

設定

Cloudflare Browser Rendering エンドポイントを使用するには、BROWSER_RENDERING_API 環境変数を設定します。

export BROWSER_RENDERING_API=https://YOUR_WORKER_URL_HERE

YOUR_WORKER_URL_HERE を、デプロイした Cloudflare Worker の URL に置き換えてください。このプレースホルダーは、いくつかのファイルでも置き換える必要があります。

1. テストファイル内：test-puppeteer.js、examples/debugging-tools/debug-test.js、examples/testing/content-test.js
2. MCP サーバーの設定内：cline_mcp_settings.json.example
3. ブラウザークライアント内：src/browser-client.ts（環境変数が設定されていない場合のフォールバック）

Cline との連携

MCP サーバーを Cline と連携させるには、cline_mcp_settings.json.example ファイルを適切な場所にコピーします。

cp cline_mcp_settings.json.example ~/Library/Application\ Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json

または、既存の cline_mcp_settings.json ファイルに設定を追加します。

主な学び

1. Cloudflare Browser Rendering でブラウザーバインディングを操作するには、@cloudflare/puppeteer パッケージが必要です。
2. ブラウザーバインディングを使用する正しいパターンは次のとおりです。

   import puppeteer from '@cloudflare/puppeteer';
   
   // Then in your handler:
   const browser = await puppeteer.launch(env.browser);
   const page = await browser.newPage();
   

3. Browser Rendering バインディングを使用する Worker をデプロイする場合、nodejs_compat 互換性フラグを有効にする必要があります。
4. リソースリークを防ぐため、使用後は必ずブラウザーを閉じてください。

ライセンス

MIT