agent-browser ชอบครับ ใช้มา 2 สัปดาห์ละ

agent-browser คือ CLI ที่ให้ AI agent interact กับเบราว์เซอร์ได้ — คลิก พิมพ์ อ่าน element จับภาพหน้าจอ เหมือนให้ Claude Code มีมือในเบราว์เซอร์

ถ้าเคยใช้ Chrome DevTools MCP (30k token ต่อ call) หรือ Claude Chrome extension (ขอ permission ทุกคลิก) ตัวนี้คือทางเลือกที่เบากว่า ~100 token ต่อ snapshot แทน 30,000

ติดตั้ง

npm install -g agent-browser

เชื่อมต่อกับเบราว์เซอร์

มี 2 วิธี:

วิธี A: ใช้ Chrome ที่เปิดอยู่

เปิด chrome://inspect/#remote-debugging ใน Chrome:

ติ๊ก “Allow remote debugging” agent-browser เชื่อมต่อกับ Chrome จริงของคุณพร้อม login session ทั้งหมด:

agent-browser --cdp-url ws://127.0.0.1:41175 snapshot -i

วิธี B: ให้ agent-browser เปิดเอง

agent-browser open http://localhost:5173

เปิด browser instance ใหม่ ง่ายกว่า แต่ไม่มี session เดิม

ติดตั้ง Skill สำหรับ Claude Code

Skill สอนให้ Claude Code รู้ว่า agent-browser คืออะไรและใช้ยังไง ถ้าไม่ติดตั้ง Claude ไม่รู้จัก agent-browser

npx skills install vercel-labs/agent-browser

เลือก “agent-browser” แล้วติดตั้ง Claude Code จะรู้จักคำสั่งทั้งหมด

Claude ทำอะไรได้บ้าง

คุณไม่ต้องรันคำสั่งเหล่านี้เอง — Claude ทำให้ พอติดตั้ง skill แล้ว Claude สามารถ:

• อ่านหน้าเว็บ — เห็นทุกปุ่ม input ลิงก์ และ alert เป็น text snapshot (~100 token)
• คลิก พิมพ์ submit — interact กับฟอร์ม ปุ่ม dropdown
• จับภาพหน้าจอ — capture สถานะสำหรับเช็ค layout
• อ่าน console/error — เห็น browser error โดยไม่ต้อง copy-paste ให้
• รัน JavaScript — evaluate expression เช็คสถานะ
• จัดการ tab — เปิดหน้า สลับไปมา

หน้าตาเป็นยังไง

คุณบอก: “Checkout form validation ไม่ทำงาน”

Claude เปิดหน้าเว็บ submit ฟอร์มเปล่า เห็นว่าไม่มี error ขึ้น อ่าน source แก้ validator รอ hot-reload submit อีกครั้ง เห็น validation error ขึ้น แล้วรายงาน: “แก้แล้ว required field validation ที่ email หายไป”

ไม่มี back-and-forth ไม่ต้อง “ลองเช็คให้ที” Claude verify งานของตัวเองได้

Links

• GitHub: vercel-labs/agent-browser
• Skills installer — npx skills install vercel-labs/agent-browser
• เกี่ยวข้อง: Chrome DevTools MCP มี experimental CLI ด้วย