Agentive
AIエージェント活用

Claude MCP ブラウザ自動化の手順と実装例

約8分で読めます

AIエージェントに「ブラウザを操作させる」というのは、一見すると難しそうに思える。だが、ClaudeのMCP（Model Context Protocol）を使えば、拍子抜けするほど簡単に実現できた。

MCPとは何か

MCPはAnthropicが策定したオープンプロトコルで、ClaudeなどのAIモデルに外部ツールやリソースへのアクセスを与える仕組みだ。Playwrightやブラウザ操作ライブラリをMCPサーバーとして立ち上げると、Claudeがそれを「道具」として使えるようになる。

セットアップ手順

1. Playwright MCPサーバーを追加

claude mcp add playwright -- npx -y @playwright/mcp@latest

これだけでClaude CodeにPlaywrightが接続される。

2. 動作確認

Claude Codeを起動して、こう伝えるだけだ。

「Yahoo!ファイナンスを開いて、日経平均の現在値を教えて」

Claudeが実際にブラウザを立ち上げ、ページを開き、数値を読み取って返してくれる。

実際に自動化したこと

私が実装したのは以下のフロー：

  1. 特定のニュースサイトを毎朝巡回
  2. AI関連の記事タイトルと概要を収集
  3. Markdown形式でまとめてファイルに保存
  4. そのファイルをベースに記事の下書きを生成

これがほぼゼロコードで動いている。

詰まったポイント

ログインが必要なサイト: セッションCookieを事前に渡す必要がある。PlaywrightのstorageStateを使うと解決した。

動的ページの読み込み待ち: 「ページが完全に読み込まれるまで待ってから操作して」と自然言語で指示すれば、Claudeが適切に待機してくれた。

まとめ

MCPを使ったブラウザ自動化は、エンジニアでなくても使いこなせるレベルまで来ている。特にClaude CodeのMCP連携は、セットアップが極めてシンプルで、すぐに実用的な自動化ができる。

次は定期実行の仕組みを組み込んで、完全無人の情報収集パイプラインを作る予定だ。

関連記事

A

Agentive 編集部

AIエージェントを実際に使い倒す個人開発者。サイト制作の自動化を実践しながら、その知見を発信しています。