Puppeteer MCP

Puppeteer MCP

Puppeteer MCPは、AIエージェントと言語モデルが、Puppeteerライブラリを使って高度なブラウザ自動化やウェブスクレイピングを行うためのモデルコンテキストプロトコルサーバーです。ヘッドレスブラウザセッションへの安全で制御されたアクセスを提供し、LLMがウェブサイトをナビゲートし、構造化データや非構造化データを抽出し、動的コンテンツと対話し、実際のブラウザを使っているかのように操作を実行できます。

Author: modelcontextprotocol


プロトコルを表示

Puppeteer MCPとは何ですか？

Puppeteer MCPは、モデルコンテキストプロトコルを通じてブラウザ自動化機能を提供するプラグイン/サーバーです。これにより、LLMやエージェントフレームワークがウェブブラウジング、スクレイピング、自動化を行いやすくなります。PuppeteerのヘッドレスChromeライブラリを活用し、モデルやエージェントはプログラムでウェブページを訪れ、フォームに記入し、ボタンをクリックし、スクリーンショットをキャプチャし、データをスクレイプできます。すべて標準化されたMCPエンドポイントを使って行います。

Puppeteer MCPの設定方法

  1. Node.jsをインストールします（未インストールの場合）。
  2. 次のコマンドを使ってPuppeteer MCPサーバーをインストールします： 
    npx -y @modelcontextprotocol/server-puppeteer
    または、依存関係としてインストールします： 
    npm install -g @modelcontextprotocol/server-puppeteer
  3. サーバーを起動します： 
    npx -y @modelcontextprotocol/server-puppeteer
    環境変数やコマンドライン引数を渡してカスタム設定（アクセス制御、サンドボックス設定、ヘッドレスオプションなど）を行うこともできます。
  4. MCPクライアント/エージェントアプリケーション（Claude Desktopなど）を設定します。Puppeteer MCPサーバーに接続するために、そのコマンドと必要な引数を指定します。 例（Claude DesktopのJSON設定）： 
    {
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}
  5. 必要に応じて、セキュリティ設定、ネットワークアクセスを調整します。また、MCPサーバーをリモートで公開する場合は認証を設定します。

Puppeteer MCPの使用方法

  1. 利用可能なツールを発見します： MCPクライアントを使ってtools/listエンドポイントをクエリし、どのPuppeteerベースのアクションが利用可能かを確認します（例：puppeteer.navigate、puppeteer.evaluate、puppeteer.screenshotなど）。
  2. ツールを呼び出します： 適切なパラメータを指定して、MCPプロトコルを通じて希望の関数を呼び出します（例：ナビゲートするURLやクリックする要素セレクタを指定します）。
  3. シーケンスを自動化します： 複数のPuppeteerツール呼び出しを連鎖させ、複雑なワークフローをスクリプト化します。ウェブサイトにログインし、複数のページをナビゲートし、テーブルやグラフをスクレイプし、ファイルをダウンロードすることなどができます。
  4. 結果を取得し、処理します： 各呼び出しの出力には、ページコンテンツ、DOMスナップショット、抽出された値、バイナリデータ（スクリーンショット、PDFなど）が含まれます。
  5. 他のMCPツールとの統合： Puppeteer MCPを他のMCPサーバー（ファイルシステム、メモリ、データベースなど）と組み合わせて、多段階かつ多様な自動化とデータ処理を実現します。

主な機能

  • ヘッドレスブラウザの自動化： Chrome/Chromiumをシームレスに制御し、完全なウェブインタラクションを提供します。
  • 動的コンテンツアクセス： JavaScriptが多く使われたSPAやインタラクティブなサイトをサポートします。
  • データ抽出： 正確なセレクタを使用して、構造化および非構造化コンテンツをスクレイプします。
  • アクションのシミュレーション： 実際のユーザーのようにクリック、入力、選択、スクロール、対話します。
  • リソースキャプチャ： スクリーンショットを撮り、PDFを生成し、レンダリングされたHTMLまたはDOMフラグメントを抽出します。
  • セキュリティとサンドボックス化： 精密な権限設定が不安全なアクションを防ぎ、安全な操作を保証します。
  • 簡単な統合： 標準化されたMCPインターフェースが主要なLLMエージェント/アプリとすぐに使えます。
  • スクリプト可能なシーケンス： ツール呼び出しを連鎖させて複雑なワークフローを編成します。

ユースケース

  • 自動ウェブスクレイピング： 商品リスト、ニュース記事、公開データセット、またはソーシャルメディアの投稿を抽出します。
  • 動的データ収集： 基本的なHTTPリクエストではアクセスできないJavaScriptレンダリングページからデータを取得します。
  • フォームの記入と送信： ログイン、サインアップ、または複数ステップのデータ入力プロセスを自動化します。
  • 視覚的回帰と監視： 重要なウェブページのスクリーンショットやPDFを定期的に取得して監視または記録します。
  • テストとQA： LLMワークフロー内で自動UIテストや回帰チェックを実行します。
  • エージェントによるブラウジングの強化： LLMがブラウザを「操作」し、NLPタスク中にライブウェブコンテンツを調査、要約、検証することを可能にします。

よくある質問

1. Puppeteer MCPサーバーを使用するには、事前にPuppeteerの知識が必要ですか？
いいえ。ツールは簡単に使えるMCPエンドポイントとして提供され、明確な説明が付いています。ユーザーやLLMは一般的なブラウザアクションをトリガーするためにPuppeteer APIの詳細を知っている必要はありません。

2. サーバーがアクセスできるウェブサイトやアクションを制限するにはどうすればよいですか？
許可されたドメイン、ブロックリスト、または安全リストアクションを環境変数やコマンドラインパラメータを使用して設定できます。特に共有または本番環境では、アクセス制御のベストプラクティスに従ってください。

3. Puppeteer MCPを使ってキャプチャやログイン画面をバイパスできますか？
Puppeteer MCPは、フォームの記入やナビゲーションを含む完全なブラウザアクションをサポートしていますが、ネイティブなキャプチャ解決機能は含まれていません。人間による解決を行うためのキャプチャを表示するために使用するか、希望に応じてサードパーティのプラグイン/サービスを利用することができます。

4. Puppeteer MCPはどのファイルタイプを出力できますか？
HTML、生のテキスト、スクリーンショット（PNG/JPEG）、PDF、およびDOMからスクレイプされた任意のデータを抽出できます。

5. 以前の結果に依存する複数ステップのワークフローを自動化することは可能ですか？
はい。エージェントまたはクライアントのロジック内で複数のツール呼び出しを連鎖させ、必要に応じて一つのステップから他のステップに出力を渡すことができます。