Persona
ไลบรารี Agent UI โอเพนซอร์สที่เขียนด้วย VanillaJS สำหรับสร้างประสบการณ์ front-end แบบ agentic ด้วย WebMCP, SSE streaming และการปรับแต่งธีม
Persona
Persona คืออะไร
Persona เทียบกับเครื่องมือที่คล้ายคลึง
| โมเดลราคา | ฟรี | ฟรี | ฟรี | ฟรี |
| เครดิตฟรี | ||||
| ฟีเจอร์หลัก |
|
|
|
|
| ข้อดี |
|
|
|
|
| ข้อจำกัด |
|
|
|
|
| เหมาะสำหรับ |
|
|
|
|
วิธีใช้ Persona
- 1ติดตั้งผ่าน npm: npm install @runtypelabs/persona
- 2นำเข้า CSS: import '@runtypelabs/persona/widget.css'
- 3นำเข้า initAgentWidget: import { initAgentWidget } from '@runtypelabs/persona'
- 4เริ่มต้น widget ด้วย element เป้าหมายและ config (API URL):
- 5initAgentWidget({ target: '#chat', config: { apiUrl: 'https://your-api.com/chat' } })
- 6ปรับแต่งประเภท launcher (floating, docked, fullscreen) ผ่านตัวเลือก config
ฟีเจอร์หลักของ Persona
- เนทีฟ WebMCP: agent สามารถใช้เครื่องมือที่ลงทะเบียนบนหน้าเว็บผ่าน document.modelContext
- การเรนเดอร์ Shadow DOM สำหรับแยกสไตล์
- SSE streaming พร้อม parser แบบเสียบปลั๊กและ customFetch
- การปรับแต่งธีมแบบสามชั้น (palette, semantic, component) พร้อมโหมดมืดและตัวแก้ไขสด
- โหมด UX แบบลอย ติดขอบ หรือเต็มหน้าจอ
- อะแดปเตอร์ transport และ parser แบบเสียบปลั๊ก
เคสใช้งานของ Persona
- วิดเจ็ตแชทสนับสนุนลูกค้า
- AI copilot สำหรับเว็บแอปพลิเคชันที่มีอยู่
- ผู้ช่วยแนะนำสำหรับผู้ใช้ใหม่
- เอเจนต์ถาม-ตอบเอกสาร
- ผู้ช่วยอีคอมเมิร์ซสำหรับค้นหาสินค้าและการจอง
ราคาและเครดิตฟรีของ Persona
Persona ใช้โมเดลราคาแบบ ฟรี
ข้อดีและข้อจำกัดของ Persona
ข้อดี
- น้ำหนักเบาและไม่ยึดติดกับเฟรมเวิร์ก (VanillaJS บริสุทธิ์)
- มาตรฐาน WebMCP ช่วยให้ agent สามารถใช้เครื่องมือที่มีอยู่บนหน้าเว็บได้
- Shadow DOM แยกสไตล์ออกจากแอปพลิเคชันโฮสต์
- transport และ parser แบบเสียบปลั๊กทำงานกับ backend SSE ใดก็ได้
- ระบบปรับแต่งธีมที่ครอบคลุมสำหรับการปรับแต่งแบรนด์
ข้อจำกัด
- เอกสารและตัวอย่างยังอยู่ในระหว่างการพัฒนา
- ต้องมี backend SSE endpoint เพื่อการทำงานที่สมบูรณ์
Persona เหมาะกับงานแบบไหน?
- นักพัฒนาที่สร้าง UI agent AI แบบกำหนดเอง
- ทีมที่ต้องการรวมแชท agent เข้ากับเว็บแอปที่มีอยู่
- โปรเจกต์ที่ต้องการวิดเจ็ตแชทที่มีน้ำหนักเบาและขยายได้
คำถามที่พบบ่อยเกี่ยวกับ Persona
ตัวเลือกฟรีทดแทน Persona
IDE ที่ควบคุมด้วยเสียงซึ่งช่วยให้นักพัฒนาสามารถเริ่มเซสชันการเขียนโค้ดด้วย AI กับ Codex หรือ Claude Code อนุมัติคำสั่ง และตรวจสอบ diff จากโทรศัพท์มือถือได้
SureWire เป็นแพลตฟอร์ม QA เฉพาะทางที่ทดสอบความเครียดของเอเจนต์ AI เพื่อความปลอดภัย ความน่าเชื่อถือ และการปฏิบัติตามข้อกำหนด โดยใช้เอเจนต์ทดสอบที่ออกแบบมาโดยเฉพาะ
แพลตฟอร์มโครงสร้างพื้นฐานเบราว์เซอร์สำหรับเอเจนต์ AI เพื่อทำงานบนอินเทอร์เน็ตด้วยความเร็ว โดยมีเซสชันเบราว์เซอร์บนคลาวด์ เอเจนต์ และฟังก์ชันแบบไร้เซิร์ฟเวอร์
เครื่องมือถ่ายโอนไฟล์ที่เน้นตัวแทน (agent-first) ที่ช่วยให้การแชร์ไฟล์ระหว่าง AI agent ด้วยการเรียก MCP อย่างปลอดภัยและเข้ารหัส โดยไม่ต้องมีมนุษย์เกี่ยวข้อง
Manifest แปลง URL ใดๆ ให้เป็นแผนที่ JSON ที่มีโครงสร้างของสิ่งที่ AI agents สามารถโต้ตอบได้บนหน้าเว็บ เช่น ปุ่ม ฟอร์ม อินพุต และฟิลด์ที่จำเป็น
ประตูร่วมมือสำหรับคำสั่งเชลล์ที่เอเจนต์ AI ทำงาน โดยให้ตัวอย่าง สำเนาสำรอง การบังคับใช้นโยบาย และการตรวจสอบสำหรับเครื่องมืออย่าง Claude Code และ Cursor
Agentcard มอบโครงสร้างพื้นฐานการออกบัตรและการชำระเงินที่เหมาะกับเอเจนต์สำหรับ AI agent ช่วยให้ตั้งค่าได้ภายใน 5 นาทีและสามารถซื้อสินค้าแบบอัตโนมัติ
ตัวเลือก AI ทดแทนที่ดีที่สุดสำหรับ Persona
ชุดรวมเซิร์ฟเวอร์ MCP ที่มีช่องโหว่โดยเจตนาสำหรับฝึกอบรมด้านความปลอดภัยของเอเจนต์ (Agentic Security) ที่สอดคล้องกับ OWASP Top 10 สำหรับแอปพลิเคชันแบบเอเจนต์
เครื่องมือ AI โอเพนซอร์สสำหรับการวิจัยโครงสร้างพื้นฐานเชิงลึก รันโมเดล前沿ข้ามโค้ด คลาวด์ และรันไทม์เพื่อให้คำตอบที่ตรวจสอบแล้ว
Magpie เป็น CLI การบัญชีที่มีความคิดเห็นที่ชัดเจนสำหรับมนุษย์และเอเจนต์ AI โดยให้การจัดทำบัญชีคู่ (double-entry bookkeeping) พร้อม RBAC และพื้นที่เก็บข้อมูลเหตุการณ์ที่ไม่เปลี่ยนแปลงบน Jaybase
ส่วนติดต่อผู้ใช้แบบเทอร์มินัลสำหรับจัดการเซสชันเอเจนต์เขียนโค้ด AI (Claude Code, OpenCode, Codex, Grok Build) ใน tmux พร้อมสถานะสด แผนผังกลุ่ม และการตรวจสอบดิฟ
IDE ที่ควบคุมด้วยเสียงซึ่งช่วยให้นักพัฒนาสามารถเริ่มเซสชันการเขียนโค้ดด้วย AI กับ Codex หรือ Claude Code อนุมัติคำสั่ง และตรวจสอบ diff จากโทรศัพท์มือถือได้
ซอฟต์แวร์แคตตาล็อกแบบไบนารีเดียว ไม่ต้องกำหนดค่า มีการค้นหาอัตโนมัติ แสดงการพึ่งพา คะแนนการปฏิบัติตามข้อกำหนด และรวม MCP สำหรับเอเจนต์ AI
CLI สำหรับระบบอัตโนมัติเบราว์เซอร์ที่ออกแบบสำหรับ AI agent เพื่อเลี่ยงการตรวจจับ anti-bot ส่งต่อให้มนุษย์ และทำงานแบบขนาน
ผู้ช่วยช้อปปิ้งที่ขับเคลื่อนด้วย AI ซึ่งให้เคอร์เซอร์สดเพื่อนำทางผู้เยี่ยมชมเว็บไซต์ ชี้สินค้า และแสดงการคำนวณราคา