Puppeteer Vision MCP サーバー

「Puppeteer Vision」MCP サーバーは何をするものか？

Puppeteer Vision MCP サーバーは、Puppeteer、Readability、Turndown を利用し、AI アシスタントによるウェブページのスクレイピングと Markdown 形式への変換を実現します。Cookie バナーや CAPTCHA、ペイウォールなどのウェブ要素も自動で処理できる高度な AI 駆動のインタラクションにより、対話的または保護されたサイトからも堅牢にコンテンツを抽出します。この機能は Model Context Protocol (MCP) を通じて提供され、AI 開発ワークフローへの統合も容易です。自動ウェブスクレイピング、コンテンツ要約、データ取り込みなどのタスクを LLM がシームレスに実行できます。サーバーは npx ですぐにデプロイでき、最小限の設定で、stdio と SSE 通信の両方をサポートし柔軟な統合が可能です。

プロンプト一覧

リポジトリやドキュメントにプロンプトテンプレートは記載されていません。

リソース一覧

リポジトリやドキュメントに明記された MCP リソースはありません。

ツール一覧

• scrape-webpage: 指定した URL のウェブページをスクレイピングし、AI でインタラクティブ要素（Cookie バナーや CAPTCHA など）を突破し、Readability で主要コンテンツを抽出し、Markdown に変換します。パラメータは以下です:
  • url (string, 必須): スクレイピングするウェブページの URL。
  • autoInteract (boolean, オプション, デフォルト: true): インタラクティブ要素を自動処理するか。
  • maxInteractionAttempts (number, オプション, デフォルト: 3): AI の最大インタラクション試行回数。
  • waitForNetworkIdle (boolean, オプション, デフォルト: true): スクレイピング前にネットワークアイドル状態を待つか。

この MCP サーバーのユースケース

• 知識取り込みのための自動ウェブスクレイピング
  開発者は任意のウェブページから可読性の高い Markdown を抽出し、AI ワークフローやデータベース、ナレッジベースに最新コンテンツを容易に取り込めます。
• 対話的障壁の突破
  AI 駆動のインタラクションで CAPTCHA や Cookie バナー、その他の障害を自動で突破し、通常は自動化が難しいサイトからもシームレスにコンテンツを抽出できます。
• 要約・コンテンツ分析
  抽出した Markdown を LLM に入力して要約・感情分析・分類などを行い、調査やデータ処理を効率化します。
• リアルタイムブラウザ自動化
  デバッグやデモ、ブラウザ動作の視覚的確認が必要な場合は可視（非ヘッドレス）モードでも利用可能です。
• LLM オーケストレーションパイプラインへの統合
  MCP サーバーとして Windsurf、Claude、Cursor、Cline などのオーケストレーターに組み込め、AI エージェントのライブウェブ連携能力を拡張します。

セットアップ方法

Windsurf

1. 前提条件: Node.js と npm をインストールします。

2. 環境設定: .env ファイルを作成するか、OPENAI_API_KEY など必要な環境変数をエクスポートします。

3. 設定ファイルの編集: Windsurf の設定ファイルを探します。

4. Puppeteer Vision MCP を追加: 以下の JSON スニペットを挿入します:

   {
     "mcpServers": {
       "web-scraper": {
         "command": "npx",
         "args": ["-y", "puppeteer-vision-mcp-server"],
         "env": {
           "OPENAI_API_KEY": "YOUR_OPENAI_API_KEY_HERE"
         }
       }
     }
   }
   

5. 保存・再起動: ファイルを保存し、Windsurf を再起動します。

6. 確認: ログや UI で MCP サーバーが起動していることを確認します。

API キーのセキュリティ:
機密情報は環境変数（例: .env）で管理してください。

"env": {
  "OPENAI_API_KEY": "${OPENAI_API_KEY}"
}

Claude

1. 前提条件: Node.js と npm がインストールされていることを確認します。

2. 環境設定: .env を用意するか OPENAI_API_KEY などをエクスポートします。

3. 設定ファイルの編集: Claude の MCP 設定を開きます。

4. MCP サーバーを追加:

   {
     "mcpServers": {
       "web-scraper": {
         "command": "npx",
         "args": ["-y", "puppeteer-vision-mcp-server"],
         "env": {
           "OPENAI_API_KEY": "YOUR_OPENAI_API_KEY_HERE"
         }
       }
     }
   }
   

5. Claude を再起動: 変更を適用し、プラットフォームを再起動します。

6. 確認: 正常な起動を確認します。

Cursor

1. 前提条件: Node.js と npm をインストールします。

2. 環境設定: OpenAI API キーで .env をセットアップします。

3. Cursor 設定の編集: MCP サーバーを以下のように追加します:

   {
     "mcpServers": {
       "web-scraper": {
         "command": "npx",
         "args": ["-y", "puppeteer-vision-mcp-server"],
         "env": {
           "OPENAI_API_KEY": "YOUR_OPENAI_API_KEY_HERE"
         }
       }
     }
   }
   

4. 保存・再起動: 変更を保存し、Cursor を再起動します。

5. ログ確認: サーバーが稼働していることを確認します。

Cline

1. 前提条件: Node.js と npm をインストールします。

2. 環境設定: OPENAI_API_KEY をエクスポートまたは設定します。

3. 設定: Cline の MCP 設定に以下を追加します:

   {
     "mcpServers": {
       "web-scraper": {
         "command": "npx",
         "args": ["-y", "puppeteer-vision-mcp-server"],
         "env": {
           "OPENAI_API_KEY": "YOUR_OPENAI_API_KEY_HERE"
         }
       }
     }
   }
   

4. Cline を再起動: 反映させて再起動します。

5. 確認: サーバーが利用可能か検証します。

注意: API キーは環境変数で安全に管理し、設定ファイルに直接記載しないでください。

フロー内でこの MCP を使う方法

FlowHunt で MCP を利用する

FlowHunt ワークフローに MCP サーバーを統合するには、まず MCP コンポーネントをフローに追加し、AI エージェントに接続します。

MCP コンポーネントをクリックして設定パネルを開きます。システム MCP 設定欄に、以下の JSON 形式で MCP サーバー情報を入力します:

{
  "puppeteer-vision": {
    "transport": "streamable_http",
    "url": "https://yourmcpserver.example/pathtothemcp/url"
  }
}

設定が完了すると、AI エージェントはこの MCP をツールとして使い、その全機能にアクセスできるようになります。“puppeteer-vision” の部分は実際の MCP サーバー名に、URL もご自身の MCP サーバー URL に置き換えてください。

概要

| Roots サポート | ⛔ | Roots の記載なし |

上記より、Puppeteer Vision MCP サーバーは堅牢で特化したウェブスクレイピングツールとして強力なドキュメントとセキュリティガイダンスを持ちますが、複数のツールやプロンプトテンプレート、リソース、Roots やサンプリングといった高度な MCP 機能は不足しています。ワンツール・ワンパーパスの設計により用途には高い信頼性を発揮しますが、拡張性には限りがあります。

当社の見解

MCP スコア: 5/10
この MCP サーバーはドキュメントが充実しており、特定用途には有用でセットアップも容易ですが、プロンプトテンプレートや明示的なリソース、高度な MCP 機能（roots、sampling）がないため汎用性やエコシステム統合性は限定的です。

MCP スコア