Zenn
🔥

🔥 Claude MCP + Puppeteer で始めるAI駆動のブラウザ自動化

2024/12/24に公開
スクレイピング
Puppeteer
mcp
生成 AI
Claude
tech

概要

近年のAI技術の進歩は目覚ましく、様々な分野でその活用が進んでいます。特に、自然言語処理分野における大規模言語モデル (LLM) の発展は、人間とコンピュータのインタラクションを大きく変えようとしています。Anthropic社が開発したClaudeもその一つで、高度な言語理解能力と推論能力を備えています。

Claudeは、Model Context Protocol (MCP) と呼ばれる革新的なプロトコルを通じて外部ツールと連携可能です。MCPを利用すると、Claudeはブラウザ操作を自動化するPuppeteerなどのツールと連携し、これまで以上に複雑で高度なタスクをこなせるようになります。

この記事では、ClaudeのMCPとPuppeteerを組み合わせることで実現する、AI駆動のブラウザ自動化について解説します。実際の動作を収録した動画も併せてご紹介しながら、その可能性を探っていきましょう。

🤖 Claude MCP + Puppeteerの概要

Claude MCPとは？

Claude MCPは、LLMであるClaudeが外部ツールと連携するためのプロトコルです。[1]
これにより、Claudeは単なるテキスト生成AIを超え、現実世界とインタラクトする能力を獲得します。MCPはデータインターフェース標準として、大規模モデルがAPIを介さずにデータに直接アクセスできるようにし、異なるモデル間でも使用可能であるため、柔軟性と相互運用性が向上します。[2]

Puppeteerとは？

Puppeteerは、Node.jsライブラリの一つで、ChromeやChromiumブラウザをヘッドレスモードで操作できるAPIを提供します。[3]

  • Webページのスクレイピング
  • テストの自動化
  • スクリーンショットの取得

など、幅広い用途で活用できます。

Claude MCP + Puppeteerでできること

Claude MCPとPuppeteerを組み合わせることで、以下のようなことが可能になります。

  • プロンプトに基づく自律的なブラウザ操作
  • テストシナリオに基づいたWebアプリケーションの自動テスト
  • Webページのコンテンツ解析

Claudeはローカルマシンで動作します。これは、モバイルやブラウザ上で動作する他のAIモデルとは異なるアプローチです。[4]
ローカルで動くことで制約もありますが、MCPサーバー経由でリアルタイムなデータソースに接続でき、データサイロの制限がなくなるため、テストの精度向上などの恩恵を受けられます。[3:1]

MCPとPuppeteerの連携 (Mermaid図 - ローカル環境)

この図は、ローカル環境におけるClaude、MCPサーバー（内部にPuppeteerモジュールを含む）、Webブラウザ間のデータの流れを示しています。以下に、具体的な処理の流れを解説します。

  1. ユーザー (プロンプト入力): ユーザーは、Claudeに対して実行したいブラウザ操作を記述したプロンプトを入力します。

  2. Claude: Claudeは、ユーザーからのプロンプトを受け取り、その内容を解釈します。そして、ブラウザ操作の命令を生成し、ローカルのMCPサーバーに送信します。

  3. MCPサーバー+Puppeteer内包: MCPサーバーは、Claudeからの命令を受け取ります。このMCPサーバーはPuppeteerの機能を内包しており、受け取った命令に基づいて直接Webブラウザを操作します。例えば、Webページの読み込み、要素のクリック、情報の取得などを行います。

  4. Webブラウザ: MCPサーバー（内包するPuppeteer機能）によって操作されるWebブラウザは、要求されたWebページを表示し、その情報をMCPサーバーに返します。

  5. 情報のフィードバック: Webブラウザからの情報は、MCPサーバーを経由してClaudeに返されます。Claudeは受け取った情報を処理し、ユーザーに分かりやすい形で応答を返します。

  6. ユーザーへの応答: Claudeは、処理結果やWebページから取得した情報をユーザーに提示します。

🚀 MCPとFunction Callingの違い

  • Function Calling
    「呼び出し」ベースの仕組みで、単発タスクの実行に重点を置く。シンプルなタスクには向いているが、大規模・複雑なタスクにはやや不向き。

  • MCP (Model Context Protocol)
    「接続」ベースの仕組みで、継続的なコンテキスト管理と複数システムの協調に重点を置く。複数ステップ・複数システムが絡む複雑なシナリオを処理しやすい。[2:1]
    プロトコル標準化により、長期的なエコシステム開発コストを削減し、データ共有やコンテキスト協調を強力にサポートする。

MCPとPuppeteerのローカルセットアップ

以下の記事にWindowsとMacにおける環境構築方法が書かれているのでご参照ください
https://kt-life.net/puppeteer-mcp-server/

🎥 デモ動画の紹介

本記事では、下記3本の動画を用意しました。いずれも実際の画面操作やコンテンツ解析を行ったシーンを収録しています。ぜひご覧ください。

  1. Zenn内部で画面遷移して表示コンテンツを解析してみたデモ (📝記事管理ページに遷移 + metaデータ解析)

  2. YouTubeでスクショを撮りながら解析してみたデモ (📺動画操作 + コメント解析)

  3. 任意のページを適当に遷移させて画面解析したデモ (🔎複数ページ + 見出し抽出)

📝 実際のデモ内容 (Zennでの画面遷移 & コンテンツ解析)

