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