agent-browser

作者: skills-101

透過 inference.sh 為 AI 代理提供瀏覽器自動化。瀏覽網頁、使用 @e 引用與元素互動、截取螢幕截圖、錄製影片。功能:網頁抓取、表單填寫、點擊、輸入、拖放、檔案上傳、JavaScript 執行。用途:網頁自動化、資料提取、測試、代理瀏覽、研究。觸發詞:瀏覽器、網頁自動化、抓取、導覽、點擊、填寫表單、截圖、瀏覽網頁、playwright、無頭瀏覽器、網頁代理、上網、錄製影片

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

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.

Agentic Browser

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:

  1. Open - Navigate to URL, get @e refs for elements
  2. Interact - Use refs to click, fill, drag, etc.
  3. Re-snapshot - After navigation/changes, get fresh refs
  4. 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

FunctionDescription
openNavigate to URL, configure browser (viewport, proxy, video recording)
snapshotRe-fetch page state with @e refs after DOM changes
interactPerform actions using @e refs (click, fill, drag, upload, etc.)
screenshotTake page screenshot (viewport or full page)
executeRun JavaScript code on the page
closeClose session, returns video if recording was enabled

Interact Actions

ActionDescriptionRequired Fields
clickClick elementref
dblclickDouble-click elementref
fillClear and type textref, text
typeType text (no clear)text
pressPress key (Enter, Tab, etc.)text
selectSelect dropdown optionref, text
hoverHover over elementref
checkCheck checkboxref
uncheckUncheck checkboxref
dragDrag and dropref, target_ref
uploadUpload file(s)ref, file_paths
scrollScroll pagedirection (up/down/left/right), scroll_amount
backGo back in history-
waitWait millisecondswait_ms
gotoNavigate to URLurl

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

ReferenceDescription
references/commands.mdFull function reference with all options
references/snapshot-refs.mdRef lifecycle, invalidation rules, troubleshooting
references/session-management.mdSession persistence, parallel sessions
references/authentication.mdLogin flows, OAuth, 2FA handling
references/video-recording.mdRecording workflows for debugging
references/proxy-support.mdProxy configuration, geo-testing

Ready-to-Use Templates

TemplateDescription
templates/form-automation.shForm filling with validation
templates/authenticated-session.shLogin once, reuse session
templates/capture-workflow.shContent 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:

  1. Start with --session new on first call
  2. Use returned session_id for subsequent calls
  3. 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

來自 skills-101 的更多技能

ai-image-generation
skills-101
透過 inference.sh CLI 使用 GPT-Image-2、FLUX、Gemini、Grok、Seedream、Reve 及 50 多種模型生成 AI 圖像。模型:GPT-Image-2、FLUX Dev LoRA、FLUX.2 Klein LoRA、Gemini 3 Pro Image、Grok Imagine、Seedream 4.5、Reve、ImagineArt。功能:文字轉圖像、圖像轉圖像、修復、LoRA、圖像編輯、放大、文字渲染。用途:AI 藝術、產品模型、概念藝術、社群媒體圖形、行銷視覺、插圖。觸發詞:flux、image generation、ai image、text to...
ai-avatar-video
skills-101
透過 inference.sh CLI 建立 AI 虛擬人偶與說話頭影片。建議使用:P-Video-Avatar(最快、最便宜、內建 TTS)。其他選項:OmniHuman、Fabric、PixVerse。音訊:Inworld TTS-2(100 多種語言、角色情緒引導)、ElevenLabs、Kokoro。功能:音訊驅動虛擬人偶、文字轉虛擬人偶、唇形同步影片、說話頭生成、虛擬主持人、UGC 內容。適用於:AI 主持人、解說影片、虛擬網紅、配音、行銷影片、UGC 廣告、遊戲虛擬人偶、...
agent-tools
skills-101
透過 inference.sh CLI 執行 AI 應用程式 - 影像生成、影片創作、LLM、搜尋、3D、Twitter 自動化。模型:FLUX、Veo、Gemini、Grok、Claude、Seedance、OmniHuman、Tavily、Exa、OpenRouter 等眾多模型。適用於執行 AI 應用程式、生成影像/影片、呼叫 LLM、網路搜尋或自動化 Twitter。觸發詞:inference.sh、infsh、ai model、run ai、serverless ai、ai api、flux、veo、claude api、image generation、video generation、openrouter、tavily、exa search、twitter api、grok
python-executor
skills-101
Execute Python code in a safe sandboxed environment via [inference.sh](https://inference.sh). Pre-installed: NumPy, Pandas, Matplotlib, requests, BeautifulSoup, Selenium, Playwright, MoviePy, Pillow, OpenCV, trimesh, and 100+ more libraries. Use for: data processing, web scraping, image manipulation, video creation, 3D model processing, PDF generation, API calls, automation scripts. Triggers: python, execute code, run script, web scraping, data analysis, image processing, video editing, 3D...
remotion-render
skills-101
透過inference.sh從React/Remotion元件程式碼渲染影片。傳入TSX程式碼,取得MP4。支援所有Remotion API:useCurrentFrame、useVideoConfig、spring、interpolate、AbsoluteFill、Sequence。可設定解析度、FPS、時長、編解碼器。用途:程式化影片生成、動畫圖形、動態設計、資料驅動影片、React動畫轉影片。觸發詞:remotion、從程式碼渲染影片、tsx轉影片、react影片、程式化影片、remotion渲染、程式碼轉影片、動畫...
infsh-cli
skills-101
透過 inference.sh CLI 執行 AI 應用程式——影像生成、影片創作、LLM、搜尋、3D、Twitter 自動化。模型:FLUX、Veo、Gemini、Grok、Claude、Seedance、OmniHuman、Tavily、Exa、OpenRouter 等更多。適用於執行 AI 應用程式、生成影像/影片、呼叫 LLM、網路搜尋或自動化 Twitter。觸發詞:inference.sh、infsh、ai model、run ai、serverless ai、ai api、flux、veo、claude api、image generation、video generation、openrouter、tavily、exa search、twitter api、grok
landing-page-design
skills-101
登陸頁面轉換優化,包含版面規則、英雄區設計與CTA心理學。涵蓋首屏公式、社會認同擺放、行動裝置設計與F型閱讀模式。適用於:新創登陸頁面、產品頁面、SaaS行銷、轉換優化。觸發詞:登陸頁面、英雄區、首屏、轉換優化、登陸頁面設計、CTA按鈕、英雄圖片、登陸頁面版面、SaaS登陸頁面、產品頁面設計、轉換率、登陸頁面...
designmarketing
product-photography
skills-101
AI產品攝影,包含棚拍燈光、生活風格拍攝及包裝拍攝慣例。涵蓋角度、背景、陰影類型、主視覺圖及電子商務影像需求。適用於:產品照片、電子商務圖片、亞馬遜商品頁面、包裝拍攝、生活風格攝影。觸發詞:產品攝影、產品照片、包裝拍攝、電子商務攝影、產品拍攝、產品圖片、棚拍攝影、生活風格產品、亞馬遜產品照片、商品頁面圖片、主視覺圖、產品模型、...