สร้าง Generative UI ด้วย A2UI และ CopilotKit บน Google Devs

29 ต.ค. 2026

การปฏิสัมพันธ์ระหว่างเอเจนต์และผู้ใช้ (Agent-User Interactions) กำลังเปลี่ยนผ่านจากการแลกเปลี่ยนข้อความไปสู่ UI ที่สมบูรณ์ ซึ่งก่อนหน้านี้บทสนทนามักถูกจำกัดอยู่เพียงแค่การตอบกลับด้วยข้อความยาวๆ ที่อ่านยากและนำไปใช้งานต่อได้ลำบาก

ยกตัวอย่างเช่น เมื่อผู้ใช้ขอให้หาแพ็กเกจท่องเที่ยว เอเจนต์มักจะแสดงข้อมูลเป็นกำแพงตัวอักษรและส่งลิงก์ให้ไปจองต่อที่เว็บไซต์อื่น โดยไม่มีวิธีมาตรฐานในการแสดงรายการแพ็กเกจ แผนที่ หรือตัวเลือกวันที่เพื่อให้ผู้ใช้จองได้ทันทีภายในหน้าแชท

Generative UI คือเลเยอร์สำคัญที่ช่วยให้เอเจนต์สร้างอินเทอร์เฟซได้ในขณะรันไทม์ โดยปรับเปลี่ยนตามความต้องการของแต่ละคำขอ การนำมาใช้งานประกอบด้วยสองส่วนหลักคือ วิธีการอธิบาย UI และ agentic stack ที่เชื่อมต่อเอเจนต์เข้ากับแอปพลิเคชัน

A2UI (Agent-to-UI) คือมาตรฐานเปิดจาก Google ที่ไม่จำกัดเฟรมเวิร์ก (framework-agnostic) โดยเอเจนต์จะส่งข้อมูลอธิบายอินเทอร์เฟซ และแอปพลิเคชันจะเรนเดอร์ UI ขึ้นมาด้วยคอมโพเนนต์ที่มีอยู่แล้ว ขณะที่ CopilotKit มอบเครื่องมือแบบครบวงจร (agent-integration stack) เพื่อเชื่อมต่อกับเฟรมเวิร์กอย่าง LangChain, AWS Strands และ Google ADK พร้อมรองรับทั้ง React, Angular, Vue และ Slack

Generative UI มีรูปแบบการควบคุมตั้งแต่ระดับที่กำหนดไว้ล่วงหน้า (Controlled end) เพื่อความปลอดภัยของแบรนด์ ไปจนถึงแบบเปิดกว้าง (Open end) ที่เอเจนต์สามารถส่งโค้ด HTML หรือ Javascript มาเรนเดอร์ใน sandboxed iframe ได้

A2UI ครอบคลุมการทำงานทั้งสองแบบ โดยเฉพาะโหมด Declarative ที่ได้รับความนิยมสูงสุด ซึ่งเอเจนต์จะประกอบคอมโพเนนต์จากแคตตาล็อกที่ประกาศไว้ล่วงหน้า ทำให้สามารถทำงานร่วมกับคอมโพเนนต์ที่มีอยู่เดิมได้อย่างแม่นยำผ่านภาษาเดียวกัน

ความปลอดภัยต้องมาก่อน เนื่องจาก A2UI เป็นรูปแบบข้อมูลแบบ declarative ไม่ใช่โค้ดที่รันได้โดยตรง ฝั่งไคลเอนต์จึงสามารถสกัดกั้นสิ่งที่อยู่นอกแคตตาล็อกที่เชื่อถือได้ก่อนแสดงผล นอกจากนี้ยัง รองรับการ streaming ทำให้ไคลเอนต์เรนเดอร์คอมโพเนนต์ได้ทันทีที่ข้อมูล JSON ทยอยมาถึง และที่สำคัญคือ พกพาสะดวก รองรับทั้ง React, Lit, Angular, SwiftUI, Jetpack Compose (Android) หรือ Flutter รวมถึง community renderers

นักพัฒนาฟรอนต์เอนด์สามารถส่งมอบชุดส่วนประกอบเพียงครั้งเดียว เพื่อให้เอเจนต์นำไปประกอบร่างใหม่ตามความต้องการของแต่ละคำขอ โดย Basic Catalog มีคอมโพเนนต์พื้นฐาน 18 รายการ แต่แอปส่วนใหญ่มักจะ กำหนดแคตตาล็อกแบบกำหนดเอง เช่น แผนที่แบบเรียลไทม์ เพื่อให้เข้ากับไลฟ์สไตล์การใช้งานจริง

