Cloudflare Browser Rendering MCP Server

Cloudflare Browser Rendering MCP サーバー

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

機能

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

前提条件

• Node.js v18 以降
• Browser Rendering API を利用できる Cloudflare アカウント
• 提供されている puppeteer-worker.js ファイルを使用してデプロイした Cloudflare Worker

インストール

Smithery 経由でインストールする

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

npx -y @smithery/cli install @amotivv/cloudflare-browser-rendering-mcp --client claude

1. このリポジトリをクローンします：

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

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

   npm install
   

3. プロジェクトをビルドします：

   npm run build
   

Cloudflare Worker のセットアップ

1. Wrangler を使用して puppeteer-worker.js ファイルを Cloudflare Workers にデプロイします：

   npx wrangler deploy
   

2. Cloudflare Worker に次のバインディングを設定してください：

   • browser という名前の Browser Rendering バインディング
   • SCREENSHOTS という名前の KV 名前空間バインディング

3. デプロイした Worker の URL を控えておきます（例：https://browser-rendering-api.yourusername.workers.dev）

設定

Claude Desktop の場合

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 Desktop を再起動します

Cline の場合

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 の両方で利用できます。次のツールを使用できます：

fetch_page

LLM のコンテキストとして使用するウェブページを取得、処理します。

パラメーター：

• url（必須）：取得する URL
• maxContentLength（任意）：返すコンテンツの最大文字数

例：

Can you fetch and summarize the content from https://developers.cloudflare.com/browser-rendering/?

search_documentation

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

パラメーター：

• query（必須）：検索クエリ
• maxResults（任意）：返す検索結果の最大数

例：

Search the Cloudflare documentation for information about "browser rendering API".

extract_structured_content

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

パラメーター：

• url（必須）：コンテンツの抽出元となる URL
• selectors（必須）：コンテンツの抽出に使用する CSS セレクター

例：

Extract the main heading and first paragraph from https://developers.cloudflare.com/browser-rendering/ using the selectors h1 and p.

summarize_content

ウェブコンテンツを要約して、LLM のコンテキストをより簡潔にします。

パラメーター：

• url（必須）：要約する URL
• maxLength（任意）：要約の最大長

例：

Summarize the content from https://developers.cloudflare.com/browser-rendering/ in 300 words or less.

take_screenshot

ウェブページのスクリーンショットを撮影します。

パラメーター：

• url（必須）：スクリーンショットを撮影する URL
• width（任意）：ビューポートの幅（ピクセル単位、デフォルト：1280）
• height（任意）：ビューポートの高さ（ピクセル単位、デフォルト：800）
• fullPage（任意）：ページ全体またはビューポートのみのスクリーンショットを撮影するかどうか（デフォルト：false）

例：

Take a screenshot of https://developers.cloudflare.com/browser-rendering/ with a width of 1024 pixels.

トラブルシューティング

ロギング

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

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

ログを確認するには、次の手順に従ってください。

• Claude Desktop：~/Library/Logs/Claude/mcp*.log（macOS）または %APPDATA%\Claude\Logs\mcp*.log（Windows）にあるログを確認します
• Cline：ログは VSCode 拡張機能の出力コンソールに表示されます

よくある問題

1. 「BROWSER_RENDERING_API environment variable is not set」

   • MCP サーバーの設定で、Cloudflare Worker の正しい URL を設定していることを確認してください

2. 「Cloudflare worker API is unavailable or not configured」

   • Cloudflare Worker がデプロイされ、稼働していることを確認してください
   • URL が正しく、アクセス可能であることを確認してください

3. 「Browser binding is not available」

   • Cloudflare Worker で Browser Rendering バインディングを設定していることを確認してください

4. 「SCREENSHOTS KV binding is not available」

   • Cloudflare Worker で KV 名前空間バインディングを設定していることを確認してください

開発

プロジェクト構成

• src/index.ts：メインエントリーポイント
• src/server.ts：MCP サーバーの実装
• src/browser-client.ts：Cloudflare Browser Rendering と連携するクライアント
• src/content-processor.ts：LLM コンテキスト向けにウェブコンテンツを処理します
• puppeteer-worker.js：Cloudflare Worker の実装

ビルド

npm run build

テスト

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

npm test

このスクリプトでは、次の処理を行います。

1. MCP サーバーを起動します
2. サンプルリクエストを使用して各ツールをテストします
3. レスポンスを検証します
4. テスト結果の概要を表示します

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

# Test the Puppeteer integration
npm run test:puppeteer

テストを正しく実行するには、次の点を確認してください。

1. npm run build でプロジェクトをビルドしていること
2. BROWSER_RENDERING_API 環境変数に Cloudflare Worker の URL を設定していること
3. 必要なバインディングを設定して Cloudflare Worker をデプロイしていること

ライセンス

MIT