Cloudflare Browser Rendering

🚀 Cloudflare ブラウザレンダリング実験及び MCP サーバ

このプロジェクトは、Cloudflare ブラウザレンダリングを使用して、Web コンテンツを LLM のコンテキストとして抽出する方法を示しています。REST API と Workers Binding API の実験、および LLM に Web ページのコンテキストを提供するために使用できる MCP サーバの実装が含まれています。

📁 プロジェクト構造

cloudflare-browser-rendering/
├── examples/                   # 実装例とツール
│   ├── basic-worker-example.js # ブラウザレンダリング付きの基本的な Worker の例
│   ├── minimal-worker-example.js # 最小限の実装例
│   ├── debugging-tools/        # デバッグツール
│   │   └── debug-test.js       # デバッグテストツール
│   └── testing/                # テストツール
│       └── content-test.js     # コンテンツテストツール
├── experiments/                # 教育的な実験
│   ├── basic-rest-api/         # REST API テスト
│   ├── puppeteer-binding/      # Workers Binding API テスト
│   └── content-extraction/     # コンテンツ処理テスト
├── src/                        # MCP サーバのソースコード
│   ├── index.ts                # メインエントリポイント
│   ├── server.ts               # MCP サーバの実装
│   ├── browser-client.ts       # ブラウザレンダリングクライアント
│   └── content-processor.ts    # コンテンツ処理ツール
├── puppeteer-worker.js         # Cloudflare Worker のブラウザバインディングの例
├── test-puppeteer.js           # メイン実装のテスト
├── wrangler.toml               # Wrangler の設定ファイル（Worker のデプロイ用）
├── cline_mcp_settings.json.example # Cline で使用する MCP 設定の例
├── .gitignore                  # Git で無視するファイル
└── LICENSE                     # MIT ライセンス

🛠️ 前提条件

• Node.js (v16 以上)
• ブラウザレンダリングが有効な Cloudflare アカウント
• TypeScript
• Wrangler CLI（Worker のデプロイ用）

📋 プロジェクト概要

このプロジェクトは、実験と実装を通じて、Cloudflare ブラウザレンダリング技術をさまざまなシナリオでの応用を探索します。REST API と Workers Binding API の詳細な研究を含み、これらの技術を使用して Web ページのコンテンツを処理する方法を示すための完全な MCP（管理制御平面）サーバの実装を提供します。

📦 インストール方法

1. プロジェクトリポジトリをクローンします：

   git clone [your-repository-url]
   cd cloudflare-browser-rendering
   

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

   npm install
   

3. MCP サーバを起動します：

   npm start
   

💻 実験モジュール

1. REST API ベースのブラウザレンダリング実験

• 基本的な Worker の例 (basic-worker-example.js)：Cloudflare Worker でブラウザレンダリング技術を使用して Web ページのコンテンツを取得して解析する方法を示します。

• 最小限の実装 (minimal-worker-example.js)：機能をすばやく検証するための、簡素化されたブラウザレンダリングの実装です。

2. Workers Binding API 実験

• Puppeteer バインディング (puppeteer-binding/)：Cloudflare 環境で @cloudflare/puppeteer ライブラリを使用してブラウザコンテキストを操作する方法を示します。

• コンテンツ抽出 (content-extraction/)：さまざまな Web ページ構造に対応したコンテンツの取得と解析方法です。

🖥️ MCP サーバの実装

機能概要

MCP サーバは、ブラウザレンダリングタスクを管理および制御するための中枢で、以下の機能を提供します。

1. リクエストを受け取り、異なる処理モジュールに配信します。
2. リソースの漏洩を防ぐためにブラウザコンテキストを管理します。
3. 他のシステムと統合するための API インターフェイスを提供します。

詳細な設定

• 環境変数：

  • BROWSER_BINDING：ブラウザバインディングサービスの URL を指定します（デフォルト値は http://localhost:8080）。

• ログ記録：

  • winston ライブラリを使用してログを出力し、異なるレベルのログ記録とファイル保存をサポートします。

🚀 統合とデプロイ

デプロイガイド

1. 環境変数を設定します：

   export BROWSER_BINDING=http://your-binding-service-url:port
   

2. ビルドとデプロイを行います：

   npm run build
   npm start
   

3. API にアクセスします：

   • 基本 URL：http://localhost:3000
   • 利用可能なインターフェイス：
     • POST /render: レンダリングする Web ページの URL を送信します。
     • GET /results: 最近のレンダリング結果を取得します。

⚠️ 注意事項

⚠️ 重要提示

• Worker でブラウザコンテキストを使用する場合は、リソースの漏洩を防ぐために、必ずリソースを適切に解放してください。
• 各重要なステップで適切なエラー処理メカニズムを追加し、問題のトラブルシューティングに役立つ詳細なログ情報を記録することをお勧めします。
• 実際のニーズに応じてレンダリングパラメータと並列処理能力を調整し、最適なパフォーマンスを達成してください。

📄 ライセンス

MIT