Note ข้อมูลในหน้านี้อ่านจาก repo
thesysdev/openuiและหน้าเอกสารภาพรวมของ OpenUI เมื่อ 2026-10-20 ผ่านการดึงหน้าเว็บ ไม่ได้ใช้ghและไม่ได้อ่าน commit sha จึงยังไม่ได้อ่านโค้ดต้นทางและไวยากรณ์ละเอียดของ OpenUI Lang ตัวเลขประสิทธิภาพทั้งหมดเป็นตัวเลขที่ README รายงานเอง ยังไม่มีใครทดสอบซ้ำ
🎯 แก่นของเรื่อง
OpenUI คือเฟรมเวิร์ก Generative UI ที่ให้ LLM ตอบเป็นภาษาเฉพาะแบบสั้น (OpenUI Lang) แทนการตอบเป็น JSON ยาว ๆ แล้วฝั่งแอปแปลงภาษานั้นเป็นคอมโพเนนต์จริงทีละส่วนระหว่างที่โทเคนยังไหลเข้ามา
ทำไมจึงได้ผล (กลไกเหตุ-ผล)
| ขั้น | เหตุ | ผล |
|---|---|---|
| 1 | คุณประกาศคอมโพเนนต์ที่อนุญาตพร้อมสัญญาแบบ Zod | ระบบสร้าง system prompt จากรายการนั้นเอง prompt จึงตรงกับโค้ดเสมอ |
| 2 | ภาษาออกแบบให้สั้นและอ่านทีละส่วนได้ | โมเดลสร้างโทเคนน้อยลง และ parser เริ่มวาดหน้าจอได้ก่อนตอบจบ |
| 3 | Parser ตรวจว่าใช้เฉพาะคอมโพเนนต์ที่ลงทะเบียนไว้ | โมเดลสร้าง UI นอกกรอบที่คุณกำหนดไม่ได้ |
20% ที่สำคัญที่สุดในทางปฏิบัติ
- ต้องรู้: ท่อ 5 ขั้น (ดูหัวข้อสถาปัตยกรรม), การนิยามคอมโพเนนต์ด้วย Zod, และการสร้าง prompt จากไลบรารีคอมโพเนนต์
- รอได้: แพ็กเกจเสริม เช่น email, observability, OpenClaw, A2UI จนกว่าจะมีความต้องการจริง
📈 ช่วยให้ดีขึ้นอย่างไร
| สถานการณ์ | ไม่ใช้ OpenUI Lang | ใช้ OpenUI Lang | วัดอย่างไร | หลักฐาน |
|---|---|---|---|---|
| โทเคนรวมของ 7 สถานการณ์ UI | 10,180 (Vercel JSON-Render) และ 9,948 (Thesys C1 JSON) | 4,800 | นับด้วย tiktoken (encoder ของ GPT-5) | วัดแล้ว ตัวเลขจาก README (อ่าน 2026-10-20) ลดลง 52.8% และ 51.7% ตามลำดับ |
| ตัวเลข "สูงสุด 67%" | - | README ระบุว่าใช้โทเคนน้อยกว่า JSON "สูงสุด" 67% | ไม่ระบุเงื่อนไขใน README | วัดแล้ว (ค่าสูงสุดที่รายงานเอง ไม่ใช่ค่าเฉลี่ย) ไม่เห็นวิธีวัด |
| ความหน่วงที่ผู้ใช้รู้สึก | รอให้ JSON ครบก่อนจึงแสดงผล | วาดทีละส่วนระหว่างสตรีม | เวลาถึงองค์ประกอบแรกบนจอ | ตีความ จากการที่ README ระบุว่าเรนเดอร์แบบก้าวหน้า ยังไม่มีตัวเลข |
| ความปลอดภัยของ UI ที่โมเดลสร้าง | โมเดลอาจสร้างโครงสร้างที่แอปไม่รองรับ | จำกัดเฉพาะคอมโพเนนต์ที่ลงทะเบียน | จำนวนเอาต์พุตที่ถูกปฏิเสธ | ตีความ จากคำอธิบายเรื่อง controlled rendering |
| คุณภาพ/ความแม่นยำของ UI ที่โมเดลสร้าง | - | - | อัตราสร้างสำเร็จ | ยังไม่ทดสอบ README ที่อ่านไม่มีตัวเลขส่วนนี้ |
Important ตัวเลขที่วัดมาเทียบเฉพาะจำนวนโทเคนในชุดทดสอบของ repo เอง การประหยัดโทเคนไม่ได้แปลว่าคุณภาพ UI หรือต้นทุนรวมดีขึ้นเท่ากัน
🧩 ข้อเท็จจริงเทียบกับการตีความ
| ประเด็น | ข้อเท็จจริง (อ่านจาก repo) | ข้อควรระวัง |
|---|---|---|
| คำอธิบาย repo | "The Open Standard for Generative UI" ใบอนุญาต MIT | คำว่า "มาตรฐานเปิด" เป็นคำที่ repo ใช้เรียกตัวเอง |
| รันไทม์ | React, Vue, Svelte, Angular | ชุดคอมโพเนนต์สำเร็จรูปและหน้าแชตมีใน React เท่านั้น |
| ประสิทธิภาพ | ลดโทเคนราว 52% ในการทดสอบ 7 สถานการณ์ | ตีความเป็นต้นทุนจริงไม่ได้ หากยังไม่ทดสอบกับงานของคุณ |
| ไวยากรณ์ | เห็นรูปแบบ @X(...) ที่ใช้เป็นฟังก์ชันหรือแอ็กชัน |
ไวยากรณ์เต็มยังไม่ได้อ่าน |
🏗️ สถาปัตยกรรมและส่วนประกอบ
README อธิบายท่อ 5 ขั้น และหน้าภาพรวมอธิบาย 4 ส่วนหลักที่เชื่อมกันเป็นวงจร
1. นิยามหรือนำไลบรารีคอมโพเนนต์มาใช้
2. สร้าง system prompt จากไลบรารีนั้น
3. ส่ง prompt ให้โมเดล
4. สตรีมเอาต์พุต OpenUI Lang กลับมาที่ client
5. Renderer วาดผลทีละส่วน
| ส่วนประกอบ | หน้าที่ | หลักฐาน |
|---|---|---|
| Component library | สคีมา Zod + คอมโพเนนต์ของเฟรมเวิร์ก กำหนดว่าโมเดลใช้อะไรได้ | อ่านจาก repo (2026-10-20) |
| System prompt | สร้างจากลายเซ็นคอมโพเนนต์ กฎภาษา ตัวอย่าง และคำสั่งเรื่องสตรีม | อ่านจาก repo (2026-10-20) |
| Parser | แปลงสตรีมเป็นต้นไม้องค์ประกอบแบบมีชนิด ตรวจคอมโพเนนต์ รับเอาต์พุตไม่ครบได้ | อ่านจาก repo (2026-10-20) |
| Renderer | จับคู่ต้นไม้กับคอมโพเนนต์ของคุณ | อ่านจาก repo (2026-10-20) |
การทำงานของ @X(...)
ชื่อกำหนดว่าเป็นฟังก์ชันหรือแอ็กชัน ตัวอย่างจากหน้าเอกสารภาพรวม:
TextContent("Open: " + @Count(open))
Button("Explain", @ToAssistant("Explain this"))
บรรทัดแรกเป็นฟังก์ชันที่คำนวณค่า บรรทัดที่สองเป็นแอ็กชันที่ทำงานเมื่อคลิก
โครงสร้างโฟลเดอร์ใน repo
| โฟลเดอร์ | เนื้อหา |
|---|---|
packages/ |
รันไทม์ แชตแบบ headless UI บินดิงเฟรมเวิร์ก เซิร์ฟเวอร์ observability CLI |
examples/ |
cookbook และตัวอย่างอ้างอิง |
docs/ |
เว็บ openui.com |
benchmarks/ |
ชุดทดสอบประสิทธิภาพโทเคน |
spec/, templates/ |
อยู่ใน repo แต่ยังไม่ได้อ่านเนื้อหา |
📦 เลือกแพ็กเกจให้ตรงงาน
| ความต้องการ | แพ็กเกจ |
|---|---|
| แอปแชตเต็มรูปแบบบน React | @openuidev/react-ui + @openuidev/react-lang |
| ทำหน้าแชตเอง บน React | @openuidev/react-headless |
| Backend/Edge สร้าง prompt | @openuidev/lang-core |
| เอเจนต์ LangChain/LangGraph | @openuidev/langchain |
| Vue 3 / Svelte 5 / Angular | @openuidev/vue-lang / svelte-lang / angular-lang |
| ฝังผ่าน CDN, iframe, ไม่ต้อง build | @openuidev/browser-bundle |
| สร้างอีเมลและส่งออก HTML | @openuidev/react-email |
| ใช้กับ assistant-ui | @openuidev/assistant-ui |
| โปรโตคอล A2UI | @openuidev/a2ui (ใช้กับ zod) |
| เครื่องมือฝั่งเซิร์ฟเวอร์ / Gateway | @openuidev/server |
| สังเกตการณ์บนคอนโซล Thesys | @openuidev/observability-cloud |
| สร้างโปรเจกต์, สร้าง prompt, ออก JSON schema | @openuidev/cli |
| เวิร์กสเปซ OpenClaw | @openuidev/openclaw-os-plugin |
🚀 ลองใช้
ตัวอย่างประกอบ (ตัวเลขเป็นของเราเอง คำนวณจากตัวเลขใน README)
ชุดทดสอบมี 7 สถานการณ์ ค่าเฉลี่ยต่อสถานการณ์จึงเป็น:
| รูปแบบ | โทเคนรวม | เฉลี่ยต่อคำตอบ (÷7) |
|---|---|---|
| OpenUI Lang | 4,800 | ≈ 686 |
| Vercel JSON-Render | 10,180 | ≈ 1,454 |
| Thesys C1 JSON | 9,948 | ≈ 1,421 |
สมมติราคาเอาต์พุต 10 ดอลลาร์ต่อล้านโทเคน (ราคาสมมติเพื่อการคำนวณ) และมี 1,000 คำตอบ:
- OpenUI Lang: 686 × 1,000 = 686,000 โทเคน = 6.86 ดอลลาร์
- Vercel JSON-Render: 1,454 × 1,000 = 1,454,000 โทเคน = 14.54 ดอลลาร์
- ผลต่าง ≈ 7.68 ดอลลาร์ หรือลดราว 52.8% ตรงกับตัวเลขใน README
ควรใช้เมื่อไร
| กรณี | คำแนะนำ | เหตุผล/เงื่อนไข |
|---|---|---|
| ผู้ช่วยแชตที่ต้องตอบเป็นแผนภูมิ ตาราง ฟอร์ม | ควรใช้ | มีไลบรารีสำเร็จรูปใน React |
| ต้องการให้ผู้ใช้เห็นผลทันทีระหว่างโมเดลกำลังตอบ | ควรใช้ | ออกแบบเพื่อสตรีม |
| ต้องจำกัดให้โมเดลสร้างได้เฉพาะคอมโพเนนต์ที่อนุญาต | ควรใช้ | ตรวจด้วยสคีมา Zod |
| UI คงที่ที่ไม่ต้องให้โมเดลตัดสินใจรูปแบบ | ไม่จำเป็น | เขียนคอมโพเนนต์ปกติง่ายกว่า |
| ทีมต้องการ JSON ที่ระบบอื่นอ่านต่อได้ทันที | ระวัง | ต้องมีตัวแปลงจาก OpenUI Lang |
| ต้องการเสถียรภาพระยะยาว | ตรวจก่อน | ยังไม่ได้ตรวจประวัติรุ่นและนโยบายความเข้ากันได้ |
ข้อกำหนดเบื้องต้น: Node.js และ npm, ความรู้ Zod ระดับพื้นฐาน, และสิทธิ์เข้าถึงโมเดลที่ใช้สร้างคำตอบ
ก้าวแรกที่เล็กที่สุด
npx @openuidev/cli@latest create --name genui-chat-app
คำสั่งนี้สร้างแอปเริ่มต้นที่มีสตรีม UI สำเร็จรูป และรองรับ OpenUI Lang (ยังไม่ทดสอบ ว่ารันผ่านบนเครื่องของคุณ) หากต้องการติดตั้งแยก:
# React พร้อมคอมโพเนนต์สำเร็จรูป
npm install @openuidev/react-lang @openuidev/react-ui
# สร้าง prompt ฝั่ง backend หรือ Edge
npm install @openuidev/lang-core
ขั้นตอนแนะนำ
- สร้างโปรเจกต์ตัวอย่างและรันให้ผ่านก่อนแก้อะไร
- เริ่มจากคอมโพเนนต์สำเร็จรูป อย่าเพิ่งเขียนเอง
- ให้สร้าง prompt จากไลบรารีด้วยตัวสร้างของ OpenUI แทนการเขียน prompt มือ
- ลองกับ 3-5 คำถามจริงของผู้ใช้ แล้วดูว่าเอาต์พุตถูกต้องและแสดงผลครบหรือไม่
- ค่อยเพิ่มคอมโพเนนต์ของตัวเอง โดยนิยามสัญญาด้วย Zod
ทดสอบก่อน-หลัง (ทำได้เอง)
| รายการ | วิธี |
|---|---|
| เมตริก | โทเคนเอาต์พุตเฉลี่ยต่อคำตอบ และเวลาจนองค์ประกอบแรกขึ้นจอ |
| Baseline | ระบบเดิมของคุณที่ตอบเป็น JSON ด้วยชุดคำถามเดียวกัน อย่างน้อย 20 คำถาม |
| เงื่อนไขผ่าน (ตั้งก่อนรัน) | โทเคนเฉลี่ยลดลงอย่างน้อย 30% และอัตราที่ UI แสดงผลสำเร็จไม่ต่ำกว่า baseline |
| ถ้าไม่ผ่าน | อย่าเปลี่ยนระบบ หรือลองปรับชุดคอมโพเนนต์ให้เล็กลงแล้ววัดใหม่ |
เกณฑ์ 30% เป็นค่าตัวอย่าง (ตีความ) ปรับตามบริบทของคุณได้
✅ เช็กลิสต์ตัดสินใจ
| ข้อ | คำถาม | สถานะ |
|---|---|---|
| 1 | เฟรมเวิร์กของเรามีรันไทม์รองรับ (React/Vue/Svelte/Angular) | ⚪ |
| 2 | รู้แล้วว่าโมเดลต้องใช้คอมโพเนนต์ชุดไหน | ⚪ |
| 3 | วัด baseline เป็นตัวเลขแล้ว | ⚪ |
| 4 | ตรวจใบอนุญาต MIT และนโยบายของ repo ว่ายอมรับได้ | ⚪ |
| 5 | ตัดสินใจเรื่องการสังเกตการณ์ (ใช้ cloud ของ Thesys หรือไม่) | ⚪ |
🧠 ทดสอบความเข้าใจ
| คำถาม | คำตอบ | คำตอบที่มักผิด |
|---|---|---|
| ทำไมภาษาที่สั้นกว่า JSON จึงทำให้ผู้ใช้เห็นผลเร็วขึ้นได้ด้วย ไม่ใช่แค่ประหยัดเงิน | โมเดลสร้างโทเคนน้อยลง และ parser วาดได้ระหว่างสตรีม แต่ความเร็วจริงต้องวัด | "ภาษาสั้นย่อมเร็วกว่าเสมอ" |
| README รายงานทั้ง "สูงสุด 67%" และ 52.8% ควรอ้างเลขไหนเมื่อประเมินโปรเจกต์ตัวเอง | เริ่มจาก 52.8%/51.7% ที่มีชุดทดสอบ 7 สถานการณ์ แล้ววัดใหม่กับงานเรา | อ้าง 67% เป็นผลที่จะได้แน่นอน |
| ทำไมต้องนิยามคอมโพเนนต์ด้วย Zod ก่อนสร้าง prompt | prompt และ parser สร้างจากสคีมาเดียวกัน สิ่งที่โมเดลรู้จึงตรงกับที่แอปรับได้ | "Zod ใช้แค่ตรวจฟอร์ม" |
| ทีม Vue ต้องการหน้าแชตสำเร็จรูป ควรคาดหวังอะไร | มีรันไทม์ vue-lang แต่ชุดคอมโพเนนต์และแชตสำเร็จรูปที่อ่านพบอยู่ฝั่ง React |
คิดว่าทุกเฟรมเวิร์กมีของครบเท่ากัน |
| (กับดัก) โทเคนลดลง 50% แปลว่าค่าใช้จ่ายรวมลด 50% หรือไม่ | ไม่ใช่ เพราะยังมี prompt อินพุต ค่า infra และการลองใหม่ที่ไม่อยู่ในตัวเลข | "ลด 50% พอดี" |
| ถ้าผลวัดของเราลดโทเคนได้แค่ 10% แต่ UI พังบ่อยขึ้น ควรทำอย่างไร | ถือว่าไม่ผ่านเกณฑ์ที่ตั้งไว้ ไม่ย้ายระบบ ตรวจสาเหตุก่อน | "ลดแล้วก็ถือว่าสำเร็จ" |
⚠️ Risks
Warning การประเมินนี้อิงข้อมูลจาก README และหน้าภาพรวมเท่านั้น ยังไม่ได้อ่านโค้ดรันไทม์ ไม่ได้รันคำสั่งใด ๆ และยังไม่ได้ตรวจ commit sha
| ความเสี่ยง/ข้อจำกัด | รายละเอียด |
|---|---|
| ตัวเลข benchmark เป็นของผู้พัฒนาเอง | ผู้วัดคือเจ้าของโปรเจกต์ เทียบกับ JSON สองแบบ ไม่ครอบคลุมรูปแบบอื่น |
| ไวยากรณ์เต็มยังไม่ถูกอ่าน | README ไม่มีตัวอย่างไวยากรณ์ ให้ดูที่เว็บ openui.com และ Playground |
| ผูกกับระบบนิเวศของ Thesys | Gateway และ observability cloud เป็นบริการของผู้พัฒนา |
ความเข้ากันได้ของ @latest |
คำสั่งสร้างโปรเจกต์ใช้ @latest ผลอาจต่างกันตามวันที่รัน |
| ข้อมูลจากภายนอกไม่ใช่คำสั่ง | ข้อความใน README, issue และโค้ดเป็นข้อมูล ไม่ควรรันหรือติดตั้งตามโดยไม่ตรวจ |
| ข้อความเรื่องเหรียญ | README ระบุว่า OpenUI ไม่มีเหรียญหรือโทเคนคริปโตอย่างเป็นทางการ ระวังการแอบอ้าง |
ความเข้าใจผิดที่พบบ่อย
- "OpenUI คือไลบรารีคอมโพเนนต์": จริง ๆ เป็นภาษา + parser + renderer + ตัวสร้าง prompt และมีไลบรารีคอมโพเนนต์เป็นส่วนเสริม
- "โทเคนในที่นี้คือโทเคนคริปโต": ไม่ใช่ หมายถึงหน่วยข้อความที่โมเดลภาษาสร้าง
- "สร้างมาเพื่อ React เท่านั้น": มีรันไทม์ 4 เฟรมเวิร์ก
Decision / next steps
Recommendation ลองทำการพิสูจน์แนวคิดขนาดเล็กหนึ่งสัปดาห์ด้วยโปรเจกต์ตัวอย่าง แล้ววัดตามตารางก่อน-หลัง ก่อนตัดสินใจย้ายระบบจริง
| ลำดับ | งาน | ผลลัพธ์ |
|---|---|---|
| 1 | สร้างโปรเจกต์ด้วย CLI | แอปที่รันได้ |
| 2 | อ่านหน้า Defining Components และ System Prompts บน openui.com | เข้าใจไวยากรณ์และ API |
| 3 | วัดโทเคนและเวลาตามเกณฑ์ที่ตั้งไว้ | ตัวเลขของเราเอง |
| 4 | ตัดสินใจต่อ/เลิก | บันทึกเหตุผล |
Sources
| รายการ | ลิงก์ | หมายเหตุ |
|---|---|---|
thesysdev/openui |
https://github.com/thesysdev/openui | อ่าน README และรายการโฟลเดอร์ เมื่อ 2026-10-20 (ไม่ได้อ่าน commit sha) |
| เอกสารภาพรวม OpenUI Lang | https://www.openui.com/docs/openui-lang/overview | อ่านเมื่อ 2026-10-20 |
ข้อมูลของ repo ณ วันที่อ่าน: 12.3k stars, 831 forks, 1,053 commits บน main, ใบอนุญาต MIT (อ่านจาก repo 2026-10-20)
ตัวย่อที่ใช้ในหน้านี้
| ตัวย่อ | ชื่อเต็ม | คืออะไร | อ่านค่าอย่างไร |
|---|---|---|---|
| UI | User Interface | หน้าจอที่ผู้ใช้เห็นและกด | "UI สร้างโดยโมเดล" = โมเดลเลือกว่าจะวางส่วนไหนบนจอ |
| LLM | Large Language Model | โมเดลภาษาขนาดใหญ่ที่สร้างข้อความตอบ | "LLM ตอบเป็น OpenUI Lang" = เอาต์พุตเป็นภาษานี้ |
| JSON | JavaScript Object Notation | รูปแบบข้อมูลข้อความที่ใช้ปีกกาและคีย์ | JSON ยาวกว่าเพราะต้องมีคีย์และเครื่องหมายซ้ำ ๆ |
| CLI | Command-Line Interface | เครื่องมือที่สั่งผ่านบรรทัดคำสั่ง | npx @openuidev/cli = เรียกเครื่องมือนี้ |
| CDN | Content Delivery Network | เครือข่ายกระจายไฟล์ให้โหลดเร็ว | "ฝังผ่าน CDN" = ใช้ script tag โดยไม่ต้อง build |
| MIT | MIT License | ใบอนุญาตโอเพนซอร์สแบบอนุญาตกว้าง | "MIT" = นำไปใช้ แก้ไข เผยแพร่ได้ ตามเงื่อนไขใน LICENSE |
| npm / npx | Node Package Manager / package runner | ตัวติดตั้งและตัวรันแพ็กเกจของ Node.js | npm install X = ติดตั้ง X |
| A2UI | Agent-to-UI protocol | โปรโตคอลที่ให้เอเจนต์ส่งคำสั่ง UI ไปฝั่งแสดงผล (ชื่อเต็มไม่ได้ยืนยันจาก repo) | แพ็กเกจ @openuidev/a2ui ส่ง payload เป็น OpenUI Lang |
| Zod | Zod (ไลบรารีสคีมา TypeScript) | ไลบรารีนิยามและตรวจชนิดข้อมูล | สคีมา Zod ของคอมโพเนนต์ = ข้อกำหนดว่ารับ prop อะไรได้ |
| tiktoken | tiktoken | ไลบรารีนับโทเคนของ OpenAI | นับด้วย tiktoken (encoder ของ GPT-5) = ตัวเลขโทเคนในตาราง |
| SSR / Edge | - | ไม่ปรากฏในหน้านี้ จึงไม่มีแถว | - |
แถวที่มาจากความรู้ทั่วไป ไม่ได้มาจาก repo โดยตรง: UI, LLM, JSON, CLI, CDN, MIT, npm/npx, Zod, tiktoken และชื่อเต็มของ A2UI
ข้อสังเกต: ตัวย่อ "Edge" ในคำว่า Edge prompt generation หมายถึงสภาพแวดล้อมประมวลผลที่ขอบเครือข่าย อ่านตามบริบทของ README ไม่ใช่ตัวย่อ
Summary
| หัวข้อ | สรุป |
|---|---|
| คืออะไร | เฟรมเวิร์ก Generative UI ที่ใช้ภาษาสั้น OpenUI Lang และเรนเดอร์แบบสตรีม |
| ตัวเลขหลัก | 4,800 โทเคน เทียบ 10,180 และ 9,948 (ลด 52.8% และ 51.7%) วัดแล้ว โดยผู้พัฒนา |
| รองรับ | React, Vue, Svelte, Angular (ชุด UI สำเร็จรูปอยู่ฝั่ง React) |
| เริ่มอย่างไร | npx @openuidev/cli@latest create --name genui-chat-app |
| ต้องระวัง | ตัวเลขเป็นของผู้พัฒนาเอง ไวยากรณ์เต็มยังไม่ได้อ่าน ต้องวัดซ้ำกับงานของเรา |
| ขั้นต่อไป | ทำ PoC แล้ววัดโทเคนและเวลาแสดงผลเทียบ baseline |
