agent-browser
101-skills/superpowers
Browser automation for AI agents with element refs and video recording via inference.sh
What is agent-browser?
Agentic Browser automates web interactions for AI agents using Playwright under the hood. It provides a simple @e ref system for identifying and interacting with page elements, plus screenshots and video recording. Use it for web scraping, form filling, testing, and agent-driven web navigation.
- Navigate to URLs and get interactive @e refs for all page elements
- Click, fill, type, select, drag-drop, and upload files to web elements
- Take screenshots (viewport or full page) and record video sessions
- Execute JavaScript on the page and capture results
- Scroll, navigate history, wait, and handle dynamic content
- Support proxy routing, cursor indicators, and session persistence
How to install agent-browser
npx skills add https://github.com/101-skills/superpowers --skill agent-browser- inference.sh CLI (belt) installed and configured
- belt login completed for authentication
How to use agent-browser
- 1.Install belt CLI skill: npx skills add belt-sh/cli
- 2.Run belt login to authenticate with inference.sh
- 3.Open a URL with belt app run agent-browser --function open to get @e refs for elements
- 4.Use belt app run agent-browser --function interact to click, fill, or manipulate elements by ref
- 5.Call snapshot after navigation or DOM changes to refresh element refs
- 6.Take screenshots with the screenshot function or enable record_video for full session recording
- 7.Close the session with the close function to finalize and retrieve any video
Use cases
- Automated form submission and data entry workflows
- Web scraping and content extraction with screenshots
- End-to-end testing of web applications
- Agent-driven research and information gathering from websites
- Login flows and authenticated session management
- AI agents and coding assistants automating web tasks
- QA engineers building automated test suites
- Data extraction and web scraping workflows
- Developers building agent-driven research tools
agent-browser FAQ
@e refs are unique identifiers for page elements (e.g., @e1, @e2). They're returned when you open a page or snapshot. Use them in interact actions like click, fill, drag, etc. Refs are invalidated after navigation, so always re-snapshot after clicking links or form submissions.
Pass "record_video": true when opening a page. Optionally add "show_cursor": true to show a visible red cursor indicator. When you close the session, the video file is returned in the response.
Yes. Open the login page, fill and submit the form, then snapshot to get refs for the authenticated page. You can reuse the same session_id across multiple interact calls to maintain state.
After clicking a link, the page changes but your @e refs become invalid. Call snapshot to fetch fresh refs for the new page before interacting with elements again.
Yes. Use the upload action with the file input's @e ref and provide an array of file_paths. Example: {"action": "upload", "ref": "@e5", "file_paths": ["/path/to/file.pdf"]}
Full instructions (SKILL.md)
Source of truth, from 101-skills/superpowers.
name: agent-browser description: "Browser automation for AI agents via inference.sh. Navigate web pages, interact with elements using @e refs, take screenshots, record video. Capabilities: web scraping, form filling, clicking, typing, drag-drop, file upload, JavaScript execution. Use for: web automation, data extraction, testing, agent browsing, research. Triggers: browser, web automation, scrape, navigate, click, fill form, screenshot, browse web, playwright, headless browser, web agent, surf internet, record video" allowed-tools: Bash(belt *)
Install the belt CLI skill:
npx skills add belt-sh/cli
Agentic Browser
Browser automation for AI agents via inference.sh. Uses Playwright under the hood with a simple @e ref system for element interaction.

