agent-browser

このスキルを使用する場面

ユーザーが次のことを希望している場合は、このスキルを使用してください。

• CLI 経由でブラウザー操作（クリック、入力、ページ遷移、スクリーンショット撮影）を自動化する
• Web コンテンツをスクレイピングしたり、ページからデータを抽出したりする
• Web サイトとやり取りする AI エージェントのワークフローを構築する
• refs ベースの要素選択を使用して、決定的な自動化を行う
• JSON 出力を使ってエージェントモードでブラウザー自動化を実行する
• カスタムヘッダーまたは CDP を使用して認証済みセッションを管理する

このスキルの使い方

このスキルは、agent-browser の公式ドキュメントの構成（https://github.com/vercel-labs/agent-browser/blob/main/README.md）に合わせて構成されています。agent-browser を使用する際は、次の手順に従ってください。

クイックスタート例：スナップショット → 特定 → 操作

# 1. Install
npm install -g @anthropic-ai/agent-browser

# 2. Open a page and take a snapshot to get element refs
agent-browser open "https://example.com"
agent-browser snapshot
# Output includes refs like @e1, @e2, @e3 for each element

# 3. Click an element by ref
agent-browser click @e3

# 4. Fill a form field
agent-browser fill @e5 "[email protected]"

# 5. Agent mode (JSON output for programmatic use)
agent-browser snapshot --json

詳細なドキュメント

1. agent-browser のインストール：

   • インストール手順については、examples/getting-started/installation.md を読み込んでください

2. クイックスタート：

   • 基本的なワークフローの例については、examples/quick-start/quick-start.md を読み込んでください

3. 基本的なコマンドを学ぶ：

   • 基本的なコマンド（open、click、fill など）については、examples/commands/basic-commands.md を読み込んでください
   • 高度なコマンド（snapshot、eval など）については、examples/commands/advanced-commands.md を読み込んでください
   • 情報取得コマンドについては、examples/commands/get-info/ を読み込んでください
   • 状態確認コマンドについては、examples/commands/check-state/ を読み込んでください
   • セマンティックロケーターコマンドについては、examples/commands/find-elements/ を読み込んでください
   • 待機コマンドについては、examples/commands/wait/ を読み込んでください
   • マウス操作コマンドについては、examples/commands/mouse-control/ を読み込んでください
   • ブラウザー設定については、examples/commands/browser-settings/ を読み込んでください
   • Cookie とストレージの管理については、examples/commands/cookies-storage/ を読み込んでください
   • ネットワークインターセプトについては、examples/commands/network/ を読み込んでください
   • タブとウィンドウの管理については、examples/commands/tabs-windows/ を読み込んでください
   • iframe の処理については、examples/commands/frames/ を読み込んでください
   • ダイアログの処理については、examples/commands/dialogs/ を読み込んでください
   • デバッグコマンドについては、examples/commands/debug/ を読み込んでください
   • ページ遷移コマンドについては、examples/commands/navigation/ を読み込んでください
   • セットアップコマンドについては、examples/commands/setup/ を読み込んでください

4. セレクターを理解する：

   • refs ベースの選択（@e1、@e2 など）については、examples/selectors/refs.md を読み込んでください
   • CSS、XPath、セマンティックロケーターについては、examples/selectors/traditional-selectors.md を読み込んでください

5. エージェントモードを使用する：

   • エージェントモードの概要については、examples/agent-mode/introduction.md を読み込んでください
   • 最適な AI ワークフローについては、examples/agent-mode/optimal-workflow.md を読み込んでください
   • AI エージェントとの連携については、examples/agent-mode/integration.md を読み込んでください

6. 高度な機能：

   • セッション管理については、examples/advanced/sessions.md を読み込んでください
   • ブラウザーを表示した状態でのデバッグについては、examples/advanced/headed-mode.md を読み込んでください
   • ヘッダーを使った認証については、examples/advanced/authenticated-sessions.md を読み込んでください
   • カスタムブラウザー実行ファイルについては、examples/advanced/custom-executable.md を読み込んでください
   • Chrome DevTools Protocol との連携については、examples/advanced/cdp-mode.md を読み込んでください
   • ブラウザーのビューポートのストリーミングについては、examples/advanced/streaming.md を読み込んでください
   • アーキテクチャの概要については、examples/advanced/architecture.md を読み込んでください
   • プラットフォームのサポートについては、examples/advanced/platforms.md を読み込んでください
   • AI エージェントとの連携パターンについては、examples/advanced/usage-with-agents.md を読み込んでください

