ลองนึกภาพร้านค้าออนไลน์ที่มีกล่องแชต AI อยู่มุมจอ เมื่อผู้ใช้พิมพ์ว่า "หารองเท้าวิ่งไซส์ 42 ให้หน่อย" แทนที่ AI จะทำได้แค่พิมพ์ตอบข้อความกลับมา มันกลับกดปุ่ม "ค้นหาสินค้า" บนหน้าเว็บให้จริง เลือกคู่ที่ตรงสเปก แล้วเด้งกล่องข้อความถามยืนยันว่า "จะใส่ลงตะกร้าเลยไหม" นี่คือสิ่งที่ Persona ทำได้

Persona เป็นไลบรารี UI สำหรับ AI agent แบบ open source ที่เขียนด้วย JavaScript ล้วน (Vanilla JS) ไม่ผูกติดกับ React, Vue หรือเฟรมเวิร์กใด พัฒนาโดยทีม Runtype ภายใต้แพ็กเกจ @runtypelabs/persona ด้วยสัญญาอนุญาต MIT

เหตุผลที่ Persona น่าสนใจไม่ใช่เพราะมี widget กล่องแชตอีกตัวเพิ่มขึ้นมาในตลาด แต่เป็นเพราะมันแก้โจทย์ที่ยากกว่านั้น เวลาทีมพัฒนาอยากฝัง AI agent ลงบนหน้าเว็บ ปัญหาใหญ่ที่สุดไม่ใช่เรื่องหน้าตา UI แต่คือ "จะให้ agent เรียกใช้ฟังก์ชันที่มีอยู่เดิมบนเว็บได้อย่างไร โดยไม่ต้องรื้อระบบหลังบ้านใหม่ทั้งหมด" ซึ่ง Persona ตอบคำถามนี้ด้วยมาตรฐานเปิดที่เรียกว่า WebMCP

ติดตั้งไม่กี่บรรทัดก็พร้อมทำงาน

เริ่มต้นด้วยวิธีที่ง่ายที่สุด คือการนำกล่องแชตขึ้นมาแสดงบนหน้าเว็บ ติดตั้งผ่าน npm เพียงคำสั่งเดียว

npm install @runtypelabs/persona

จากนั้นเรียกฟังก์ชันเพื่อ mount ตัว widget ลงบน element ที่ต้องการ

initAgentWidget({ target: "#chat", config: { apiUrl: "..." } })

หากโปรเจกต์เป็นหน้า HTML ธรรมดาที่ไม่ได้ใช้ bundler หรือระบบ build tools ก็เพียงแค่แปะแท็ก <script> จาก CDN ลงในหน้าเว็บได้ทันที ตัว widget ก็พร้อมแสดงผลเช่นกัน

หัวใจอยู่ที่ WebMCP ไม่ใช่แค่กล่องแชต

WebMCP คือมาตรฐานเปิดที่รวบรวม "เครื่องมือบนหน้าเว็บ" มารวมไว้ที่ศูนย์กลางเดียวกันคือ document.modelContext อธิบายง่ายๆ คือเป็นช่องทางมาตรฐานที่หน้าเว็บใช้ประกาศให้ AI รู้ว่า "หน้านี้มีเครื่องมืออะไรให้เรียกใช้ได้บ้าง" โดย Persona ทำหน้าที่อ่านและเชื่อมต่อกับมาตรฐานนี้

การใช้งานเริ่มต้นจากการลงทะเบียน tool ของหน้าเว็บ เช่น

document.modelContext.registerTool({
  name: "search_products",
  description: "ค้นหาสินค้าจากคำค้นที่ผู้ใช้พิมพ์",
  inputSchema: { /* ... */ },
  execute: async (input) => { /* เรียกฟังก์ชันค้นหาที่หน้าเว็บมีอยู่แล้ว */ }
})

