MCP Puppeteer

🚀 簡単なMCPサーバーを使ったPuppeteerによるChrome制御

このプロジェクトは、Puppeteerを通じてChromeを制御するための簡単なMCPサーバーを提供します。

🚀 クイックスタート

前提条件

⚠️ 重要提示

このプロジェクトではpuppeteer-coreを使用しており、追加のブラウザはインストールされません。遠隔デバッグポートを開いた状態でChromeを起動する方法を知っていることが前提となります。例えば、Macでは以下のようになります。

open -a "Google Chrome" --args --remote-debugging-port=9222

インストール

1. 依存関係のインストール

% pnpm i

2. MCPサーバーの起動

% pnpm run start

Cursorへの設定追加

3. Cursor → 設定 → Cursor Settings → MCP → 新しいグローバルMCPサーバーを追加し、以下の設定を追加します。

{
  "mcpServers": {
    "puppeteer-control": {
      "url": "http://localhost:7742/sse"
    }
  }
}

📚 ドキュメント

学習ポイント

1. TypeScript SDKのドキュメントには、新しい「Streamable HTTP」サポートが記載されており、そのサンプルにも反映されています。ただし、CursorではSSE（Server-Sent Events）サポートが必要であり、これについては公式MCPドキュメントで詳しく説明されています。
2. The Inspectorは非常に便利ですが、その使い方が少しわかりにくい場合があります。ローカルのMCPサーバーが起動しており、SSEを使用している場合は、単純にpnpx @modelcontextprotocol/inspectorコマンドを実行するだけで起動できます。