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

このプロジェクトでは、Cloudflare Browser Renderingを用いてLLMコンテキスト用のWebコンテンツを抽出する方法を紹介します。REST APIとWorkers Binding APIを用いた実験に加え、LLMにWebコンテキストを提供するために使用できる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

Related MCP server: Fetch MCP Server

前提条件

Node.js (v16以降)
ブラウザレンダリングが有効になっているCloudflareアカウント
タイプスクリプト
Wrangler CLI (ワーカーのデプロイ用)

インストール

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

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

依存関係をインストールします:

npm install

Cloudflareワーカーのセットアップ

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

npm install @cloudflare/puppeteer

Wrangler を設定します。

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

ワーカーをデプロイする:

npx wrangler deploy

ワーカーをテストする:

node test-puppeteer.js

実験の実行

基本的なREST API実験

この実験では、Cloudflare ブラウザレンダリング REST API を使用して Web コンテンツを取得および処理する方法を示します。

npm run experiment:rest

Puppeteer バインディング API 実験

この実験では、より高度なブラウザ自動化を実現するために、Puppeteer で Cloudflare Browser Rendering Workers Binding API を使用する方法を示します。

npm run experiment:puppeteer

コンテンツ抽出実験

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

npm run experiment:content

MCPサーバー

MCP サーバーは、LLM のコンテキストとして使用するために、Cloudflare ブラウザレンダリングを使用して Web コンテンツを取得および処理するためのツールを提供します。

MCPサーバーの構築

npm run build

MCPサーバーの実行

npm start

あるいは、開発の場合:

npm run dev

MCP サーバーツール

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

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

構成

Cloudflare ブラウザレンダリングエンドポイントを使用するには、 BROWSER_RENDERING_API環境変数を設定します。

export BROWSER_RENDERING_API=https://YOUR_WORKER_URL_HERE

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

テストファイル内: test-puppeteer.js 、 examples/debugging-tools/debug-test.js 、 examples/testing/content-test.js
MCP サーバー構成: cline_mcp_settings.json.example
ブラウザクライアントの場合: 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ファイルに構成を追加します。

主な学び

Cloudflare ブラウザレンダリングでは、ブラウザバインディングと対話するために@cloudflare/puppeteerパッケージが必要です。
ブラウザバインディングを使用する正しいパターンは次のとおりです。
import puppeteer from '@cloudflare/puppeteer'; // Then in your handler: const browser = await puppeteer.launch(env.browser); const page = await browser.newPage();
ブラウザレンダリングバインディングを使用するワーカーをデプロイする場合は、 nodejs_compat互換性フラグを有効にする必要があります。
リソースの漏洩を防ぐため、使用後は必ずブラウザを閉じてください。

ライセンス

マサチューセッツ工科大学

Web Content MCP Server