Puppeteer MCP Server注目

Puppeteer MCP Server とは？

Puppeteer MCP Server は、Puppeteer を使って AI アシスタントに実際の Chromium ブラウザを操作させる、Model Context Protocol の初期リファレンスサーバーです。ページ移動、クリック、フォーム入力、スクリーンショット、JavaScript 実行ができます。現在はアーカイブされ、npm パッケージもサポート終了と表示されています。

このサーバーは Model Context Protocol プロジェクトが @modelcontextprotocol/server-puppeteer として公開し、modelcontextprotocol/servers リポジトリにありました。現在は modelcontextprotocol/servers-archived に移されており、同リポジトリはアーカイブ済みサーバーがメンテナンスされず、セキュリティ保証もないと明記しています。パッケージは今もインストール・実行できるため、既存の設定やチュートリアルで広く使われていますが、新しいプロジェクトでは積極的にメンテナンスされているブラウザサーバーを選ぶ方がよいでしょう（下記の代替ツールを参照）。

Puppeteer MCP Server の使い方

前提条件：Node.js（npx 用）または Docker。API キーやアカウントは不要で、ブラウザは自分のマシン上で動作します。

README には Puppeteer MCP server の実行方法が 2 つ記載されています。

• NPX：デスクトップに表示されるブラウザウィンドウを開きます。
• Docker（mcp/puppeteer イメージ）：コンテナ内でヘッドレス Chromium を実行します。

NPX の設定（このページに表示されている設定と同じ）：

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

Docker の設定：

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

Claude Code

Claude Code CLI で stdio サーバーを登録します。

claude mcp add puppeteer -- npx -y @modelcontextprotocol/server-puppeteer

Claude Desktop

上記いずれかの JSON を claude_desktop_config.json の mcpServers に追加し、Claude Desktop を再起動します。

Cursor

Cursor も同じ mcpServers 形式を読み込みます。NPX の設定を ~/.cursor/mcp.json（グローバル）または .cursor/mcp.json（プロジェクト単位）に記述します。

VS Code

README には NPX と Docker のワンクリックインストールリンクがあります。手動で設定する場合は、ワークスペースの .vscode/mcp.json にサーバーを追加します（このファイルでは外側の mcp キーは不要です）。

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

起動オプション

ブラウザは PUPPETEER_LAUNCH_OPTIONS 環境変数（JSON 文字列）でカスタマイズするか、puppeteer_navigate ツールに launchOptions を渡して設定できます。--no-sandbox や --disable-web-security のようにセキュリティを弱めるオプションは、ALLOW_DANGEROUS を "true" にする（またはツール呼び出しで allowDangerous: true を指定する）までは拒否されます。

"env": {
  "PUPPETEER_LAUNCH_OPTIONS": "{ \"headless\": false, \"executablePath\": \"C:/Program Files/Google/Chrome/Application/chrome.exe\", \"args\": [] }",
  "ALLOW_DANGEROUS": "true"
}

Puppeteer MCP Server の主な機能

• Puppeteer による実ブラウザの自動操作を、AI クライアントへの自然言語の指示で制御。
• ページ移動、クリック、ホバー、フォーム入力、<select> の選択、スクリーンショット、JavaScript 実行をカバーする 7 つのツール。
• ページ全体または単一要素（CSS セレクタ指定）のスクリーンショット。幅・高さを設定でき、base64 出力も選択可能。
• ブラウザのコンソール出力を MCP リソース console://logs として提供。
• 撮影したスクリーンショットをリソース screenshot://<name> として提供。
• 起動オプションをカスタマイズ可能で、危険な Chromium フラグへのガード付き。
• API キー不要でローカル実行。表示ありのブラウザ（NPX）か Docker のヘッドレスかを選べます。

Puppeteer MCP Server のツール

サーバーは 7 つのツールを 3 つのグループで提供します。

• ナビゲーションとページ状態： puppeteer_navigate は URL を開き、新しい launchOptions でブラウザを再起動することもできます。
• 操作： puppeteer_click、puppeteer_hover、puppeteer_fill、puppeteer_select は CSS セレクタで指定した要素を操作し、ほとんどのログインフォーム、検索ボックス、ドロップダウンに対応します。
• 確認： puppeteer_screenshot はページまたは 1 つの要素を撮影し、puppeteer_evaluate はページ内で任意の JavaScript を実行します。DOM の値を読んだり、他のツールでは取れないテキストを取得したりするのに便利です。

Puppeteer MCP Server のユースケース

• コーディング中の見た目の確認：「http://localhost:3000 を開いてヘッダーのスクリーンショットを撮り、ロゴがずれていないか教えて。」
• フォームのテスト：「サインアップページに行き、メールとパスワードを入力して送信をクリックし、エラーメッセージがあれば報告して。」
• 軽いスクレイピング：「この商品ページを開き、JavaScript で価格とタイトルを返して。」
• フロントエンドのエラー調査： アシスタントにページを読み込ませ、console://logs リソースを読んで JavaScript エラーを探させます。
• バグ報告の再現： 一連のクリックやドロップダウン選択を順に実行し、各ステップでスクリーンショットを撮ります。

Puppeteer MCP Server と代替ツールの比較

Puppeteer MCP server はアーカイブ済みのため、メンテナンスされている選択肢を知っておくと役立ちます。

• Playwright MCP Server：Microsoft 製。スクリーンショットや CSS セレクタではなくページのアクセシビリティスナップショットをもとに動作し、複数のブラウザに対応し、活発に開発されています。最も一般的な乗り換え先です。
• Chrome DevTools MCP：Chrome DevTools チーム製。内部で Puppeteer を使い、パフォーマンストレース、ネットワークの調査、ソースマップ付きスタックトレースを含むコンソールメッセージを追加しています。
• BrowserTools MCP Server：拡張機能を通じて既存の Chrome に接続します。すでに開いているブラウザからログや監査結果を得たい場合に便利です。

元の Puppeteer サーバーを選ぶのは、既存のワークフローがその正確なツール名や最小限の 7 ツール構成に依存している場合が中心です。

Puppeteer MCP Server のトラブルシューティング

• npm に「Package no longer supported」と表示される： これは想定どおりです。サーバーがアーカイブされたためパッケージは非推奨になっています。動作はしますが、上記の代替ツールを検討してもよいでしょう。
• ブラウザウィンドウが表示されない： Docker イメージはヘッドレス Chromium で動作します。ブラウザを見たい場合は NPX の設定を使うか、PUPPETEER_LAUNCH_OPTIONS で "headless": false を指定してください。
• 「危険な」起動引数でエラーになる： --no-sandbox などのフラグはデフォルトでブロックされます。ブラウザのセキュリティが下がることを理解したうえで、ALLOW_DANGEROUS を "true" にするか allowDangerous: true を渡してください。
• Chrome が違う、または見つからない： PUPPETEER_LAUNCH_OPTIONS の executablePath をインストール済みの Chrome に向けてください。
• VS Code でツールが表示されない： .vscode/mcp.json ではトップレベルの servers キーを使います。外側の mcp はユーザー設定ファイル専用です。