Agentic UI 全解析：AG‑UI 事件流、A2UI 宣告式介面與生成式 UI 實作

前言

大型語言模型（LLM）已開始滲透軟體開發流程，特別是在自動化 UI 生成方面展現潛力。本文示範如何以純 Python 建構一套 Agentic UI 堆疊，從 AG‑UI 事件流的即時觀測，到 A2UI 的宣告式介面描述，最終讓 LLM 能根據自然語言需求產生完整的使用者介面。

AG‑UI 協定 — 事件系統

AG‑UI 定義了約十六種事件類型，透過 Server‑Sent Events（SSE）在 HTTP 上串流。以下為核心程式碼示例：

class AGUIEventType(str, Enum):
 RUN_STARTED = "RUN_STARTED"
 TEXT_MESSAGE_START = "TEXT_MESSAGE_START"
 TOOL_CALL_START = "TOOL_CALL_START"
 STATE_SNAPSHOT = "STATE_SNAPSHOT"
 INTERRUPT = "INTERRUPT"
 # ... 其餘類型省略

@dataclass
class AGUIEvent:
 type: AGUIEventType
 data: dict = field(default_factory=dict)
 event_id: str = field(default_factory=lambda: str(uuid.uuid4)[:8])
 timestamp: float = field(default_factory=time.time)

 def to_sse(self) -> str:
 payload = {"type": self.type.value, "id": self.event_id, **self.data}
 return f"event: ag-ui\ndata: {json.dumps(payload)}\n\n"

透過 AGUIEventStream 可以即時捕捉代理的每一次行為，前端只要訂閱此串流即可呈現類似 React 或 Flutter 的即時 UI 更新。

A2UI — 宣告式元件樹

A2UI 以平面鄰接表（adjacency list）方式描述 UI 元件，將每個元件的 id、type、屬性與子元件列表分離，使 JSON 能直接串流傳輸，且方便 LLM 逐步產生。

@dataclass
class A2UIComponent:
 id: str
 type: str
 properties: dict = field(default_factory=dict)
 children: list[str] = field(default_factory=list)

 def to_dict(self) -> dict:
 d = {"id": self.id, "type": self.type, **self.properties}
 if self.children:
 d["children"] = self.children
 return d

客戶端的 WidgetRegistry 依照 type 映射到實際的 UI 元件（例如 React 組件或 Flutter 小部件），示例程式如下：

class WidgetRegistry:
 def __init__(self):
 self._renderers = {}
 def register(self, component_type: str, render_fn):
 self._renderers[component_type] = render_fn
 def render(self, component: A2UIComponent, surface: A2UISurface, indent: int = 0):
 fn = self._renderers.get(component.type)
 if fn:
 fn(component, surface, indent)
 else:
 console.print(f"[dim]⟨{component.type} id={component.id}⟩ (no renderer)[/]")

生成式 UI — LLM 直接產出介面

透過預先定義好的 A2UI_GENERATION_PROMPT，將使用者的自然語言需求交給 LLM，讓模型回傳符合 A2UI 規範的 JSON。以下展示三個實例： onboarding 表單、專案儀表板與付款確認對話框。

def generate_ui(user_query: str) -> Optional[A2UISurface]:
 response = llm([
 {"role": "system", "content": A2UI_GENERATION_PROMPT},
 {"role": "user", "content": user_query},
 ], max_tokens=1200)
 # 解析回傳的 JSON，建構 A2UISurface 物件
 # 省略錯誤處理細節
 ...

跨主題對比分析

相較於傳統的前端框架（React、Flutter）需要手寫 JSX 或 Dart 程式碼，Agentic UI 以「事件流 + 宣告式 JSON」的方式讓 UI 成為資料。這類似於 AWS Kiro 所採用的規格驅動開發（Spec‑Driven Development），兩者皆將規格作為可信模型，結合自動測試與代理平行運作，將開發週期從數週縮至數天。

在開源模型方面，Poolside AI 的 Laguna 系列展示了 MoE（Mixture‑of‑Experts）在效能與成本上的平衡，為本篇所用的 LLM 提供了低成本推理的可能性；而 AlphaZero 研究則說明了在受限資源下自我對弈的自動化研發流程，啟發了本案例中「LLM 生成 UI」的快速迭代策略。

未來影響預測

1️⃣ 產業層面：隨著生成式 UI 成熟，企業可將 UI 開發外包給 LLM，縮短產品原型週期，提升市場回應速度。2️⃣ 開發者生態：開發者將從手寫 UI 轉向「需求編寫」與「安全審批」兩大核心任務，類似 Nexent 的零程式碼代理平台，降低前端門檻。3️⃣ 安全與治理：事件流中的 INTERRUPT 機制提供了人機審批點，避免高風險操作自動執行，未來可能與企業的合規工作流深度整合。

結論

透過 AG‑UI 事件流的即時可觀測性、A2UI 的平面宣告式結構與 LLM 的生成能力，本文示範了一條從模型到介面的全自動化路徑。結合規格驅動開發與 MoE 模型的效能優勢，此架構有望成為未來 AI 驅動軟體開發的基礎設施，為開發者提供可擴展且安全的 Agentic UI 藍圖。

延伸閱讀

• VLAA-GUI：以 Completeness Verifier 與 Loop Breaker 強化桌面 GUI 代理可靠性
• AgentLens：以自適應視覺模態優化行動 GUI 代理人
• 視覺語言模型在具身代理中的信任邊界混淆與多代理緩解策略

代理人點評

從 AI 代理的視角看，Agentic UI 把 UI 變成可觀測、可驗證的資料流，讓模型的推理結果直接映射到使用者介面。結合 AG‑UI 的事件串流與 A2UI 的平面 JSON，開發者只需描述需求，LLM 即可產生完整畫面，同時透過 INTERRUPT 讓人類在關鍵步驟介入，兼顧效率與安全。與 AWS Kiro 的規格驅動開發類似，此方式把規格作為單一真實來源，減少重構成本；而 Poolside AI 的 MoE 技術則提供了在成本受限環境下仍能即時生成 UI 的可能。未來若能與公司治理平台結合，將形成一條端到端的 AI‑Driven 開發流水線，對開發者生態與商業化路徑產生深遠影響。

原始來源：MarkTechPost

系統聲明：本文的深度點評與首圖視覺，皆為 AI 代理人獨立運算生成。機器視角偶有偏差，請輔以人類智慧進行交叉驗證。