Persona จะตรวจพบ tool นี้โดยอัตโนมัติ เมื่อผู้ใช้พิมพ์ข้อความที่ต้องใช้งานฟังก์ชันนี้ agent จะรู้ทันทีว่ามีเครื่องมือ search_products ให้เรียกใช้ และส่งคำสั่งทำงานได้ทันที ไม่ว่าจะเป็นการค้นหาสินค้า เพิ่มของลงตะกร้า จองคิว หรือกรอกแบบฟอร์ม ตราบใดที่หน้าเว็บทำได้อยู่แล้ว เราก็แค่นำมาห่อเป็น tool หนึ่งตัว

จุดเด่นของแนวทางนี้คือ โค้ดและตรรกะเดิมของหน้าเว็บยังอยู่ที่เดิม ไม่ต้องย้ายไปไหน แชตทำหน้าที่เป็นอินเทอร์เฟซเสริมที่เข้ามาเรียกฟังก์ชันเดิมเหล่านั้น ตรรกะทั้งหมดทำงานในฝั่ง frontend ผ่านฟังก์ชัน execute ทำให้ไม่ต้องสร้าง API endpoint ใหม่หรือรื้อ backend เพื่อรองรับ AI agent

ถามยืนยันจากผู้ใช้ก่อนลงมือเสมอ

การปล่อยให้ AI กดปุ่มหรือจัดการข้อมูลบนหน้าเว็บแทนคน ย่อมมีความเสี่ยงที่จะทำงานผิดพลาดหรือทำในสิ่งที่ผู้ใช้ไม่ได้ตั้งใจ Persona จัดการปัญหานี้ด้วยระบบ Approval Gate ซึ่งเป็นกลไก Human-in-the-loop

ก่อนที่ agent จะรัน tool ใดก็ตาม ระบบจะแสดงหน้าต่างขออนุมัติจากผู้ใช้ก่อนเสมอ ภายในหน้าต่างมีคำอธิบายสั้นๆ ที่เข้าใจง่ายว่ากำลังจะทำอะไร พร้อมรายละเอียดเชิงเทคนิคให้เปิดดูเพิ่มเติมได้ ผู้ใช้สามารถเลือกอนุมัติหรือปฏิเสธได้ทันที และนักพัฒนายังเขียนโค้ดจัดการผลลัพธ์ของการอนุมัติแต่ละกรณีได้ตามต้องการ

เมื่อผู้ใช้กดยืนยัน Persona จะเรียกรัน tool นั้น แล้ว stream ผลลัพธ์กลับเข้ามาในห้องสนทนาให้เห็นทีละขั้นตอน วงจรตั้งแต่รับข้อความ ผู้ใช้คุยกับ agent เลือก tool ขออนุมัติ รันคำสั่ง จนถึงส่งผลลัพธ์กลับ คือสิ่งที่ทำให้ระบบทำงานได้อย่างราบรื่น

สไตล์ไม่ตีกับหน้าเว็บเดิมด้วย Shadow DOM

ปัญหาคลาสสิกเวลาฝัง widget ภายนอกลงหน้าเว็บ คือ CSS ตีกัน ไม่ว่าจะเป็นสไตล์ของ widget รั่วไปทับสไตล์ของเว็บ หรือสไตล์ของเว็บหลักซึมเข้าไปทำให้ widget แสดงผลเพี้ยน

Persona ตัดปัญหานี้ด้วยการ render ผ่าน Shadow DOM พร้อมใส่ prefix ให้กับคลาส CSS ทำให้สไตล์ของ widget กับหน้าเว็บหลักแยกขาดจากกันโดยสิ้นเชิง นำไปแปะไว้บนเว็บไหนก็คงหน้าตาเดิม ไม่ต้องตามแก้ CSS ภายหลัง

สำหรับการปรับแต่งหน้าตา Persona ใช้ระบบ Design Token สามระดับ ตั้งแต่ palette, semantic ไปจนถึง component รองรับโหมด Dark Mode และมี Live Theme Editor ให้พรีวิวสีแบบเรียลไทม์ หากต้องการปรับแต่งเชิงลึก ยังมี Render Hook ให้สลับชิ้นส่วน UI เองได้ทั้งหมด ไม่ว่าจะเป็นปุ่มเปิดแชต (launcher), header, ช่องพิมพ์ข้อความ ตลอดจนหน้าต่างแสดงการเรียกใช้ tool

รองรับ backend ทุกค่าย ไม่ผูกมัด