Quick Start
Requires inference.sh CLI (
belt). Install instructions
belt login
# Open a page and get interactive elements
belt app run agent-browser --function open --input '{"url": "https://example.com"}' --session new
Core Workflow
Every browser automation follows this pattern:
- Open - Navigate to URL, get
@erefs for elements - Interact - Use refs to click, fill, drag, etc.
- Re-snapshot - After navigation/changes, get fresh refs
- Close - End session (returns video if recording)
# 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": "user@example.com"
}'
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 '{}'
Functions
| Function | Description |
|---|---|
open | Navigate to URL, configure browser (viewport, proxy, video recording) |
snapshot | Re-fetch page state with @e refs after DOM changes |
interact | Perform actions using @e refs (click, fill, drag, upload, etc.) |
screenshot | Take page screenshot (viewport or full page) |
execute | Run JavaScript code on the page |
close | Close session, returns video if recording was enabled |
Interact Actions
| Action | Description | Required Fields |
|---|---|---|
click | Click element | ref |
dblclick | Double-click element | ref |
fill | Clear and type text | ref, text |
type | Type text (no clear) | text |
press | Press key (Enter, Tab, etc.) | text |
select | Select dropdown option | ref, text |
hover | Hover over element | ref |
check | Check checkbox | ref |
uncheck | Uncheck checkbox | ref |
drag | Drag and drop | ref, target_ref |
upload | Upload file(s) | ref, file_paths |
scroll | Scroll page | direction (up/down/left/right), scroll_amount |
back | Go back in history | - |
wait | Wait milliseconds | wait_ms |
goto | Navigate to URL | url |
Element Refs
Elements are returned with @e refs:
@e1 [a] "Home" href="/"
@e2 [input type="text"] placeholder="Search"
@e3 [button] "Submit"
@e4 [select] "Choose option"
@e5 [input type="checkbox"] name="agree"
Important: Refs are invalidated after navigation. Always re-snapshot after:
- Clicking links/buttons that navigate
- Form submissions
- Dynamic content loading
Features
Video Recording
Record browser sessions for debugging or documentation:
# 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>}
Cursor Indicator
Show a visible cursor in screenshots and video (useful for demos):
belt app run agent-browser --function open --session new --input '{
"url": "https://example.com",
"show_cursor": true,
"record_video": true
}'
The cursor appears as a red dot that follows mouse movements and shows click feedback.
Proxy Support
Route traffic through a proxy server:
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"
}'
File Upload
Upload files to file inputs:
belt app run agent-browser --function interact --session $SESSION --input '{
"action": "upload",
"ref": "@e5",
"file_paths": ["/path/to/file.pdf"]
}'
Drag and Drop
Drag elements to targets:
belt app run agent-browser --function interact --session $SESSION --input '{
"action": "drag",
"ref": "@e1",
"target_ref": "@e2"
}'
JavaScript Execution
Run custom JavaScript:
belt app run agent-browser --function execute --session $SESSION --input '{
"code": "document.querySelectorAll(\"h2\").length"
}'
# Returns: {"result": "5", "screenshot": <File>}
Deep-Dive Documentation
| Reference | Description |
|---|---|
| references/commands.md | Full function reference with all options |
| references/snapshot-refs.md | Ref lifecycle, invalidation rules, troubleshooting |
| references/session-management.md | Session persistence, parallel sessions |
| references/authentication.md | Login flows, OAuth, 2FA handling |
| references/video-recording.md | Recording workflows for debugging |
| references/proxy-support.md | Proxy configuration, geo-testing |
Ready-to-Use Templates
| Template | Description |
|---|---|
| templates/form-automation.sh | Form filling with validation |
| templates/authenticated-session.sh | Login once, reuse session |
| templates/capture-workflow.sh | Content extraction with screenshots |
Examples
Form Submission
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": "john@example.com"}'
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 '{}'
Search and Extract
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 '{}'
Screenshot with Video
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'
Sessions
Browser state persists within a session. Always:
- Start with
--session newon first call - Use returned
session_idfor subsequent calls - Close session when done
Related Skills
# 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
Documentation
- inference.sh Sessions - Session management
- Multi-function Apps - How functions work
Related skills
More from 101-skills/superpowers and the wider catalog.

agent-tools
Run AI apps via inference.sh CLI—image generation, video, LLMs, search, 3D, Twitter automation.

ai-avatar-video
Create AI avatar and talking head videos with text or audio via inference.sh CLI.

ai-image-generation
Generate images with 50+ AI models (FLUX, GPT-Image-2, Gemini, Grok, Seedream) via inference.sh CLI.

ai-video-generation
Generate AI videos with 40+ models including Veo, Seedance, HappyHorse, and Wan via inference.sh CLI.

app-store-screenshots
Create App Store and Google Play screenshots with exact platform specs, device mockups, and preview videos.

character-design-sheet
Create consistent AI-generated characters with reference sheets and LoRA techniques.