mcpField
B
browser-use

browser-use

github.com/mxyhiエージェントワークフロー50742 回インストール今日更新
リポジトリ

browser-use について

`browser-use` コマンドラインを使うブラウザー自動化スキルです。永続セッションでのページ確認、操作、結果検証に加え、Chrome プロファイルやクラウドブラウザーの利用方法も説明します。

主な機能

  1. 01永続的なブラウザーセッション
  2. 02ページ要素の確認と操作
  3. 03Chrome プロファイルへの接続
  4. 04クラウドブラウザーとトンネルの利用
  5. 05MCP サーバーとして実行

活用シーン

  1. 01ページ移動やフォーム入力の自動化
  2. 02保存済みログイン情報でのサイト閲覧
  3. 03トンネル経由でのローカル開発サイト確認

MCP 対応

`browser-use` コマンドラインは `--mcp` を指定して MCP サーバーとして実行できます。このスキルでは、そのモードで MCP クライアントから利用できるブラウザー操作を説明します。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mxyhi/ok-skills --skill browser-use

インストール後、Claude Code で/browser-useを入力して読み込まれたか確認します。

同梱ファイルreferences/cdp-python.mdreferences/multi-session.md

詳細

browser-use CLI によるブラウザー自動化

browser-use コマンドを使うと、高速で永続的なブラウザー自動化を実行できます。バックグラウンドデーモンがコマンド間もブラウザーを開いたままにするため、呼び出しごとの遅延は約50ミリ秒です。

前提条件

browser-use doctor    # Verify installation

セットアップの詳細については、https://github.com/browser-use/browser-use/blob/main/browser_use/skill_cli/README.md をご覧ください。

基本的なワークフロー

  1. 移動:browser-use open <url> — ヘッドレスブラウザーを起動してページを開きます
  2. 確認:browser-use state — インデックス付きのクリック可能な要素を返します
  3. 操作:state のインデックスを使います(browser-use click 5、browser-use input 3 "text")
  4. 検証:browser-use state または browser-use screenshot で確認します
  5. 繰り返し:コマンド間もブラウザーは開いたままです

コマンドが失敗した場合は、まず browser-use close を実行して壊れたセッションをクリアしてから、再試行してください。

ユーザーが使用中の Chrome を利用する場合(ログイン状態や Cookie を保持):最初に browser-use connect を実行します。 代わりにクラウドブラウザーを利用する場合:最初に browser-use cloud connect を実行します。 いずれの場合も、その後のコマンドは同じように使えます。

browser-use connect が失敗した場合

browser-use connect でリモートデバッグ中の Chrome が見つからない場合は、ユーザーに次の2つの選択肢を提示してください。

  1. 実際に使用している Chrome ブラウザーを使う — 事前にリモートデバッグを有効にする必要があります。
    • Chrome で chrome://inspect/#remote-debugging を開くか、--remote-debugging-port=9222 を指定して Chrome を再起動します
    • その後、browser-use connect を再試行します
  2. Chrome プロファイルを使って管理対象の Chromium を利用する — Chrome のセットアップは不要です。
    • browser-use profile list を実行して利用可能なプロファイルを表示します
    • 使用するプロファイルを尋ねてから、browser-use --profile "ProfileName" open <url> を使います
    • ユーザーのプロファイルデータ(Cookie、ログイン情報、拡張機能)を使って、別の Chromium インスタンスを起動します

どちらかを決めつけず、ユーザーに選んでもらってください。

ブラウザーモード

browser-use open <url>                         # Default: headless Chromium (no setup needed)
browser-use --headed open <url>                # Visible window (for debugging)
browser-use connect                            # Connect to user's Chrome (preserves logins/cookies)
browser-use cloud connect                      # Cloud browser (zero-config, requires API key)
browser-use --profile "Default" open <url>     # Real Chrome with specific profile

connect または cloud connect の実行後は、以降のコマンドはすべてそのブラウザーに送られるため、追加のフラグは不要です。

コマンド

# Navigation
browser-use open <url>                    # Navigate to URL
browser-use back                          # Go back in history
browser-use scroll down                   # Scroll down (--amount N for pixels)
browser-use scroll up                     # Scroll up
browser-use tab list                      # List all tabs
browser-use tab new [url]                 # Open a new tab (blank or with URL)
browser-use tab switch <index>            # Switch to tab by index
browser-use tab close <index> [index...]  # Close one or more tabs

# Page State — always run state first to get element indices
browser-use state                         # URL, title, clickable elements with indices
browser-use screenshot [path.png]         # Screenshot (base64 if no path, --full for full page)

# Interactions — use indices from state
browser-use click <index>                 # Click element by index
browser-use click <x> <y>                 # Click at pixel coordinates
browser-use type "text"                   # Type into focused element
browser-use input <index> "text"          # Click element, clear existing text, then type
browser-use input <index> ""              # Clear a field without typing new text
browser-use keys "Enter"                  # Send keyboard keys (also "Control+a", etc.)
browser-use select <index> "option"       # Select dropdown option
browser-use upload <index> <path>         # Upload file to file input
browser-use hover <index>                 # Hover over element
browser-use dblclick <index>              # Double-click element
browser-use rightclick <index>            # Right-click element

# Data Extraction
browser-use eval "js code"                # Execute JavaScript, return result
browser-use get title                     # Page title
browser-use get html [--selector "h1"]    # Page HTML (or scoped to selector)
browser-use get text <index>              # Element text content
browser-use get value <index>             # Input/textarea value
browser-use get attributes <index>        # Element attributes
browser-use get bbox <index>              # Bounding box (x, y, width, height)

