【実装】browser-use v2 CLIをClaude Codeに統合してブラウザ自動操作を実現する

はじめに

AIエージェントにブラウザ操作を任せたい場面は増えています。デプロイ後の動作確認、フォーム入力テスト、スクリーンショット取得など、手作業でやっていた作業をClaude Codeに委任できたら効率的です。

browser-use v2は「Make websites accessible for AI agents」をコンセプトに、AIエージェントがWebサイトを自動操作できるオープンソースツールです。CLI、MCPサーバー、Claude Codeスキルなど多彩な統合方法を提供しています。

この記事では、CLI方式でClaude Codeに統合し、実際にブログサイト全ページの動作確認を自動化した実践例を紹介します。

この記事でわかること

• browser-use v2の概要と3つの統合方式の違い

• CLIのインストールとClaude Codeスキル登録の全手順

• ヘッドレスブラウザでの全ページ自動巡回テストの実践方法

• ダークモード切替やフォーム入力など、インタラクティブなテスト手法

• browser-use CLIの主要コマンドと活用Tips

対象読者

• Claude Codeを日常的に使っている開発者

• AIエージェントによるブラウザ自動操作に興味がある方

• デプロイ後の動作確認を効率化したい方

前提条件

• Claude Codeがインストール済み

• Python 3.11以上

• uv パッケージマネージャー（推奨）

browser-use v2 の統合方式

browser-useをClaude Codeで使うには3つの方法があります。

CLI方式が最も軽量で、追加のAPIキーも不要なため、今回はこの方式を採用します。

セットアップ手順

1. browser-use CLIのインストール

uvのグローバルツールとしてインストールします。

uv tool install 'browser-use[cli]'

これで browser-use、bu、browser、browseruse の4つのエイリアスが使えるようになります。

2. Chromiumのインストール

browser-useが使うヘッドレスChromiumをインストールします。

browser-use install

Playwright経由でChromiumがダウンロードされます（約160MB）。

3. インストールの確認

browser-use doctor

以下のように表示されればOKです。

Diagnostics:
  ✓ package: browser-use
  ✓ browser: Browser profile available
  ○ api_key: No API key configured     # CLIローカル利用には不要
  ○ cloudflared: Not available          # トンネル機能未使用なら不要
  ✓ network: Network connectivity OK

api_key と cloudflared は CLIローカル利用では不要なので、警告が出ていても問題ありません。

4. Claude Codeスキルとして登録

browser-use公式が提供するスキルファイルをダウンロードします。

mkdir -p ~/.claude/skills/browser-use
curl -sL -o ~/.claude/skills/browser-use/SKILL.md \
  https://raw.githubusercontent.com/browser-use/browser-use/main/skills/browser-use/SKILL.md

これだけで完了です。Claude Codeが「ブラウザで確認して」「サイトを開いて」などの指示を受けると、自動的にこのスキルが使われます。

CLIの基本コマンド

ワークフロー

browser-use CLIの基本的な操作フローは以下の通りです。

flowchart TD
    A[browser-use open URL] --> B[browser-use state]
    B --> C{操作対象を特定}
    C --> D[browser-use click index]
    C --> E[browser-use input index text]
    C --> F[browser-use scroll down]
    D --> G[browser-use screenshot]
    E --> G
    F --> B
    G --> H{完了?}
    H -->|No| B
    H -->|Yes| I[browser-use close]

主要コマンド一覧

ブラウザモード

browser-use open <url>                    # ヘッドレス（デフォルト）
browser-use --headed open <url>           # ウィンドウ表示（デバッグ用）
browser-use --profile "Default" open <url> # Chrome実ブラウザ（ログイン済み状態）
browser-use --connect open <url>          # 既存Chromeに接続

--headed をつけるとブラウザウィンドウが表示されるので、動作確認時に便利です。--profile を使えばChromeの既存プロファイル（ログイン済みCookieなど）をそのまま使えます。

実践：ブログサイト全ページ自動巡回テスト

実際にブログサイトの全ページを自動巡回して動作確認を行った例を紹介します。「全てのページを見に行って動作確認して」と指示しただけで、Claude Codeが自律的に以下を実行しました。

確認対象

• トップページ（スクロールで全体確認）

• ブログ一覧（ページネーション）

