ไลบรารี AI Agent สำหรับท่องเว็บแบบเป็นมิตรกับโทเคนด้วยการบีบอัด DOM โดยไม่พึ่งพา Omnimodal

ปกติผมแค่อ่าน GN ผ่าน ๆ บ้าง นี่เป็นครั้งแรกที่ลองส่งบทความเข้ามาครับ ฝากเนื้อฝากตัวด้วย!

---

ไลบรารีนี้เริ่มต้นจากไอเดียว่า ถ้าแทนที่จะใช้ Web Surf agent แบบ Omnimodal ที่ยังไม่แน่นอนในปัจจุบัน เราลองนำ DOM ที่ได้จาก CDP มาฟอร์แมตและบีบอัดให้น้อยที่สุดเท่าที่ LLM จะเข้าใจได้ แล้วทำเป็น MCP จะเป็นอย่างไร?

เหตุผลที่สร้าง

• เว็บเอเจนต์ที่อิงสกรีนช็อตต้องใช้วิชันโมเดล และสิ้นเปลืองโทเคนอย่างมาก
• การซีเรียลไลซ์ DOM แบบเดิมรวมทั้ง CSS class, wrapper div, script ทุกอย่าง ทำให้หนึ่งหน้าเว็บมีขนาด 50,000~100,000 โทเคน
• แต่สิ่งที่เอเจนต์ต้องการจริง ๆ มีแค่ปุ่ม ลิงก์ ช่องกรอกข้อมูล และข้อความเท่านั้น การใช้ context window ทั้งก้อนเพื่อสิ่งนี้จึงไม่มีประสิทธิภาพ

วิธีการทำงาน

• เชื่อมต่อกับ Chrome instance ผ่าน CDP แล้วลบทุกอย่างออกจาก DOM ยกเว้นองค์ประกอบที่จำเป็นขั้นต่ำสำหรับการแยกแยะ
• จากนั้นจะติด ID สั้น ๆ ให้แต่ละองค์ประกอบ แล้วส่งข้อมูลดังกล่าวให้ Agent
• รองรับการโต้ตอบกับองค์ประกอบแบบ interactive จากฝั่งเอเจนต์ด้วย เช่น click("B1"), type("I1", "คำค้นหา")!

เบนช์มาร์ก

• GitHub: 84,357 -> 2,593 โทเคน (32x)
• Wikipedia: 123,615 -> 12,097 โทเคน (10x)
• MDN: 24,923 -> 1,793 โทเคน (14x)
• HN: 8,736 -> 1,038 โทเคน (8.4x)
• โดยเฉลี่ยลดโทเคนได้ 93%, เวลา parsing ราว 30ms

สเปกบนกระดาษ

• พัฒนาด้วย TypeScript รองรับทั้ง Bun Native เป็นรันไทม์ หรือ Node 18+
• พึ่งพา chrome-remote-interface Runtime
• แบ็กเอนด์บน ElysiaJS

ลิงก์

• GitHub: https://github.com/TideSurf/core
• npm: https://www.npmjs.com/package/@tidesurf/core
• เอกสาร/เดโม: https://tidesurf.org

---

เดิมทีทำไว้ใช้ดีบักส่วนตัว พอลองใช้แล้วกลับพบว่าใช้งานได้ดีเกินคาด เลยตัดสินใจทำเป็น OSS และปล่อยให้ใช้งานกันครับ ลองใช้ดูแล้วฝากฟีดแบ็กกันเยอะ ๆ นะครับ!