Skip to main content
Glama
enesjakozh

Web Content MCP Server

by amotivv
GitHub
TypeScript
MIT License
7
  • Apple
OverviewInspectNewEndpointsSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

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 (ワーカーのデプロイ用)

インストール

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

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

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

npm install

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

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

npm install @cloudflare/puppeteer

  1. Wrangler を設定します。

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

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

npx wrangler deploy

  1. ワーカーをテストする:

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 サーバーは次のツールを提供します。

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

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

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

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

構成

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

export BROWSER_RENDERING_API=https://YOUR_WORKER_URL_HERE

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

  1. テストファイル内: test-puppeteer.js 、 examples/debugging-tools/debug-test.js 、 examples/testing/content-test.js

  2. MCP サーバー構成: cline_mcp_settings.json.example

  3. ブラウザクライアントの場合: 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ファイルに構成を追加します。

主な学び

  1. Cloudflare ブラウザ レンダリングでは、ブラウザ バインディングと対話するために@cloudflare/puppeteerパッケージが必要です。

  2. ブラウザ バインディングを使用する正しいパターンは次のとおりです。

    import puppeteer from '@cloudflare/puppeteer'; // Then in your handler: const browser = await puppeteer.launch(env.browser); const page = await browser.newPage();

  3. ブラウザ レンダリング バインディングを使用するワーカーをデプロイする場合は、 nodejs_compat互換性フラグを有効にする必要があります。

  4. リソースの漏洩を防ぐため、使用後は必ずブラウザを閉じてください。

ライセンス

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

Deploy Server
A
security – no known vulnerabilities
-
license - not tested
A
quality - confirmed to work

How are these scores calculated?

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 コンテンツを抽出および処理し、ページの取得、ドキュメントの検索、構造化コンテンツの抽出、コンテンツの要約を行うツールを提供するサーバー。

  1. プロジェクト構造
    1. 前提条件
      1. インストール
        1. Cloudflareワーカーのセットアップ
          1. 実験の実行
            1. 基本的なREST API実験
            2. Puppeteer バインディング API 実験
            3. コンテンツ抽出実験
          2. MCPサーバー
            1. MCPサーバーの構築
            2. MCPサーバーの実行
            3. MCP サーバーツール
          3. 構成
            1. Clineとの統合
              1. 主な学び
                1. ライセンス

                  Related Resources

                  Related MCP Servers

                  • Fetch MCP Serverofficial

                    modelcontextprotocol
                    A
                    security
                    -
                    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
                    71,192
                    MIT License
                    • Linux
                    • Apple

                  • Fetch MCP Server

                    ExactDoug
                    A
                    security
                    -
                    license
                    A
                    quality
                    Enables retrieval and processing of web page content for LLMs by converting HTML to markdown, with support for content truncation and pagination.
                    Last updated -
                    1
                    2
                    MIT License

                  • MCP Web Tools Server

                    surya-madhav
                    -
                    security
                    -
                    license
                    -
                    quality
                    A Model Context Protocol server that allows LLMs to interact with web content through standardized tools, currently supporting web scraping functionality.
                    Last updated -
                    1
                    MIT License
                    • Linux
                    • Apple

                  • cloudflare-browser-rendering-mcp

                    amotivv
                    A
                    security
                    -
                    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
                    10
                    MIT License
                    • Apple

                  View all related MCP servers

                  Appeared in Searches

                  New MCP Servers

                  MCP directory API

                  We provide all the information about MCP servers via our MCP API.

                  curl -X GET 'https://glama.ai/api/mcp/v1/servers/amotivv/cloudflare-browser-rendering'

                  If you have feedback or need assistance with the MCP directory API, please join our Discord server