7. オプションを設定する：

   • CLI のグローバルオプションについては、examples/options/global-options.md を読み込んでください
   • スナップショット固有のオプションについては、examples/options/snapshot-options.md を読み込んでください
   • セッション管理オプションについては、examples/options/session-options.md を読み込んでください

8. 必要に応じて、API ドキュメントを参照します：

   • api/commands.md - コマンドの完全なリファレンス
   • api/selectors.md - セレクターのリファレンス
   • api/options.md - オプションのリファレンス

9. クイックスタートにはテンプレートを使用します：

   • templates/basic-automation.md - 基本的な自動化ワークフロー
   • templates/ai-agent-workflow.md - AI エージェントのワークフローテンプレート

ドキュメントの対応関係（公式ドキュメントと一対一で対応）

• 例と API ファイルを参照 → https://github.com/vercel-labs/agent-browser

例とテンプレート

このスキルには、公式ドキュメントの構成に合わせて整理された詳細な例が含まれています。すべての例は examples/ ディレクトリにあります（上記の対応関係を参照）。

例を使用するには：

• ユーザーのリクエストからトピックを特定します
• 上記の対応関係から適切な例のファイルを読み込みます
• そのファイルの指示、構文、ベストプラクティスに従います
• コード例を具体的なユースケースに合わせて調整します

テンプレートを使用するには：

• 一般的なスキャフォールディングには templates/ ディレクトリのテンプレートを参照します
• テンプレートを具体的なニーズやコーディングスタイルに合わせて調整します

API リファレンス

• Commands API：api/commands.md - 構文と例を含むコマンドの完全なリファレンス
• Selectors API：api/selectors.md - セレクターの種類と使用方法のリファレンス
• Options API：api/options.md - すべてのオプションのリファレンス

ベストプラクティス

1. Refs を使用する：決定論的な自動化には、従来のセレクターより refs（@e1、@e2）を優先します
2. 最初にスナップショットを取得する：要素を操作する前に、常にスナップショットを取得して refs を取得します
3. エージェントモード：エージェントモードでは、機械可読な出力を得るために --json フラグを使用します
4. セッション管理：コマンド間で状態を維持するには --session を使用します
5. インタラクティブスナップショット：インタラクティブなスナップショット選択には -i フラグを使用します
6. セマンティックロケーター：refs が利用できない場合は、セマンティックロケーター（role/name）を使用します
7. エラー処理：コマンドの終了コードとエラーメッセージを確認します
8. ナビゲーションの完了を待つ：コマンドはナビゲーションの完了を自動的に待機します
9. ヘッド付きモード：デバッグには --headed を使用し、本番環境ではヘッドレスモードを使用します
10. CDP 統合：Chrome DevTools Protocol との統合には --cdp を使用します
11. ストリーミング：ライブブラウザーのプレビューには AGENT_BROWSER_STREAM_PORT を使用します
12. 認証済みセッション：ログインフローを使わずに認証するには --headers を使用します
13. カスタム実行可能ファイル：サーバーレスデプロイまたはカスタムブラウザーには --executable-path を使用します
14. スナップショットオプション：-i、-c、-d、-s オプションを組み合わせて、スナップショットの出力を最適化します

リソース

• GitHub リポジトリ：https://github.com/vercel-labs/agent-browser
• 公式 README：https://github.com/vercel-labs/agent-browser/blob/main/README.md
• エージェントモードのドキュメント：https://agent-browser.dev/agent-mode
• イシュー：https://github.com/vercel-labs/agent-browser/issues

キーワード

agent-browser、CLI ブラウザー自動化、AI エージェント、ブラウザー自動化 CLI、refs、スナップショット、エージェントモード、セマンティックロケーター、ブラウザー自動化ツール、コマンドラインブラウザー、AI エージェントブラウザー、決定論的セレクター、アクセシビリティツリー、ブラウザーコマンド、ウェブ自動化 CLI、セッション、ヘッド付きモード、認証済みセッション、CDP モード、ストリーミング、Chrome DevTools Protocol、Playwright、AI 向けブラウザー自動化