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

このMCP（Model Context Protocol）サーバーは、Cloudflare Browser Renderingを使用してウェブコンテンツを取得および処理し、LLMのコンテキストとして使用するためのツールを提供します。ClaudeとClineの両方のクライアント環境で動作するように設計されています。

特徴

• Web コンテンツの取得: LLM コンテキストの Web ページを取得して処理します。
• ドキュメント検索: Cloudflareのドキュメントを検索し、関連するコンテンツを返します
• 構造化コンテンツの抽出: CSSセレクタを使用してWebページから構造化コンテンツを抽出します
• コンテンツ要約: LLM コンテキストをより簡潔にするために Web コンテンツを要約します
• スクリーンショットキャプチャ: Webページのスクリーンショットを撮る

前提条件

• Node.js v18以上
• ブラウザレンダリングAPIアクセスを持つCloudflareアカウント
• 提供されたpuppeteer-worker.jsファイルを使用してデプロイされた Cloudflare Worker

インストール

Smithery経由でインストール

Smithery経由で Claude Desktop 用の Cloudflare Browser Rendering を自動的にインストールするには:

1. このリポジトリをクローンします:
   git clone https://github.com/yourusername/cloudflare-browser-rendering.git cd cloudflare-browser-rendering
2. 依存関係をインストールします:
   npm install
3. プロジェクトをビルドします。
   npm run build

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

1. Wrangler を使用してpuppeteer-worker.jsファイルを Cloudflare Workers にデプロイします。
   npx wrangler deploy
2. Cloudflare Worker で次のバインディングを必ず構成してください。
   • ブラウザレンダリングバインディングのbrowser
   • SCREENSHOTSという名前の KV 名前空間バインディング
3. デプロイされたワーカーの URL をメモします (例: https://browser-rendering-api.yourusername.workers.dev )

構成

クロードデスクトップ向け

1. Claude Desktop 構成ファイルを開きます。
   # macOS code ~/Library/Application\ Support/Claude/claude_desktop_config.json # Windows code %APPDATA%\Claude\claude_desktop_config.json
2. MCP サーバー構成を追加します。
   { "mcpServers": { "cloudflare-browser-rendering": { "command": "node", "args": ["/path/to/cloudflare-browser-rendering/dist/index.js"], "env": { "BROWSER_RENDERING_API": "https://your-worker-url.workers.dev" }, "disabled": false, "autoApprove": [] } } }
3. Claudeデスクトップを再起動します

クラインのために

1. Cline MCP 設定ファイルを開きます。
   # macOS code ~/Library/Application\ Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json # Windows code %APPDATA%\Code\User\globalStorage\saoudrizwan.claude-dev\settings\cline_mcp_settings.json
2. MCP サーバー構成を追加します。
   { "mcpServers": { "cloudflare-browser-rendering": { "command": "node", "args": ["/path/to/cloudflare-browser-rendering/dist/index.js"], "env": { "BROWSER_RENDERING_API": "https://your-worker-url.workers.dev" }, "disabled": false, "autoApprove": [] } } }

使用法

設定が完了すると、MCPサーバーはClaude DesktopとClineの両方で利用できるようになります。以下のツールをご利用いただけます。

フェッチページ

LLM コンテキストの Web ページを取得して処理します。

パラメータ:

• url (必須): 取得するURL
• maxContentLength (オプション): 返されるコンテンツの最大長

例：

検索ドキュメント

Cloudflare のドキュメントを検索し、関連するコンテンツを返します。

パラメータ:

• query （必須）: 検索クエリ
• maxResults (オプション): 返される結果の最大数

例：

構造化コンテンツの抽出

CSS セレクターを使用して Web ページから構造化コンテンツを抽出します。

パラメータ:

• url (必須): コンテンツを抽出するURL
• selectors （必須）: コンテンツを抽出するための CSS セレクター

例：

要約内容

LLM コンテキストをより簡潔にするために Web コンテンツを要約します。

パラメータ:

• url (必須): 要約するURL
• maxLength (オプション): 要約の最大長

例：

スクリーンショット

Web ページのスクリーンショットを撮ります。

パラメータ:

• url (必須): スクリーンショットを撮るURL
• width (オプション): ビューポートの幅（ピクセル単位）（デフォルト: 1280）
• height （オプション）：ビューポートの高さ（ピクセル単位）（デフォルト：800）
• fullPage (オプション): ページ全体のスクリーンショットを撮るか、ビューポートのみのスクリーンショットを撮るか (デフォルト: false)

例：

トラブルシューティング

ログ記録

MCP サーバーは、次のプレフィックスを持つ包括的なログ記録を使用します。

• [Setup] ：初期化と設定
• [API] : APIリクエストとレスポンス
• [Error] : エラー処理とデバッグ

ログを表示するには:

• Claude デスクトップ: ~/Library/Logs/Claude/mcp*.log (macOS) または%APPDATA%\Claude\Logs\mcp*.log (Windows) のログを確認してください。
• Cline : VSCode拡張機能の出力コンソールにログが表示されます

よくある問題

1. 「BROWSER_RENDERING_API環境変数が設定されていません」
   • MCPサーバー設定でCloudflare Workerへの正しいURLが設定されていることを確認してください。
2. 「CloudflareワーカーAPIは利用できないか、設定されていません」
   • Cloudflare Workerがデプロイされ、実行されていることを確認します
   • URLが正しくアクセス可能か確認してください
3. 「ブラウザバインディングは利用できません」
   • Cloudflare Workerでブラウザレンダリングバインディングが設定されていることを確認してください。
4. 「スクリーンショットKVバインディングは利用できません」
   • Cloudflare WorkerでKV名前空間バインディングが設定されていることを確認してください。

発達

プロジェクト構造

• src/index.ts : メインエントリポイント
• src/server.ts : MCP サーバーの実装
• src/browser-client.ts : Cloudflare ブラウザレンダリングと対話するためのクライアント
• src/content-processor.ts : LLMコンテキストのWebコンテンツを処理します
• puppeteer-worker.js : Cloudflare Worker の実装

建物

テスト

このプロジェクトには、すべての MCP ツールが正しく動作していることを確認する包括的なテスト スクリプトが含まれています。

これにより、次のようになります。

1. MCPサーバーを起動する
2. サンプルリクエストで各ツールをテストする
3. 回答を確認する
4. テスト結果の要約を提供する

特定のコンポーネントに対して個別のテストを実行することもできます。

テストが適切に機能するには、次のものを用意してください。

1. npm run buildでプロジェクトをビルドしました
2. BROWSER_RENDERING_API環境変数をCloudflare Worker URLに設定します。
3. 必要なバインディングを使用してCloudflare Workerをデプロイしました

ライセンス

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