WebコンテンツMCPサーバー

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

前提条件

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互換性フラグを有効にする必要があります。
リソースの漏洩を防ぐため、使用後は必ずブラウザを閉じてください。

ライセンス

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

You must be authenticated.

security – no known vulnerabilities

license - permissive license

quality - confirmed to work

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Tools

Cloudflare ブラウザレンダリングを活用して、LLM のコンテキストとして使用するために Web コンテンツを抽出および処理し、ページの取得、ドキュメントの検索、構造化コンテンツの抽出、コンテンツの要約を行うツールを提供するサーバー。

Related Resources

Reddit Discussion about this server

Related MCP Servers

Fetch MCP Serverofficial
modelcontextprotocol
A
security
A
license
A
quality
This server enables LLMs to retrieve and process content from web pages, converting HTML to markdown for easier consumption.
Last updated -
1
50,522
Python
MIT License
mcp-server-browserbaseofficial
browserbase
A
security
A
license
A
quality
This server provides cloud browser automation capabilities using Browserbase, Puppeteer, and Stagehand. This server enables LLMs to interact with web pages, take screenshots, and execute JavaScript in a cloud browser environment.
Last updated -
8
419
1,734
TypeScript
Apache 2.0
Playwright MCP Server
lebrodus
A
security
F
license
A
quality
A server that enables browser automation using Playwright, allowing interaction with web pages, capturing screenshots, and executing JavaScript in a browser environment through LLMs.
Last updated -
12
9,457
1
TypeScript
cloudflare-browser-rendering-mcp
amotivv
A
security
A
license
A
quality
This MCP server provides tools for interacting with Cloudflare Browser Rendering, allowing you to fetch and process web content for use as context in LLMs directly from Cline or Claude Desktop.
Last updated -
5
1
TypeScript
MIT License

View all related MCP servers

Web Content MCP Server