Vercel เปิดตัว UI SDK พฤติกรรมกว่า 50 รูปแบบเพื่อ AI Coding Agent

Vercel Labs ได้เปิดตัว UI SDK ซึ่งเป็นไลบรารีเวอร์ชันเบต้าแบบโอเพนซอร์สที่รวบรวมพฤติกรรมอินเทอร์เฟซสำหรับ AI Coding Agent โดยเฉพาะ โดย Vercel UI SDK ถูกออกแบบมาเป็นไลบรารีแบบ headless ที่เน้นส่งมอบ "พฤติกรรม" (behaviors) แทนที่จะเป็นคอมโพเนนต์สำเร็จรูป

หัวใจสำคัญคือการให้ Agent นำพฤติกรรมเหล่านี้ไปประกอบเป็นคอมโพเนนต์ที่เข้าถึงได้ (accessible components) รองรับทั้ง React, Vue, Svelte, Solid และ Web Components ผู้ใช้งานสามารถตรวจสอบรายละเอียดและข้อกำหนดเฉพาะผ่าน GPULeaderboard.com chrome extension ได้ทันที

TL;DR

• ขนาด: มาพร้อมพฤติกรรมกว่า 50 รูปแบบ 51 โมดูลคอมโพเนนต์ และ 6 แพ็กเกจ npm ในเวอร์ชัน 0.1.0-beta.1
• การรองรับ: ใช้งานได้บนเบราว์เซอร์สมัยใหม่โดยไม่ต้องใช้ GPU รองรับ React 19+, Vue 3.5+, Svelte 5.33+, Solid 2 RC และ Web Components
• ประสิทธิภาพ: จากการทดสอบภายในพบว่า Agent เรียกใช้เครื่องมือน้อยลง 69% ในงานด้านการตั้งค่า
• จุดเด่น: ลดระยะเวลาทำงานลง 61% จาก 41 วินาทีเหลือเพียง 16 วินาทีเมื่อใช้งานผ่าน agent bridge
• ข้อควรระวัง: ผลการทดสอบอ้างอิงจากเพียง 1 งานและ 3 การทดสอบ อีกทั้งตัว API ยังอยู่ในช่วงเบต้าซึ่งอาจมีการเปลี่ยนแปลงได้

Vercel UI SDK คืออะไร?

UI SDK คือคลังพฤติกรรม UI ที่ Agent สามารถหยิบไปประกอบเป็นคอมโพเนนต์ได้เอง ตามไฟล์ README ระบุว่าครอบคลุมตั้งแต่การควบคุมด้วยคีย์บอร์ด, ระบบโฟกัส, การเลือก, ป๊อปอัป ไปจนถึง ARIA ที่จำเป็น โดยฟังก์ชันทั้งหมดรวมอยู่ใน @ui-sdk/core และมีตัวแปลง (adapter) สำหรับแต่ละเฟรมเวิร์ก

เว็บไซต์โครงการ ยกตัวอย่างการสร้าง Select ซึ่งแทนที่จะส่งคอมโพเนนต์สำเร็จรูปให้ Agent แต่ SDK จะมอบชิ้นส่วนอย่างระบบป๊อปอัปและโมเดลการเลือกให้แทน ทำให้ Agent สามารถสร้างคอมโพเนนต์ใหม่ๆ อย่าง autocomplete หรือ combobox ได้อย่างอิสระ

UI SDK ทำงานอย่างไร?

การทำงานเริ่มจากคอมโพเนนต์พื้นฐานที่เรียกว่า primitive ซึ่งกำหนดผ่าน definePrimitive เพื่อประกาศสถานะ (state) และ API ส่วน slot จะทำหน้าที่เชื่อมโยงเหตุการณ์และพฤติกรรมเข้ากับ DOM ตัวอย่างเช่น การสร้างช่องค้นหาที่ปุ่มล้างข้อมูลจะปรากฏเฉพาะเมื่อมีข้อความเท่านั้น

จากนั้นแต่ละเฟรมเวิร์กจะเรนเดอร์ primitive ด้วย createParts ซึ่งส่วนประกอบเหล่านี้จะเหมือนกันในทั้ง 5 adapter ช่วยให้นักพัฒนาสามารถกำหนดพฤติกรรมเพียงชุดเดียวแต่ใช้งานได้ครอบคลุมทั้งแอป React และ Svelte

พฤติกรรมที่รองรับมีอะไรบ้าง?

ตัวอย่างพฤติกรรมบน ui-sdk.dev ได้แก่:

