agent-browser

โดย skills-101

การทำงานอัตโนมัติของเบราว์เซอร์สำหรับเอเจนต์ AI ผ่าน inference.sh นำทางหน้าเว็บ โต้ตอบกับองค์ประกอบโดยใช้ @e refs จับภาพหน้าจอ บันทึกวิดีโอ ความสามารถ: การขูดข้อมูลเว็บ การกรอกฟอร์ม การคลิก การพิมพ์ การลากและวาง การอัปโหลดไฟล์ การเรียกใช้ 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 เพิ่มเติมจาก skills-101

ai-image-generation
skills-101
สร้างภาพ AI ด้วย GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve และโมเดลอีก 50+ รายการผ่าน CLI ของ inference.sh โมเดล: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt ความสามารถ: ข้อความเป็นภาพ, ภาพเป็นภาพ, การเติมแต่งภาพ, LoRA, การแก้ไขภาพ, การขยายความละเอียด, การเรนเดอร์ข้อความ ใช้สำหรับ: ศิลปะ AI, ตัวอย่างผลิตภัณฑ์, คอนเซ็ปต์อาร์ต, กราฟิกโซเชียลมีเดีย, ภาพการตลาด, ภาพประกอบ ทริกเกอร์: flux, การสร้างภาพ, ภาพ ai, ข้อความเป็น...
ai-avatar-video
skills-101
สร้างวิดีโอ AI อวตารและพูดหน้าจอผ่าน CLI ของ inference.sh แนะนำ: P-Video-Avatar (เร็วที่สุด ถูกที่สุด มี TTS ในตัว) นอกจากนี้: OmniHuman, Fabric, PixVerse เสียง: Inworld TTS-2 (รองรับ 100+ ภาษา ปรับอารมณ์เสียงสำหรับตัวละคร), ElevenLabs, Kokoro ความสามารถ: อวตารที่ขับเคลื่อนด้วยเสียง, ข้อความเป็นอวตาร, วิดีโอซิงค์ปาก, การสร้างหัวพูด, ผู้บรรยายเสมือน, คอนเทนต์ UGC ใช้สำหรับ: ผู้บรรยาย AI, วิดีโออธิบาย, อินฟลูเอนเซอร์เสมือน, การพากย์, วิดีโอการตลาด, โฆษณา UGC, อวตารเกม,...
agent-tools
skills-101
เรียกใช้แอป AI ผ่าน CLI ของ inference.sh - สร้างภาพ, สร้างวิดีโอ, 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
เรนเดอร์วิดีโอจากโค้ด React/Remotion component ผ่าน inference.sh ส่งโค้ด TSX รับไฟล์ MP4 รองรับ Remotion API ทั้งหมด: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence กำหนดความละเอียด FPS ระยะเวลา และ codec ได้ ใช้สำหรับ: การสร้างวิดีโอแบบโปรแกรม, กราฟิกแอนิเมชัน, motion design, วิดีโอที่ขับเคลื่อนด้วยข้อมูล, แปลง React แอนิเมชันเป็นวิดีโอ ทริกเกอร์: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated...
infsh-cli
skills-101
รันแอป AI ผ่าน CLI ของ inference.sh - สร้างภาพ, สร้างวิดีโอ, LLMs, ค้นหา, 3D, อัตโนมัติ Twitter โมเดล: FLUX, Veo, Gemini, Grok, Claude, Seedance, OmniHuman, Tavily, Exa, OpenRouter และอื่นๆ อีกมากมาย ใช้เมื่อรันแอป AI, สร้างภาพ/วิดีโอ, เรียก LLMs, ค้นหาเว็บ หรืออัตโนมัติ 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-pattern ใช้สำหรับ: แลนดิ้งเพจสตาร์ทอัพ หน้าผลิตภัณฑ์ การตลาด SaaS การเพิ่มประสิทธิภาพการแปลง ทริกเกอร์: แลนดิ้งเพจ ส่วนฮีโร่ พื้นที่เหนือจอ การเพิ่มประสิทธิภาพการแปลง การออกแบบแลนดิ้งเพจ ปุ่ม CTA รูปภาพฮีโร่ การจัดวางแลนดิ้งเพจ แลนดิ้งเพจ SaaS การออกแบบหน้าผลิตภัณฑ์ อัตราการแปลง แลนดิ้งเพจ...
designmarketing
product-photography
skills-101
AI การถ่ายภาพผลิตภัณฑ์ด้วยแสงในสตูดิโอ ช็อตไลฟ์สไตล์ และรูปแบบแพ็กช็อต ครอบคลุมมุมกล้อง พื้นหลัง ประเภทเงา ช็อตฮีโร่ และข้อกำหนดภาพสำหรับอีคอมเมิร์ซ ใช้สำหรับ: ภาพผลิตภัณฑ์ ภาพอีคอมเมิร์ซ รายการสินค้า Amazon แพ็กช็อต การถ่ายภาพไลฟ์สไตล์ ตัวกระตุ้น: การถ่ายภาพผลิตภัณฑ์ ภาพผลิตภัณฑ์ แพ็กช็อต การถ่ายภาพอีคอมเมิร์ซ ช็อตผลิตภัณฑ์ ภาพผลิตภัณฑ์ การถ่ายภาพในสตูดิโอ ผลิตภัณฑ์ไลฟ์สไตล์ ภาพผลิตภัณฑ์ Amazon ภาพรายการสินค้า ช็อตฮีโร่ ม็อกอัปผลิตภัณฑ์,...