Vibium - เครื่องมืออัตโนมัติบนเบราว์เซอร์สำหรับ AI และมนุษย์

 (github.com/VibiumDev)
14 คะแนน โดย GN⁺ 2025-12-25 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • โปรเจกต์โอเพนซอร์สด้านระบบอัตโนมัติบนเบราว์เซอร์ที่ Jason Huggins ผู้พัฒนา Selenium เมื่อ 21 ปีก่อน กลับมาสร้างใหม่โดยคำนึงถึง AI agent
  • Vibium คือ โครงสร้างพื้นฐานสำหรับการทำงานอัตโนมัติบนเบราว์เซอร์ สำหรับ AI agent โดยจัดการวงจรชีวิตของเบราว์เซอร์และโปรโตคอล WebDriver BiDi ด้วยไบนารีเดียว พร้อมเปิดให้ใช้งาน MCP server
  • Clicker ซึ่งเป็น Go single binary ขนาด 10MB จะตรวจหาและเปิด Chrome อัตโนมัติ และทำให้ โมเดล AI หรือ JS client สามารถควบคุมเบราว์เซอร์ ได้ผ่าน BiDi proxy และ MCP server
  • JS/TS client รองรับทั้ง API แบบ synchronous และ asynchronous ติดตั้งได้ด้วย npm install vibium และพร้อมใช้งานได้ทันที
  • LLM agent อย่าง Claude Code สามารถเพิ่มความสามารถควบคุมเบราว์เซอร์ได้ด้วยคำสั่งบรรทัดเดียว claude mcp add vibium
  • เหมาะทั้งกับงานอัตโนมัติสำหรับ AI และการทดสอบแบบอัตโนมัติ พร้อมมอบ สภาพแวดล้อมควบคุมเบราว์เซอร์แบบไม่ต้องตั้งค่า

ภาพรวมของ Vibium

  • Vibium คือ โครงสร้างพื้นฐานสำหรับการทำงานอัตโนมัติบนเบราว์เซอร์ สำหรับทั้ง AI agent และผู้ใช้ทั่วไป
    • รวมการจัดการเบราว์เซอร์, WebDriver BiDi proxy และความสามารถของ MCP server ไว้ใน Go binary เดียว
    • รองรับ LLM หลายรุ่น เช่น Claude Code, Codex, Gemini เป็นต้น
  • ออกแบบมาให้ ทำงานได้ทันทีโดยไม่ต้องผ่านขั้นตอนติดตั้ง จึงนำไปใช้ได้ทั้งในสภาพแวดล้อมของ AI agent และระบบทดสอบอัตโนมัติ

องค์ประกอบ

  • Clicker: Go binary ขนาดประมาณ 10MB ที่ทำหน้าที่ดังนี้
    • ตรวจหา Chrome อัตโนมัติและรันในโหมด BiDi
    • ส่งต่อคำสั่งผ่าน BiDi proxy server บนพื้นฐาน WebSocket
    • สื่อสารกับ LLM agent ผ่าน MCP server
    • มีฟีเจอร์ Auto-Wait เพื่อรอองค์ประกอบก่อนโต้ตอบ
    • มีฟังก์ชัน จับภาพหน้าจอ
  • JS/TS client: ให้บริการเป็นแพ็กเกจ npm และรองรับทั้ง API แบบ synchronous(browserSync) และ asynchronous(browser)
    • ควบคุมเบราว์เซอร์ได้ด้วยคำสั่งง่าย ๆ เช่น vibe.go(), vibe.find(), vibe.click(), vibe.quit()
    • มีความสามารถพื้นฐานสำหรับงานอัตโนมัติ เช่น บันทึกภาพหน้าจอ, ค้นหาองค์ประกอบ, คลิก

การผสานรวมกับ AI agent

  • คำสั่งสำหรับเพิ่มความสามารถควบคุมเบราว์เซอร์ให้ Claude Code: 
    claude mcp add vibium -- npx -y vibium
    • Chrome จะถูกดาวน์โหลดโดยอัตโนมัติ จึงไม่ต้องตั้งค่าแยกต่างหาก
  • รายการคำสั่งที่มีให้
    • browser_launch: เปิดเบราว์เซอร์
    • browser_navigate: ย้ายไปยัง URL
    • browser_find: ค้นหาองค์ประกอบด้วย CSS selector
    • browser_click: คลิกองค์ประกอบ
    • browser_type: ป้อนข้อความ
    • browser_screenshot: จับภาพ viewport
    • browser_quit: ปิดเบราว์เซอร์

