MCP Puppeteer

🚀 皮影戏工具集

このツールセットは、Puppeteer を使用した Model Context Protocol サーバーで、ブラウザの自動化機能を提供します。このサーバーにより、LLM は実際のブラウザ環境でウェブページとのインタラクション、スクリーンショットの取得、JavaScript の実行が可能になります。

✨ 主な機能

• ブラウザ自動化
• コンソールログの監視
• スクリーンショット機能
• JavaScript の実行
• 基本的なウェブページインタラクション（ナビゲーション、クリック、フォーム入力）

📦 インストール

Docker

注意：Docker の実装ではヘッドレス Chromium が使用され、NPX バージョンではブラウザウィンドウが開きます。

{
  "mcpServers": {
    "puppeteer": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "--init",
        "-e",
        "DOCKER_CONTAINER=true",
        "mcp/puppeteer"
      ]
    }
  }
}

NPX

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

💻 使用例

コンポーネント

ツール

• puppeteer_navigate

  • ブラウザで任意の URL にナビゲートします。
  • 入力：url（文字列）

• puppeteer_screenshot

  • ページまたは特定の要素のスクリーンショットを取得します。
  • 入力：
    • name（文字列、必須）：スクリーンショットの名前
    • selector（文字列、オプション）：スクリーンショットを取得する要素の CSS セレクター
    • width（数値、オプション、デフォルト値：800）：スクリーンショットの幅
    • height（数値、オプション、デフォルト値：600）：スクリーンショットの高さ

• puppeteer_click

  • ページ上の要素をクリックします。
  • 入力：selector（文字列）：クリックする要素のセレクター

• puppeteer_hover

  • ページ上の要素にマウスをホバーさせます。
  • 入力：selector（文字列）：ホバーする要素のセレクター

• puppeteer_fill

  • 入力フィールドに値を入力します。
  • 入力：
    • selector（文字列）：入力フィールドのセレクター
    • value（文字列）：入力する値

• puppeteer_select

  • SELECT タグ内の要素を選択します。
  • 入力：
    • selector（文字列）：選択する要素のセレクター
    • value（文字列）：選択する値

• puppeteer_evaluate

  • ブラウザコンソールで JavaScript を実行します。
  • 入力：script（文字列）：実行する JavaScript コード

リソース

サーバーは 2 種類のリソースを提供します。

1. コンソールログ (console://logs)

• ブラウザコンソールの出力をテキスト形式で提供します。
• ブラウザ内のすべてのコンソールメッセージを含みます。

2. スクリーンショット (screenshot://<name>)

• 指定された名前の PNG 画像のスクリーンショットを提供します。
• スクリーンショットの名前を使用して取得したスクリーンショットにアクセスできます。

🔧 ビルド

Docker ビルド：

docker build -t mcp/puppeteer -f src/puppeteer/Dockerfile .

📄 ライセンス

この MCP サーバーは MIT ライセンスの下で公開されています。これは、MIT ライセンスの条項と条件に従い、ソフトウェアを自由に使用、変更、配布できることを意味します。詳細については、プロジェクトリポジトリ内の LICENSE ファイルを参照してください。