agent-browser

작성자: halt-catch-fire

inference.sh를 통한 AI 에이전트용 브라우저 자동화. @e 참조를 사용하여 웹 페이지 탐색, 요소와 상호작용, 스크린샷 촬영, 비디오 녹화. 기능: 웹 스크래핑, 양식 작성, 클릭, 타이핑, 드래그 앤 드롭, 파일 업로드, JavaScript 실행. 용도: 웹 자동화, 데이터 추출, 테스트, 에이전트 브라우징, 연구. 트리거: 브라우저, 웹 자동화, 스크래핑, 탐색, 클릭, 양식 작성, 스크린샷, 웹 브라우징, Playwright, 헤드리스 브라우저, 웹 에이전트, 인터넷 서핑, 비디오 녹화

npx skills add https://github.com/halt-catch-fire/skills --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

halt-catch-fire의 다른 스킬

ai-image-generation
halt-catch-fire
We need to translate the given text from English to Korean. The instruction says to preserve product names, protocol names, URLs, numbers, and technical terms. So names like GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve, inference.sh CLI, etc. should remain as is. Also numbers like 50+, 4.5. The text inside <text> is a description of an agent skill for AI image generation. We need to translate the rest naturally into Korean. Let's break it down: "Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI." -> "inference.sh CLI를 통해 GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve 및 50개 이상의 모델로 AI 이미지를 생성합니다." "Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4
creativemediaimage
ai-video-generation
halt-catch-fire
inference.sh CLI를 통해 Google Veo, Seedance 2.0, HappyHorse, Wan, Grok 및 40개 이상의 모델로 AI 비디오를 생성합니다. 모델: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. 기능: 텍스트-비디오, 이미지-비디오, 참조-비디오, 비디오 편집, 립싱크, 아바타 애니메이션, 비디오 업스케일링, 폴리 사운드. 사용처: 소셜 미디어 비디오, 마케팅 콘텐츠, 설명 비디오, 제품 데모, AI 아바타. 트리거: 비디오 생성, AI 비디오,...
creativevideomedia
twitter-automation
halt-catch-fire
We need to translate the given text from English to Korean. The instruction says to preserve product names, protocol names, URLs, numbers, and technical terms. The name "twitter-automation" is not in the text, so we don't include it. We only translate the text inside <text>. No extra labels or commentary. The text describes an agent skill for automating Twitter/X. It mentions CLI, apps like x/post-tweet, etc., capabilities, use cases, and triggers. We need to translate naturally while keeping technical terms like "inference.sh CLI", "x/post-tweet", etc. as is. Also "Twitter/X" should be preserved as is or translated? The instruction says preserve product names, so "Twitter" and "X" are product names. But "Twitter/X" might be a combined reference. I'll keep "Twitter/X" as is. Similarly "X API" should be preserved. "inference.sh CLI" is a technical term, keep as is. The list of apps: x/post-tweet, x/post-create (with media),
marketingapicommunication
ai-avatar-video
halt-catch-fire
inference.sh CLI를 통해 AI 아바타 및 토킹 헤드 영상을 생성합니다. 권장: P-Video-Avatar (가장 빠르고 저렴하며 TTS 내장). 추가: OmniHuman, Fabric, PixVerse. 오디오: Inworld TTS-2 (100개 이상 언어, 캐릭터 감정 조절), ElevenLabs, Kokoro. 기능: 오디오 기반 아바타, 텍스트-투-아바타, 립싱크 영상, 토킹 헤드 생성, 가상 프레젠터, UGC 콘텐츠. 용도: AI 프레젠터, 설명 영상, 가상 인플루언서, 더빙, 마케팅 영상, UGC 광고, 게이밍 아바타,...
videocreativemedia
web-search
halt-catch-fire
Tavily와 Exa를 통해 inference.sh CLI로 웹 검색 및 콘텐츠 추출. 앱: Tavily Search, Tavily Extract, Exa Search, Exa Answer, Exa Extract. 기능: AI 기반 검색, 콘텐츠 추출, 직접 답변, 리서치. 용도: 리서치, RAG 파이프라인, 사실 확인, 콘텐츠 수집, 에이전트. 트리거: 웹 검색, tavily, exa, search api, 콘텐츠 추출, 리서치, 인터넷 검색, ai 검색, 검색 어시스턴트, 웹 스크래핑, rag, perplexity 대안
researchweb-scrapingapi
infsh-cli
halt-catch-fire
inference.sh CLI를 통해 250개 이상의 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
developmentapicreative
landing-page-design
halt-catch-fire
랜딩 페이지 전환 최적화: 레이아웃 규칙, 히어로 섹션 디자인, CTA 심리학 포함. 어바우드 더 폴드 공식, 소셜 프루프 배치, 모바일 디자인, F-패턴 리딩을 다룹니다. 사용처: 스타트업 랜딩 페이지, 제품 페이지, SaaS 마케팅, 전환 최적화. 트리거: 랜딩 페이지, 히어로 섹션, 어바우드 더 폴드, 전환 최적화, 랜딩 페이지 디자인, CTA 버튼, 히어로 이미지, 랜딩 페이지 레이아웃, SaaS 랜딩 페이지, 제품 페이지 디자인, 전환율, 랜딩 페이지...
product-photography
halt-catch-fire
AI 제품 사진 촬영으로 스튜디오 조명, 라이프스타일 샷, 팩샷 규칙을 포함합니다. 앵글, 배경, 그림자 유형, 히어로 샷, 이커머스 이미지 요구 사항을 다룹니다. 사용처: 제품 사진, 이커머스 이미지, 아마존 리스팅, 팩샷, 라이프스타일 사진. 트리거: 제품 사진, 제품 사진 촬영, 팩샷, 이커머스 사진, 제품 샷, 제품 이미지, 스튜디오 사진, 라이프스타일 제품, 아마존 제품 사진, 제품 리스팅 이미지, 히어로 샷, 제품 목업,...
creativeecommerceimage