การติดตั้งสำหรับผู้ใช้ทั่วไป

  • ติดตั้งอัตโนมัติด้วยคำสั่ง npm install vibium
    • ดาวน์โหลด Clicker binary, Chrome for Testing และ chromedriver ลงแคชตามแพลตฟอร์ม
    • Linux: ~/.cache/vibium/, macOS: ~/Library/Caches/vibium/, Windows: %LOCALAPPDATA%\vibium\
  • สามารถข้ามการดาวน์โหลดเบราว์เซอร์ได้ด้วยตัวแปรแวดล้อม VIBIUM_SKIP_BROWSER_DOWNLOAD=1

การรองรับแพลตฟอร์ม

  • รองรับ Linux x64, macOS(Intel/Apple Silicon), Windows x64

เริ่มต้นใช้งานอย่างรวดเร็ว

  • ตัวอย่างการใช้ไลบรารี 
    import { browser } from "vibium";  
const vibe = await browser.launch();  
await vibe.go("https://example.com");  
const el = await vibe.find("a");  
await el.click();  
await vibe.quit();
  • ตัวอย่างการเชื่อมต่อกับ Claude Code
    • หลังติดตั้งแล้ว สามารถสั่งให้ควบคุมเบราว์เซอร์ได้ด้วยคำสั่งอย่าง “Go to example.com and click the first link”

