mcpField
A
agent-browser

agent-browser

github.com/skills-shellエージェントワークフロー290.6k 回インストール12 週間前に更新
リポジトリ

agent-browser について

agent-browserは、inference.shのbelt CLIから実行する、PlaywrightベースのAIエージェント向けブラウザー自動化スキルです。要素参照による操作に加え、セッションの保持、スクリーンショット、録画に対応します。

主な機能

  1. 01ページ移動とスナップショット取得
  2. 02@e要素参照による操作
  3. 03ファイルアップロードとドラッグ
  4. 04ページ上でのJavaScript実行
  5. 05スクリーンショットと録画

活用シーン

  1. 01フォーム入力と送信の自動化
  2. 02ウェブ検索と結果の確認
  3. 03デバッグ用ブラウザー操作の録画

MCP 対応

このスキルにはMCP機能の記載がありません。

インストール

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

$npx skills add https://github.com/skills-shell/superpowers --skill agent-browser

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
authentication.md
commands.md
proxy-support.md
session-management.md
snapshot-refs.md
video-recording.md
templates/
authenticated-session.sh
capture-workflow.sh
form-automation.sh

詳細

belt CLI スキルをインストール: npx skills add belt-sh/cli

Agentic Browser

inference.sh 経由で AI エージェント向けのブラウザ自動化を実現します。内部では Playwright を使用し、要素を操作するためのシンプルな @e 参照システムを備えています。

Agentic Browser

クイックスタート

inference.sh CLI(belt)が必要です。インストール手順

belt login

# Open a page and get interactive elements
belt app run agent-browser --function open --input '{"url": "https://example.com"}' --session new

コアワークフロー

すべてのブラウザ自動化は次のパターンに従います。

  1. 開く - URL に移動し、要素の @e 参照を取得します
  2. 操作する - 参照を使ってクリック、入力、ドラッグなどを行います
  3. 再スナップショット - ナビゲーションや変更の後、最新の参照を取得します
  4. 閉じる - セッションを終了します(録画している場合は動画を返します)
# 1. Start session
RESULT=$(belt app run agent-browser --function open --session new --input '{
  "url": "https://example.com/login"
}')
SESSION_ID=$(echo $RESULT | jq -r '.session_id')
# Elements: @e1 [input] "Email", @e2 [input] "Password", @e3 [button] "Sign In"

# 2. Fill and submit
belt app run agent-browser --function interact --session $SESSION_ID --input '{
  "action": "fill", "ref": "@e1", "text": "[email protected]"
}'
belt app run agent-browser --function interact --session $SESSION_ID --input '{
  "action": "fill", "ref": "@e2", "text": "password123"
}'
belt app run agent-browser --function interact --session $SESSION_ID --input '{
  "action": "click", "ref": "@e3"
}'

# 3. Re-snapshot after navigation
belt app run agent-browser --function snapshot --session $SESSION_ID --input '{}'

# 4. Close when done
belt app run agent-browser --function close --session $SESSION_ID --input '{}'

関数

関数説明
openURL に移動し、ブラウザを設定します(ビューポート、プロキシ、動画録画)
snapshotDOM 変更後に @e 参照を使ってページの状態を再取得します
interact@e 参照を使ってアクションを実行します(クリック、入力、ドラッグ、アップロードなど)
screenshotページのスクリーンショットを撮ります(ビューポートまたはページ全体)
executeページ上で JavaScript コードを実行します
closeセッションを閉じます。録画が有効な場合は動画を返します

インタラクションアクション

アクション説明必須フィールド
click要素をクリックしますref
dblclick要素をダブルクリックしますref
fillテキストをクリアして入力しますref、text
typeテキストを入力します(クリアなし)text
pressキーを押します(Enter、Tab など)text
selectドロップダウンのオプションを選択しますref、text
hover要素の上にカーソルを合わせますref
checkチェックボックスをオンにしますref
uncheckチェックボックスをオフにしますref
dragドラッグアンドドロップしますref、target_ref
uploadファイルをアップロードしますref、file_paths
scrollページをスクロールしますdirection(up/down/left/right)、scroll_amount
back履歴を戻ります-
waitミリ秒単位で待機しますwait_ms
gotoURL に移動しますurl

要素の参照

要素は @e 参照とともに返されます。

@e1 [a] "Home" href="/"
@e2 [input type="text"] placeholder="Search"
@e3 [button] "Submit"
@e4 [select] "Choose option"
@e5 [input type="checkbox"] name="agree"

重要: 参照はナビゲーション後に無効になります。次の後には必ず再スナップショットしてください。

  • ナビゲーションするリンクやボタンのクリック
  • フォームの送信
  • 動的コンテンツの読み込み

機能

動画録画

デバッグやドキュメント用にブラウザセッションを録画します。