今回の実演では、Zennのユーザー記事管理ページに遷移し、表示される各記事のmeta情報を解析するというシンプルなデモを行いました。具体的には、以下のようなステップをPuppeteerとClaude MCPの連携で自動化しています。

  1. Zennのトップページへアクセス

    • Puppeteerでトップページへ遷移。
    • ページのタイトルや主要な見出し要素を解析して取得。

  2. ユーザー記事管理ページへ移動

    • 記事一覧のメタデータ（タイトルや公開設定など）が表示されるページにアクセス。
    • 対象となる各記事のmeta情報（タイトル、slugなど）をDOM構造から取得。

  3. 取得したmetaデータをLLMに渡して解析・要約

    • Claudeに転送し、記事の概要や分類などを簡易的にまとめさせる。
    • 必要に応じてスクリーンショットを撮影し、レポート化する。

今回はフォーム入力といった操作は行わず、あくまで画面遷移→表示コンテンツの抽出→meta情報の解析に注力する形でデモを行いました。これだけでも、LLMを活用したブラウザ自動化の有用性が十分に感じられるはずです。

📺 YouTubeの操作と解析

Claude MCP + Puppeteerを利用すると、YouTube上の動画再生・停止の自動化や、エンゲージメント情報（いいね数、コメント数、視聴回数など）の解析も可能です。[3:2][5]
ただし、今回のデモ動画では、スクリーンショットの撮影と簡単なコメント欄の解析を試した程度です。

  • 動画再生と停止を自動化
  • コメント欄のテキスト取得や、いいね数などの要素を解析
  • スクリーンショットを定期的に撮り、ページ変遷を監視する

現在のところ、映像認識や音声認識といった動画内容自体の解析はサポートされていません。[6][7]

🛠️ テストの自動化 (モンキーテスト)

今回のテストデモは、計画的・網羅的なテストではなく、モンキーテストとして「ランダムに要素をクリックし、ページを遷移して挙動を解析する」形式を中心に行いました。ただし、Claude MCP + Puppeteerを使えば、以下のような本格的なテスト自動化にも応用可能です。

  1. ログイン機能の確認

    • 正常なユーザー情報でログイン
    • 異常なユーザー情報でログインしてエラー発生をチェック

  2. フォーム入力や送信操作

    • 必須項目のバリデーションを確認
    • 入力結果が正しく反映されるかテスト

  3. E2Eテスト (ユーザーフロー全般)

    • 複数ページにまたがる操作を自動化し、システム全体の動作を検証

将来的には、こうした具体的なテストシナリオとClaude MCPを組み合わせることで、高度な自動テストを実現できるようになるでしょう。

🔎 ブラウザの内容解析

Claude MCP + Puppeteerは、開いているブラウザの内容を解析することも可能です。例えば、以下の情報を取得してLLMへ渡す流れが考えられます。

  • ページタイトル・主要な見出し (<h1>, <h2>など)
  • リンクテキスト一覧
  • 本文やmetaタグのキーワード抽出

実際にDOMを解析し、主要テキスト要素・属性値を一括取得してClaudeに渡すことで、サマリやハイライトを生成できる点が魅力です。

💡 システム要件を理解したE2Eテスト

今後の拡張としては、システム要件を理解したうえでの本格的なE2Eテストも期待されています。[3:3]

  • プロジェクトの要件定義書や設計書などをClaudeに学習させる
  • システム全体の動作を把握したテストシナリオを自動生成
  • より高度なテストケースの作成・実行

例えば、「ユーザーが商品をカートに追加→注文完了」という一連のEC操作を、システム要件に基づいて行うことを想定できます。

🚀 今後の展望

Claude MCP + Puppeteerは、まだ開発初期段階ですが、その可能性は計り知れません。Anthropic社は、Claude for Workなど組織全体へサービスを提供できるリモートプロダクションMCPサーバーをデプロイするための開発者向けツールキットを近日中に公開予定です。[1:1]

今後、さらに期待される機能例:

  • より複雑なWebアプリケーション操作
  • 複数ブラウザの同時操作
  • ユーザーインターフェースの自動生成
  • Webアプリケーションの脆弱性診断

🤝 結論

Claude MCP + Puppeteerは、AI駆動のブラウザ自動化を実現する革新的技術です。プロンプトによる自律的な画面遷移、テスト自動化（今回のデモではモンキーテスト）、ブラウザ内容の解析など、多彩な機能を提供します。

  • Web開発: 手動のブラウザ操作を自動化することで、⏫生産性と創造性を高められる
  • テスト: シンプルなモンキーテストだけでなく、網羅的なテストシナリオの自動生成・実行により、⚙️効率と品質を大きく向上できる
  • 運用: サイト監視や障害対応の自動化につながり、💰コスト削減やサービス安定化を後押しする

このように、Claude MCP + Puppeteerは今後さらに発展し、Web開発・テスト・運用など、さまざまな分野を変革しうるポテンシャルを秘めています。今回のデモ動画も参考に、ぜひ一度試してみてください。

📚 参考文献・関連情報

脚注

  1. Introducing the Model Context Protocol - Anthropic ↩︎ ↩︎

  2. Claude出了MCP, 与Function Calling区别? - 筋斗云SEO - 翼果科技 ↩︎ ↩︎

  3. Is This the Future of UI Testing? Puppeteer + Claude AI's MCP - YouTube ↩︎ ↩︎ ↩︎ ↩︎

  4. Claude(with MCP) Builds, Runs and Tests Web Apps by Looking At Screenshots now? - YouTube ↩︎

  5. Anthropic、生成AIとデータソースを接続するプロトコル「Model Context Protocol」をオープンソースとして公開 | gihyo.jp ↩︎

  6. 【Model Context Protocol】Claudeが全てのアプリと繋がる！？SlackやGitHubと連携してみた ↩︎

  7. Tutorial: Use Claude Desktop, MCP, Puppeteer to Automatically Extract Data From The Web (Medium) ↩︎

Discussion