โรดแมป

  • V1: มุ่งเน้นที่การควบคุมเบราว์เซอร์ผ่าน MCP และ JS client
  • แผนสำหรับ V2
    • Python และ Java client
    • Cortex (ชั้นหน่วยความจำและการนำทาง)
    • Retina (ความสามารถเสริมด้านการบันทึก)
    • การบันทึกวิดีโอ, ความสามารถค้นหาองค์ประกอบด้วย AI

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-12-25
ความคิดเห็นจาก Hacker News

  • Selenium ทำให้เส้นทางอาชีพของฉันเปลี่ยนไปมาก ขอบคุณจากใจจริง
    ทุกวันนี้ใช้ Playwright อยู่ แต่ก็สนใจแนวทางใหม่ของ Vibium

    • Playwright สร้างความก้าวหน้าครั้งใหญ่ด้วยการควบคุมเบราว์เซอร์ความเร็วสูงบนพื้นฐาน WebSockets+JSON ส่วน Vibium ใช้มาตรฐาน W3C WebDriver BiDi ที่สอดคล้องกัน เป้าหมายคือมอบประสบการณ์พัฒนาที่ยอดเยี่ยมแบบ “คลิกไม่กี่ครั้งก็เสร็จ” เหมือน Playwright
    • ถ้าใช้งาน Playwright อยู่แล้ว แนะนำให้ลอง Stagehand API คล้ายกัน แต่ถูกออกแบบมาเพื่อ งานอัตโนมัติ ไม่ใช่งานทดสอบ

  • อยากรู้ว่า Vibium รองรับ การฉีด JS, การแก้ไข DOM, และการเฝ้าดูหรือแก้ไข network request หรือไม่ ตอนใช้ Playwright ฉันแทบใช้ฟีเจอร์พวกนี้ตลอด

    • ตอนนี้ยังไม่รองรับ แต่ อยู่ในโรดแมปแล้ว เป้าหมายคือรับเอาจุดแข็งของ Playwright มาและต่อยอดให้ไกลกว่านั้น
    • สำหรับฉัน แค่มีการมอนิเตอร์ network request ก็พอแล้ว แอป Flutter + Amazon AppSync ดีบักยากมาก

  • น่าสนใจ ช่วงนี้ฉันใช้ dev-browser แล้วได้ประโยชน์เรื่อง ประหยัดคอนเท็กซ์และเพิ่มความเร็ว อยู่พอดี เดี๋ยวจะลอง Vibium แน่นอน

    • Vibium ก็มีแผนจะรองรับ ความสามารถในการขยายแบบอิง skill ลักษณะนี้เช่นกัน

  • ในฐานะคนที่หาเลี้ยงชีพด้วย UI automation มานานกว่าสิบปี ขอบคุณ Selenium มาก ตอนนี้ Playwright กลายเป็นมาตรฐานโดยพฤตินัยไปแล้ว แต่ Selenium คือ browser driver รุ่นบุกเบิก อยากรู้ว่า Vibium ต่างจาก Playwright อย่างไร

    • Playwright นำหน้าในด้าน “ความเร็ว” แต่ Selenium ก็ยังมี อีโคซิสเต็มที่หยั่งรากลึกไปทั่วโลก Vibium วางแผนจะสร้างสะพานให้ผู้ใช้ Selenium ก้าวไปสู่ การเขียนโค้ดเชิงเอเจนต์แห่งอนาคต ได้อย่างเป็นธรรมชาติ

  • ฉันคือคนที่เคยช่วยขยายการทดสอบของ Atlassian ด้วย Selenium จำได้ว่าเราเคยคุยกันเมื่อราว 13~15 ปีก่อน ดีใจที่ยังทำงานอยู่ในวงการนี้

  • อยากรู้ว่าถ้าย้ายสคริปต์ Selenium เก่ามา Vibium จะใช้ฟีเจอร์ self-heal เมื่อการทดสอบล้มเหลวได้ไหม

    • ถ้าเปรียบเทียบ ตอนนี้ฉันกำลังสร้าง รีสอร์ตบนเกาะ อยู่ สะพาน (เส้นทาง migration) จะค่อยสร้างทีหลัง ถ้าตัวรีสอร์ตน่าดึงดูด ก็จะมีเหตุผลให้สร้างสะพาน ตอนนี้เลยโฟกัสที่การสร้างรีสอร์ต แต่ก็อยากสร้างสะพานเหมือนกัน

  • ถ้าเอเจนต์จับภาพหน้าจอด้วย browser_screenshot แล้วจะคลิกต่อ อยากรู้ว่า มันหา CSS selector ได้อย่างไร เพราะดูจากสกรีนช็อตอย่างเดียวก็บอกชนิดขององค์ประกอบได้ยาก

    • ตอนนี้ MCP server ยังขาดความสามารถด้านการสำรวจแบบอัตโนมัติเต็มรูปแบบ ใน fork ของฉันได้เพิ่มเครื่องมือ browser_evaluate เพื่อดึง accessibility tree มาด้วย JS และใช้สิ่งนั้นเป็นฐานในการสำรวจ ดูรายละเอียดเพิ่มได้ที่ V2 โรดแมป

  • ถ้าจะให้เครื่องมืออย่าง Claude ใช้ browser automation ได้อย่างอิสระ จำเป็นต้องมี ฟีเจอร์ล็อกเบราว์เซอร์ให้เข้าได้เฉพาะ URL ที่กำหนด อยากรู้ว่ามีอยู่ในโรดแมปไหม

    • ถ้าใช้ Claude Code ก็สามารถควบคุมได้ง่ายด้วย hook ของ browser_navigate สคริปต์สำหรับ whitelist ตั้งค่าได้ใน 5 นาที ถ้าต้องการนโยบายที่ซับซ้อนกว่านั้น ใช้ cupcake กับ Rego ได้ ดูเพิ่มเติม: เอกสาร Claude Code Hooks
    • ฉันตระหนักดีถึงความเสี่ยงเรื่อง “blast radius” ของ Claude ตอนนี้ฉันเองก็พัฒนา Vibium อยู่ใน UTM VM และกำลังพิจารณาเพิ่มกฎเครือข่ายด้วย ได้โพสต์ V2 โรดแมปไว้แล้ว และคงต้องเตรียมร่าง V3 ด้วย
    • วิธีที่ชัวร์ที่สุดคือรันใน คอนเทนเนอร์ที่มีไฟร์วอลล์ และอนุญาตเฉพาะ whitelist แบบสั้น ๆ

  • ฉันก็เคยคิดจะสร้างอะไรคล้าย Skyvern แต่อยากรู้ว่าทำไมถึงไม่ต่อยอดจาก Selenium แต่เลือกสร้าง Vibium ใหม่ แทน

    • ได้อธิบายไว้บางส่วนใน ประกาศ Vibium v1 แล้ว Selenium หรือ Playwright ไม่ได้ถูกออกแบบมาโดยมี AI เป็นศูนย์กลาง ส่วน Vibium ถูกออกแบบโครงสร้างตั้งแต่ต้นให้เหมาะกับ “vibe coding” ที่ขับเคลื่อนด้วย AI

  • อยากรู้ว่าจัดการปัญหา context bloat ระหว่างเบราว์เซอร์กับ LLM อย่างไร และมีแผนจะเปิดเผยไฟล์ tracing หรืออนุญาตการรัน JS แบบ Playwright หรือไม่

    • การเปิดให้เข้าถึงเบราว์เซอร์จะค่อย ๆ เพิ่มขึ้น ปัญหา context bloat ตอนนี้ยังไม่มีใครแก้ได้สมบูรณ์ ในระยะยาว คำตอบอาจเป็น “ไปในทิศทางที่ไม่ใช้ MCP” ตอนนี้ Vibium มีให้ทั้ง MCP server และ JS/TS API ใน JS/TS API สามารถรัน JS ตามต้องการได้ วิธีให้เอเจนต์เขียนและรันสคริปต์ Vibium อาจเป็นทางอ้อมที่ช่วย ลดภาระคอนเท็กซ์ ได้