【MCP活用ノート03】AIにブラウザ操作を任せる新時代の開発術 - Puppeteer MCP

はじめに

AIと一緒にフロントエンド開発を進めていると、こんな悩みはありませんか？
ページのレイアウトを微調整したい時、「ここのボタンの配置がおかしいです」「モバイルでテキストが見切れています」とAIに説明しようとしても、言葉だけではなかなか伝わらない。結局、毎回スクリーンショットを撮って「ここの部分です」と説明しても、細かいニュアンスが伝わりきらずにもどかしい思いをしていました。

そんな中で出会ったのが「Puppeteer MCP」です。実際に導入してみると、これまでのフロントエンド開発フローが劇的に変わりました。

AIに「このページのモバイル表示をチェックして」と伝えるだけで、実際にブラウザを操作してスクリーンショットを撮ってくれる。フォームに関しても「入力フィールドの動作を確認して」と言えば、実際にテストデータを入力して問題点を指摘してくれます。実際に使ってみて、これほど開発効率が上がったMCPは久しぶりでした。

Puppeteer MCPとは

Puppeteer MCPは、AIがWebブラウザを実際に操作できるようにする仕組みです。「このページをチェックして」という自然な指示だけで、AIが実際にChromeを立ち上げて、まるで人間のようにページを確認してくれます。

できること一覧

• ページを開く - 開発中のサイトに直接アクセス
• 画面を撮る - レイアウトやデザインの確認
• 要素を操作 - ボタンクリック、フォーム入力
• コードを実行 - JavaScriptでページの状態をチェック
• ログを確認 - ブラウザのコンソールエラーをチェック

インストール方法

前提条件

• Node.js v18以上（推奨：v20以上）
• 使用したいエディタ（Cursor、Claude Desktop等）

設定ファイルの場所

Cursor

• Windows: C:\Users\<ユーザー名>\.cursor\mcp.json
• Mac/Linux: ~/.cursor/mcp.json

Claude Code

Claude Codeでは以下のコマンドでMCPサーバーを追加できます：

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

環境変数を設定する場合：

claude mcp add puppeteer -e PUPPETEER_LAUNCH_OPTIONS='{"headless": false, "slowMo": 100}' -- npx -y @modelcontextprotocol/server-puppeteer

Windsurf

• Windows: C:\Users\<ユーザー名>\.codeium\windsurf\mcp_config.json
• Mac/Linux: ~/.codeium/windsurf/mcp_config.json

設定例

基本設定（推奨）

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"],
      "env": {
        "PUPPETEER_LAUNCH_OPTIONS": "{\"headless\": false}",
        "ALLOW_DANGEROUS": "true"
      }
    }
  }
}

高度な設定（詳細オプション付き）

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"],
      "env": {
        "PUPPETEER_LAUNCH_OPTIONS": "{\"headless\": false, \"slowMo\": 100, \"args\": [\"--no-sandbox\"]}",
        "ALLOW_DANGEROUS": "true"
      }
    }
  }
}

基本的な使い方

設定が完了したら、動作確認から始めることをお勧めします。私の場合は、「Googleにアクセスしてスクリーンショットを撮ってください」という簡単な指示から始めました。これで設定が正しくできているかすぐに確認できます。

実際の活用例

レスポンシブデザインの確認

「開発中のページのレスポンシブ対応をチェックして」と指示するだけで、デスクトップ・タブレット・モバイルの各サイズでスクリーンショットを撮影してもらっています。レイアウトの崩れやUIの問題点を具体的に指摘してくれるため、手動確認の手間が大幅に削減されました。

フォーム機能のテスト自動化

お問い合わせフォームの動作確認は「このフォームの動作をテストして」の一言で完了。バリデーションエラーの表示から送信後の画面遷移まで、一連の流れを自動でチェックしてくれるため、テストの漏れや抜けが解消されました。

UIコンポーネントの動作検証

モーダルやドロップダウンメニューなどのUIコンポーネントは、実際の操作を通じて動作を確認。私は「このボタンをクリックしてモーダルの表示を確認して」といった具体的な指示を出していますが、動作の問題点とデザインの改善点を同時に把握できるので助かっています。

エラーチェックとパフォーマンス監視

開発中によく見落としがちなのが、コンソールエラーです。私は定期的に「ページを読み込んでコンソールエラーがないかチェックして」と依頼していますが、404エラーやJavaScriptエラーを早期発見できるので、品質向上につながっています。

トラブルシューティング

主な問題と解決方法

ブラウザが起動しない場合

• エディタの完全再起動を実行
• 設定ファイルのJSON構文を確認
• Node.jsのバージョンが要件を満たしているか確認

権限エラーが発生する場合

• 設定に "ALLOW_DANGEROUS": "true" を追加
• 開発環境での使用であることを確認

ブラウザの動作が確認できない場合

• "slowMo": 100 を設定に追加してブラウザの動作速度を調整
• "headless": false でブラウザを可視化

問題発生時の診断手順

1. コンソールエラーの確認：「ブラウザのコンソールにエラーが出ていないかチェックして」
2. URL状態の確認：現在のページURLが想定通りかを確認
3. スクリーンショットによる状況把握：エラー発生箇所を視覚的に確認

まとめ

Puppeteer MCPを導入してから、私のフロントエンド開発ワークフローは大きく変わりました。これまで手動で行っていた繰り返し作業の多くを、自然な言葉でAIに依頼できるようになったからです。

特に印象的だったのは、「このページのレスポンシブ対応をチェックして」「フォームの動作を確認して」といった、まさに普段の作業で使う言葉そのままで指示できることです。複雑なコマンドを覚える必要がないので、導入のハードルが低いと感じています。

私の場合、レスポンシブデザインのチェックやフォーム機能のテスト、コンソールエラーの監視などを中心に活用していますが、使い慣れてくるとより創造的な使い方も見えてきます。開発効率が上がっただけでなく、品質向上にもつながっていると実感しています。

設定自体は思ったより簡単でした。JSONファイルを編集するだけで、すぐに使い始められます。フロントエンド開発をされている方には、ぜひ一度試してみていただきたいツールです。