# Wait
browser-use wait selector "css"           # Wait for element (--state visible|hidden|attached|detached, --timeout ms)
browser-use wait text "text"              # Wait for text to appear

# Cookies
browser-use cookies get [--url <url>]     # Get cookies (optionally filtered)
browser-use cookies set <name> <value>    # Set cookie (--domain, --secure, --http-only, --same-site, --expires)
browser-use cookies clear [--url <url>]   # Clear cookies
browser-use cookies export <file>         # Export to JSON
browser-use cookies import <file>         # Import from JSON

# Session
browser-use close                         # Close browser and stop daemon
browser-use sessions                      # List active sessions
browser-use close --all                   # Close all sessions

CDP、デバイスエミュレーション、タブのアクティブ化などの高度なブラウザー制御については、references/cdp-python.md をご覧ください。

クラウド API

browser-use cloud connect                 # Provision cloud browser and connect (zero-config)
browser-use cloud login <api-key>         # Save API key (or set BROWSER_USE_API_KEY)
browser-use cloud logout                  # Remove API key
browser-use cloud v2 GET /browsers        # REST passthrough (v2 or v3)
browser-use cloud v2 POST /tasks '{"task":"...","url":"..."}'
browser-use cloud v2 poll <task-id>       # Poll task until done
browser-use cloud v2 --help               # Show API endpoints

cloud connect は永続プロファイル(初回使用時に自動作成)を備えたクラウドブラウザーを用意し、CDP 経由で接続してライブ URL を出力します。browser-use close は接続を切断し、クラウドブラウザーも停止します。カスタムのブラウザー設定(プロキシ、タイムアウト、特定のプロファイル)を使用するには、希望するパラメーターを指定して cloud v2 POST /browsers を直接使います。

エージェントの自己登録

API キーをまだ持っていない場合にのみ使用してください(browser-use doctor を実行すると api_key が設定されているか確認できます)。すでにログインしている場合は、すべてスキップしてください。

  1. browser-use cloud signup — チャレンジを取得します
  2. チャレンジを解決します
  3. browser-use cloud signup --verify <challenge-id> <answer> — 検証して API キーを保存します
  4. browser-use cloud signup --claim — 人間がアカウントを取得するための URL を生成します

トンネル

browser-use tunnel <port>                 # Start Cloudflare tunnel (idempotent)
browser-use tunnel list                   # Show active tunnels
browser-use tunnel stop <port>            # Stop tunnel
browser-use tunnel stop --all             # Stop all tunnels

プロファイル管理

browser-use profile list                  # List detected browsers and profiles
browser-use profile sync --all            # Sync profiles to cloud
browser-use profile update                # Download/update profile-use binary

コマンドの連結

コマンドは && で連結できます。デーモンによってブラウザーが維持されるため、連結しても安全かつ効率的です。

browser-use open https://example.com && browser-use state
browser-use input 5 "[email protected]" && browser-use input 6 "password" && browser-use click 7

途中の出力が不要な場合は連結してください。インデックスを見つけるために state を解析する必要がある場合は、コマンドを個別に実行してください。

よくあるワークフロー

認証が必要なブラウジング

認証が必要なサイト(Gmail、GitHub、社内ツール)でタスクを実行する場合は、Chrome プロファイルを使います。

browser-use profile list                           # Check available profiles
# Ask the user which profile to use, then:
browser-use --profile "Default" open https://github.com  # Already logged in
ローカル開発サーバーの公開
browser-use tunnel 3000                            # → https://abc.trycloudflare.com
browser-use open https://abc.trycloudflare.com     # Browse the tunnel

複数のブラウザー

サブエージェントのワークフローや複数のブラウザーの並列実行では、--session NAME を使います。各セッションは独自のブラウザーを取得します。詳しくは references/multi-session.md をご覧ください。

設定

browser-use config list                            # Show all config values
browser-use config set cloud_connect_proxy jp      # Set a value
browser-use config get cloud_connect_proxy         # Get a value
browser-use config unset cloud_connect_timeout     # Remove a value
browser-use doctor                                 # Shows config + diagnostics
browser-use setup                                  # Interactive post-install setup

設定は ~/.browser-use/config.json に保存されます。

グローバルオプション

オプション説明
--headedブラウザーウィンドウを表示します
--profile [NAME]実際の Chrome を使用します(--profile のみの場合は「Default」を使用します)
--cdp-url <url>CDP URL(http:// または ws://)経由で接続します
--session NAME名前付きセッションを対象にします(デフォルト:「default」)
--jsonJSON 形式で出力します
--mcpstdin/stdout 経由で MCP サーバーとして実行します

ヒント

  1. まず必ず state を実行して、利用可能な要素とそのインデックスを確認してください
  2. デバッグには --headed を使用して、ブラウザーの動作を確認してください
  3. セッションは保持されます — コマンド間でブラウザーは開いたままです
  4. CLI のエイリアス:bu、browser、browseruse を使用できます
  5. コマンドが失敗した場合は、まず browser-use close を実行してから再試行してください

トラブルシューティング

  • ブラウザーが起動しませんか? browser-use close を実行してから、browser-use --headed open <url> を実行してください
  • 要素が見つかりませんか? browser-use scroll down を実行してから、browser-use state を実行してください
  • 診断を実行: browser-use doctor

クリーンアップ

browser-use close                         # Close browser session
browser-use tunnel stop --all             # Stop tunnels (if any)

コメント