• 記事詳細ページ（本文レンダリング含む）

• カテゴリページ

• タグページ

• アーカイブページ

• 検索ページ（実際の検索実行含む）

• Aboutページ

• ダークモード切替

トップページの確認

ページを開いてスクリーンショットを取得、スクロールで全体を確認します。

browser-use open https://example.com && browser-use screenshot /tmp/home.png
browser-use scroll down --amount 800 && browser-use screenshot /tmp/home2.png

要素の動的な取得と操作

state コマンドで操作可能な要素をインデックス付きで取得し、そのインデックスを使って操作します。

browser-use state
# 出力例:
# [29]<a /> kt-tech.blog
# [30]<a /> Home
# [31]<a /> Blog
# [770]<a /> トラブルシューティング  18記事

インデックスを使って操作します。

browser-use click 770

JavaScriptでURLを一括取得

eval コマンドでJavaScriptを直接実行し、ページ内のリンクを効率的に収集できます。

browser-use eval "Array.from(document.querySelectorAll('a')).filter(a => a.href.includes('/tags/')).map(a => a.href).slice(0, 5)"
// 出力: ['https://example.com/tags/react', 'https://example.com/tags/typescript', ...]

ダークモード切替テスト

テーマ切替ボタンの操作もインデックスベースで行えます。

# テーマ切替ボタンを探す
browser-use state | grep "Toggle theme"
# [2878]<button id=radix-:Rsjlb: ... /> Toggle theme

ボタンをクリックしてメニューを開き、ダークモードを選択します。

browser-use click 2878
browser-use state | grep "Dark"
# [3409]<div role=menuitem /> Dark
browser-use click 3409
browser-use screenshot /tmp/dark.png

検索機能のテスト

フォーム入力と送信も自動化できます。

browser-use open https://example.com/searches
browser-use input 4 "Next.js"
browser-use keys "Enter"
browser-use wait selector "article" --timeout 10000
browser-use screenshot /tmp/search_result.png

セッション管理

複数のセッションを使い分けて並行作業も可能です。

browser-use open https://example.com                            # メインセッション
browser-use --session search open https://example.com/searches  # 別セッション
browser-use sessions                                            # セッション一覧
browser-use close --all                                         # 全セッション終了

今回の巡回テスト結果

全ページを巡回した結果、すべて正常に動作していることを確認できました。

1回の「動作確認して」の指示で、約10ページの巡回、スクリーンショット取得、フォーム入力テスト、ダークモード切替確認が自動実行されました。

Tips: browser-use CLIを使いこなすコツ

1. 必ず state を先に実行する

操作対象の要素インデックスは毎回変わるため、操作前に必ず state で最新のインデックスを取得しましょう。

2. --headed でデバッグ

ヘッドレスで意図通り動かない場合は --headed をつけてブラウザウィンドウを表示し、視覚的に確認しましょう。

3. eval で複雑な操作を効率化

DOMの一括取得やページ内のURL収集など、eval でJavaScriptを直接実行すると効率的です。

4. コマンドチェーンを活用

依存関係のないコマンドは && でチェーンすると高速です。

browser-use open https://example.com && browser-use screenshot /tmp/page.png

5. Cookie管理でログイン状態を保持

認証が必要なサイトには --profile か Cookie管理コマンドを使います。

browser-use --profile "Default" open https://github.com  # ログイン済みプロファイルを使用
browser-use cookies export cookies.json                   # Cookie保存
browser-use cookies import cookies.json                   # Cookie復元

トラブルシューティング

参考リンク

• browser-use GitHub: https://github.com/browser-use/browser-use

• browser-use ドキュメント: https://docs.browser-use.com

• Claude Code Skills ドキュメント: https://docs.anthropic.com/claude-code/skills

まとめ

• browser-use v2 CLIは無料でClaude Codeに統合でき、ブラウザ自動操作を実現する

• セットアップは uv tool install → browser-use install → スキルファイル配置の3ステップ

• state でインデックス取得 → click / input で操作の基本フローを覚えれば多様なテストが可能

• デプロイ後の全ページ巡回、ダークモード確認、検索テストなどの手作業を大幅に効率化できる

• 「動作確認して」の一言でClaude Codeが自律的にサイト全体を巡回してくれる