อีกข้อจำกัดที่พบบ่อยในไลบรารีประเภทนี้ คือการบังคับใช้ backend ของผู้พัฒนา แต่ Persona รองรับการเชื่อมต่อแบบเปิด โดยรับข้อมูลผ่าน SSE (Server-Sent Events) streaming และเปิดให้ปรับแต่งโครงสร้างข้อมูลได้ผ่าน customFetch และ parseSSEEvent หาก backend ของเราส่งรูปแบบข้อมูลไม่ตรงกับค่าเริ่มต้น ก็เขียนฟังก์ชันแปลงข้อมูลคั่นกลางได้ทันทีโดยไม่ต้องแก้ระบบหลังบ้าน

Persona มีตัวอย่าง adapter พร้อมใช้งานร่วมกับเฟรมเวิร์กยอดนิยม:

• Vercel AI SDK สำหรับโปรเจกต์ที่รันบน ecosystem ของ Vercel หรือ Next.js
• OpenAI Agents SDK สำหรับผู้ที่พัฒนา agent ด้วยเครื่องมือฝั่ง OpenAI โดยตรง
• LangGraph.js สำหรับงานที่ workflow ของ agent มีความซับซ้อนหลายขั้นตอนในรูปแบบกราฟ

เราสามารถเลือก adapter ให้ตรงกับ stack เดิมที่มีอยู่ได้ทันที โดยไม่ต้องปรับเปลี่ยนสถาปัตยกรรมหลังบ้าน

นอกจากนี้ยังมีฟีเจอร์เสริมที่เปิดใช้งานได้ตามความเหมาะสม เช่น Voice I/O ที่รองรับการสั่งงานและตอบกลับด้วยเสียง พร้อมระบบดักฟังจังหวะพูดแทรก (interruption), Reasoning Bubble สำหรับพับเก็บกระบวนการคิดของ agent และ Artifacts Panel สำหรับ render โค้ด, markdown หรือคอมโพเนนต์แยกออกมาในหน้าต่างด้านข้าง

สิ่งที่ต้องเตรียมเมื่อคิดจะใช้งาน

การให้ agent เข้ามาควบคุมฟีเจอร์บนหน้าเว็บแลกมาด้วยการออกแบบที่รัดกุม นักพัฒนาต้องนิยาม tool แต่ละตัวอย่างชัดเจน กำหนด inputSchema ให้ถูกต้อง เขียนฟังก์ชัน execute ให้ปลอดภัย และประเมินว่าฟังก์ชันใดควรเปิดให้ agent แตะต้องได้ รวมถึงออกแบบขั้นตอนการขออนุมัติให้เข้าใจง่ายและไม่รบกวนประสบการณ์ผู้ใช้

อย่างไรก็ตาม นี่คือส่วนที่นักพัฒนาควรต้องให้ความสำคัญอยู่แล้ว Persona เข้ามาช่วยตัดภาระงานซ้ำซ้อนอย่างการต่อระบบ stream, การสร้าง UI และการจัดการสถานะของกล่องแชต เพื่อให้ทีมโฟกัสกับตรรกะของเครื่องมือได้เต็มที่

สำหรับผู้ที่ต้องการเพิ่มความสามารถให้เว็บแอปพลิเคชันด้วย AI assistant ที่กดใช้งานฟังก์ชันบนหน้าเว็บได้จริง สามารถดูโค้ดตัวอย่างและเอกสารทั้งหมดได้ที่รีโป runtypelabs/persona

WebMCP กำลังเปลี่ยนบทบาทของ AI บนเว็บ จากเดิมที่ทำได้เพียง "บอกให้ผู้ใช้ไปกดตรงไหน" กลายมาเป็น "กดจัดการให้ทันทีหลังได้รับอนุญาต" โดยย้ายการควบคุมมาอยู่บนหน้าบ้านที่ผู้ใช้มองเห็นและตรวจสอบได้จริง

ที่มา:

• เว็บไซต์ Persona: Open-source Agent UI Library in VanillaJS จาก persona-chat.dev
• รีโป runtypelabs/persona จาก GitHub (runtypelabs/persona)