CopilotKit พัฒนาขึ้นบนโปรโตคอล AG-UI (Agent-User Interaction Protocol) ซึ่งรองรับการส่งข้อมูล A2UI และมี Agent SDK สำหรับแบ็กเอนด์ที่หลากหลาย เมื่อผู้ใช้ดำเนินการบนหน้าจอ ข้อมูลจะถูกส่งกลับไปยังเอเจนต์ผ่านสตรีมเดียวกันทันที

การตั้งค่าประกอบด้วยสองส่วนหลักคือ การเชื่อมต่อเอเจนต์เข้ากับ CopilotKit และการกำหนดสิทธิ์การใช้คอมโพเนนต์ ตัวอย่างการใช้ Google ADK ร่วมกับ FastAPI มีลักษณะดังนี้:

from fastapi import FastAPI
from google.adk.agents import LlmAgent
from ag_ui_adk import ADKAgent, add_adk_fastapi_endpoint
root_agent = LlmAgent(
name="flight_agent",
model="gemini-3.8-flash",
instruction="Help users find and book flights. Call generate_a2ui to show results.",
)
adk_agent = ADKAgent(
adk_agent=root_agent,
app_name="flights",
user_id="demo_user",
use_in_memory_services=True,
)
app = FastAPI()
add_adk_fastapi_endpoint(app, adk_agent, path="/")

ในฝั่งแอปพลิเคชัน คุณสามารถลงทะเบียนจุดเชื่อมต่อได้ที่ /api/copilotkit ตามคู่มือ Google ADK quickstart โดยไม่ต้องแก้ไขโค้ด A2UI พิเศษใดๆ

สำหรับการเรียกใช้งานจากฝั่งไคลเอนต์ ต้องมีการกำหนดนิยามคอมโพเนนต์และแมปเข้ากับ renderer ดังตัวอย่าง:

import { CopilotKit, CopilotChat } from '@copilotkit/react-core/v2';
import {
createCatalog,
type CatalogDefinitions,
type CatalogRenderers,
} from '@copilotkit/a2ui-renderer';
import { z } from 'zod';
const catalogDefinitions = {
FlightCard: {
description: 'A flight result with airline, times, and stops.',
props: z.object({
airline: z.string(),
departs: z.string(),
arrives: z.string(),
stops: z.number(),
}),
},
} satisfies CatalogDefinitions;
const catalogRenderers = {
FlightCard: MyFlightCard, // your React component
} satisfies CatalogRenderers<typeof catalogDefinitions>;
const catalog = createCatalog(catalogDefinitions, catalogRenderers, {
catalogId: 'flight-catalog',
includeBasicCatalog: true,
});
<CopilotKit runtimeUrl="/api/copilotkit" a2ui={{ catalog }}>
<CopilotChat />
</CopilotKit>

อินเทอร์เฟซของ A2UI มีความโดดเด่นที่เป็นแบบสองทิศทางและคอมโพเนนต์มีความไวต่อการเปลี่ยนแปลง (reactive) ทำให้เอเจนต์สามารถปรับเปลี่ยนหน้าจอได้ตามการเลือกของผู้ใช้ เช่น การเลือกเที่ยวบินหรือป้อนข้อมูลผู้โดยสาร ทั้งหมดนี้เกิดขึ้นบนหน้าจอเดียวโดยไม่ต้องโหลดหน้าใหม่

นอกจากนี้ การใช้ AG-UI ยังช่วยลดการตั้งค่าฝั่งเซิร์ฟเวอร์ รองรับการทำงานผ่านซับเอเจนต์ มีระบบแก้ไขเอาต์พุตอัตโนมัติ (Self-healing) หากเกิดข้อผิดพลาด และการล้มเหลวอย่างสุภาพ (Graceful failure) เพื่อให้บทสนทนาดำเนินต่อไปได้แม้การเรนเดอร์จะมีปัญหา

ผู้สนใจสามารถเริ่มสร้างแอป A2UI + CopilotKit ได้ทันทีผ่านคำสั่ง:

npx copilotkit@latest create --name my-app --framework a2ui

หรือศึกษาตัวอย่างที่รันได้จริงที่ CopilotKit Dojo และดูรายละเอียดเพิ่มเติมได้ที่ เอกสาร A2UI