# Start with recording enabled (optionally show cursor indicator)
SESSION=$(belt app run agent-browser --function open --session new --input '{
  "url": "https://example.com",
  "record_video": true,
  "show_cursor": true
}' | jq -r '.session_id')

# ... perform actions ...

# Close to get the video file
belt app run agent-browser --function close --session $SESSION --input '{}'
# Returns: {"success": true, "video": <File>}
カーソルインジケーター

スクリーンショットや動画に表示されるカーソルを表示します(デモに便利です)。

belt app run agent-browser --function open --session new --input '{
  "url": "https://example.com",
  "show_cursor": true,
  "record_video": true
}'

カーソルは赤い点として表示され、マウスの動きに追従し、クリックのフィードバックを示します。

プロキシサポート

プロキシサーバーを通じてトラフィックをルーティングします。

belt app run agent-browser --function open --session new --input '{
  "url": "https://example.com",
  "proxy_url": "http://proxy.example.com:8080",
  "proxy_username": "user",
  "proxy_password": "pass"
}'
ファイルアップロード

ファイル入力にファイルをアップロードします。

belt app run agent-browser --function interact --session $SESSION --input '{
  "action": "upload",
  "ref": "@e5",
  "file_paths": ["/path/to/file.pdf"]
}'
ドラッグアンドドロップ

要素をターゲットにドラッグします。

belt app run agent-browser --function interact --session $SESSION --input '{
  "action": "drag",
  "ref": "@e1",
  "target_ref": "@e2"
}'
JavaScript の実行

カスタム JavaScript を実行します。

belt app run agent-browser --function execute --session $SESSION --input '{
  "code": "document.querySelectorAll(\"h2\").length"
}'
# Returns: {"result": "5", "screenshot": <File>}

詳細ドキュメント

リファレンス説明
references/commands.mdすべてのオプションを含む関数の完全なリファレンス
references/snapshot-refs.md参照のライフサイクル、無効化のルール、トラブルシューティング
references/session-management.mdセッションの永続化、並列セッション
references/authentication.mdログインフロー、OAuth、2FA の処理
references/video-recording.mdデバッグ用の録画ワークフロー
references/proxy-support.mdプロキシ設定、地理的テスト

すぐに使えるテンプレート

テンプレート説明
templates/form-automation.shバリデーション付きのフォーム入力
templates/authenticated-session.sh一度ログインし、セッションを再利用
templates/capture-workflow.shスクリーンショット付きのコンテンツ抽出

例

フォームの送信
SESSION=$(belt app run agent-browser --function open --session new --input '{
  "url": "https://example.com/contact"
}' | jq -r '.session_id')

# Get elements: @e1 [input] "Name", @e2 [input] "Email", @e3 [textarea], @e4 [button] "Send"

belt app run agent-browser --function interact --session $SESSION --input '{"action": "fill", "ref": "@e1", "text": "John Doe"}'
belt app run agent-browser --function interact --session $SESSION --input '{"action": "fill", "ref": "@e2", "text": "[email protected]"}'
belt app run agent-browser --function interact --session $SESSION --input '{"action": "fill", "ref": "@e3", "text": "Hello!"}'
belt app run agent-browser --function interact --session $SESSION --input '{"action": "click", "ref": "@e4"}'

belt app run agent-browser --function snapshot --session $SESSION --input '{}'
belt app run agent-browser --function close --session $SESSION --input '{}'
検索と抽出
SESSION=$(belt app run agent-browser --function open --session new --input '{
  "url": "https://google.com"
}' | jq -r '.session_id')

belt app run agent-browser --function interact --session $SESSION --input '{"action": "fill", "ref": "@e1", "text": "weather today"}'
belt app run agent-browser --function interact --session $SESSION --input '{"action": "press", "text": "Enter"}'
belt app run agent-browser --function interact --session $SESSION --input '{"action": "wait", "wait_ms": 2000}'

belt app run agent-browser --function snapshot --session $SESSION --input '{}'
belt app run agent-browser --function close --session $SESSION --input '{}'
動画付きスクリーンショット
SESSION=$(belt app run agent-browser --function open --session new --input '{
  "url": "https://example.com",
  "record_video": true
}' | jq -r '.session_id')

# Take full page screenshot
belt app run agent-browser --function screenshot --session $SESSION --input '{
  "full_page": true
}'

# Close and get video
RESULT=$(belt app run agent-browser --function close --session $SESSION --input '{}')
echo $RESULT | jq '.video'

セッション

ブラウザーの状態はセッション内で保持されます。必ず次の手順に従ってください。

  1. 初回の呼び出しでは --session new を指定します
  2. 以降の呼び出しでは、返された session_id を使用します
  3. 完了したらセッションを終了します

関連スキル

# Web search (for research + browse)
npx skills add inference-sh/skills@web-search

# LLM models (analyze extracted content)
npx skills add inference-sh/skills@llm-models

ドキュメント

コメント