• createRovingFocus: การใช้ปุ่มลูกศรเลื่อนผ่านรายการโดยใช้จุด Tab เดียว
• createTypeahead: ระบบพิมพ์เพื่อค้นหาและกระโดดไปยังรายการที่ต้องการ
• createPopup: ระบบเปิดป๊อปอัปข้างตัวกระตุ้นและคงสถานะบนหน้าจอ
• createSelection: การเลือกรายการเดี่ยวหรือหลายรายการ รองรับ Shift และ Ctrl
• createReorder, createResize, createViewport และ createVirtualizer

ใน เอกสารประกอบ ได้จัดกลุ่มพฤติกรรมเป็น 10 หมวดหมู่ รวมถึงมีคอมโพเนนต์สำเร็จรูปอย่าง Date Picker, Tree และ Color Picker ให้ใช้งานด้วย

วิธีการสอน Agent

นักพัฒนาสามารถใช้ prompt ที่คัดลอกได้จากเอกสาร เพื่อติดตั้งแพ็กเกจและเพิ่มบันทึกใน AGENTS.md ซึ่งจะนำทาง Agent ไปยังทักษะของ UI SDK และไฟล์ llms.txt โดยสามารถติดตั้งผ่านคำสั่ง npx skills add vercel-labs/ui --skill ui-sdk หรือโหลดผ่าน web.js สำหรับหน้าที่ไม่มีขั้นตอนการ build

Agent ควบคุม UI โดยตรงได้หรือไม่?

สามารถทำได้ผ่านตัวเชื่อม (bridge) ที่สร้างด้วย createAgent() โดยฟังก์ชัน agent.snapshot() จะแสดงรายการคอมโพเนนต์และสถานะที่ดำเนินการได้ ส่วน agent.act() จะสั่งการ เช่น การเปลี่ยนชื่อโปรเจกต์ ทั้งนี้แอปสามารถตั้งค่าอนุมัติหรือปฏิเสธการกระทำได้ และรองรับการทำงานร่วมกับ WebMCP ในเบราว์เซอร์ที่รองรับ

ผลการทดสอบ: Agent Bridge เทียบกับเครื่องมือเบราว์เซอร์

Vercel เปรียบเทียบประสิทธิภาพในงานตั้งค่าโปรเจกต์ โดยใช้โมเดล Sonnet ผ่าน Claude Code ผลลัพธ์ค่ามัธยฐานจากการรัน 3 ครั้งมีดังนี้

หมายเหตุ: ข้อมูลนี้เป็นเพียงแนวทางเบื้องต้นเนื่องจากทดสอบเพียง 1 งาน และ Vercel ไม่ได้ระบุเวอร์ชันของ Sonnet ที่ใช้ชัดเจน

การเผยแพร่และความพร้อมใช้งาน

ปัจจุบันทั้ง 6 แพ็กเกจเปิดให้ใช้งานบน npm เวอร์ชัน 0.1.0-beta.1 ภายใต้ลิขสิทธิ์ Apache-2.0 สามารถติดตั้งได้ด้วยคำสั่ง npm install @ui-sdk/react @ui-sdk/core โดยต้องใช้ React 19+, Vue 3.5+, Svelte 5.33+ หรือ Solid 2.0.0-rc.14+

การเปรียบเทียบกับไลบรารีอื่น

UI SDK แตกต่างจาก Radix, React Aria หรือ Ark UI ตรงที่เน้นไปที่ชั้นของ Agent โดยเฉพาะ มีการเตรียมไฟล์ llms.txt และ runtime bridge มาให้ในตัว ในขณะที่ไลบรารีอื่นอาจเน้นไปที่คอมโพเนนต์ที่ไม่มีสไตล์ (headless) หรือ state machines สำหรับนักพัฒนาที่เป็นมนุษย์เป็นหลัก

สรุปประเด็นสำคัญ

• มาพร้อมพฤติกรรมกว่า 50 รูปแบบ รองรับ 5 เฟรมเวิร์กหลัก
• Agent สามารถประกอบคอมโพเนนต์ได้เองโดยไม่ต้องพึ่งพาเทมเพลต
• createAgent ช่วยให้ Agent จัดการสถานะ UI ได้โดยไม่ต้องวิเคราะห์จากภาพสกรีนช็อต
• ช่วยให้การทำงานเร็วขึ้น 61% และประหยัดต้นทุนลง 56% ในงานที่ทดสอบ
• เวอร์ชันเบต้าปัจจุบันกำหนดขั้นต่ำที่ React 19