agent-browser

Agent Browser Skill

A skill for browser automation. Uses the agent-browser CLI to perform UI debugging, verification, and automated operations.

Trigger phrase

This skill is automatically triggered by the following phrases:

"Open the page," "Check the URL"
"Click," "Enter," "Into the form"
"Take a screenshot"
"Check the UI," "Test the screen"
"open this page", "click on", "fill the form", "screenshot"

Feature Details

Feature	Details
Browser automation	See references/browser-automation.md
AI snapshot workflow	See references/ai-snapshot-workflow.md

Execution Steps

Step 0: Check agent-browser

# インストール確認
which agent-browser

# 未インストールの場合
npm install -g agent-browser
agent-browser install

Step 1: Classify the user's request

Request type	Corresponding action
Open URL	`agent-browser open <url>`
Click element	Snapshot → `agent-browser click @ref`
Form input	Snapshot → `agent-browser fill @ref "text"`
Check state	`agent-browser snapshot -i -c`
Screenshot	`agent-browser screenshot <path>`
Debug	`agent-browser --headed open <url>`

Step 2: AI snapshot workflow (recommended)

For most operations, firsttake a snapshotand then operate using element references:

# 1. ページを開く
agent-browser open https://example.com

# 2. スナップショット取得（AI 向け、インタラクティブ要素のみ）
agent-browser snapshot -i -c

# 出力例:
# - link "Home" [ref=e1]
# - button "Login" [ref=e2]
# - input "Email" [ref=e3]
# - input "Password" [ref=e4]
# - button "Submit" [ref=e5]

# 3. 要素参照で操作
agent-browser click @e2           # Login ボタンをクリック
agent-browser fill @e3 "user@example.com"
agent-browser fill @e4 "password123"
agent-browser click @e5           # Submit

Step 3: Check the results

# 現在の状態をスナップショットで確認
agent-browser snapshot -i -c

# または URL を確認
agent-browser get url

# スクリーンショットを取得
agent-browser screenshot result.png

Quick reference

Basic Operations

Command	Description
`open <url>`	Open URL
`snapshot -i -c`	AI-oriented snapshot
`click @e1`	Click element
`fill @e1 "text"`	Fill in form
`type @e1 "text"`	Enter text
`press Enter`	Press key
`screenshot [path]`	Screenshot
`close`	Close browser

Navigation

Command	Description
`back`	Back
`forward`	Forward
`reload`	Reload

Information Retrieval

Command	Description
`get text @e1`	Get text
`get html @e1`	Get HTML
`get url`	Current URL
`get title`	Page title

Wait

Command	Description
`wait @e1`	Wait for element
`wait 1000`	Wait 1 second

Debug

Command	Description
`--headed`	Show browser
`console`	Console log
`errors`	Page error
`highlight @e1`	Highlight element

Session Management

Manage multiple tabs/sessions in parallel:

# セッションを指定
agent-browser --session admin open https://admin.example.com
agent-browser --session user open https://example.com

# セッション一覧
agent-browser session list

# 特定セッションで操作
agent-browser --session admin snapshot -i -c

How to use it differently from MCP browser tools

Tools	Recommendation level	Use case
agent-browser	★★★	First choice. AI-oriented snapshots are powerful
chrome-devtools MCP	★★☆	When Chrome is already open
playwright MCP	★★☆	Complex E2E tests

Principle: Try agent-browser first, and use MCP tools only if it does not work.

Notes

agent-browser defaults to headless mode
--headed The browser can be displayed with an option
Sessions are explicitly close maintained until done
Use sessions for sites that require authentication