跳到主內容

GenUI SDK 主要元件與概念

瞭解 Flutter 版 GenUI SDK 的主要元件和概念。

主要元件

#

genui 軟體包圍繞以下主要元件構建:

Conversation(會話)

該軟體包的主要門面和入口點。它包含 SurfaceController 類,負責管理會話歷史記錄,並編排整個生成式 UI 流程。

Catalog(目錄)

CatalogItem 物件的集合,定義了 AI 可以使用的元件集。SurfaceController 支援多個目錄,允許您將元件組織成邏輯組。每個 CatalogItem 指定元件名稱(供 AI 引用)、屬性資料架構以及用於渲染 Flutter 元件的構建函式。

DataModel(資料模型)

一個用於儲存所有動態 UI 狀態的中心化、可觀察的儲存庫。元件被繫結到此模型中的資料。當資料發生變化時,只有依賴於該特定資料的元件會進行重建。

A2uiTransportAdapter(A2ui 傳輸介面卡)

一個橋接器,用於將來自 LLM 的原始文字流解析為 SurfaceController 所需的 A2uiMessage 指令。

A2uiMessage(A2ui 訊息)

由 AI 傳送(經 A2uiTransportAdapter 解析)並傳達給 UI 的訊息,指示其執行諸如 createSurfacesurfaceUpdatedataModelUpdatedeleteSurface 等操作。

SurfaceController(介面控制器)

處理 A2uiMessage,管理 DataModel,並維護 UI 介面的狀態。

工作原理

#

Conversation 管理互動週期

  1. 使用者輸入

    使用者提供提示詞(例如透過文字框輸入)。應用呼叫 conversation.sendMessage()

  2. AI 呼叫

    Conversation 將使用者的訊息傳送給 LLM SDK。

  3. AI 響應

    LLM 在系統提示詞中提供的元件架構引導下,返回響應。

  4. 流處理

    來自 LLM SDK 的文字流被輸入到 A2uiTransportAdapter 中。

  5. UI 狀態更新

    介面卡解析出的 A2uiMessages 被傳遞給 SurfaceController.handleMessage(),進而更新 UI 狀態和 DataModel

  6. UI 渲染

    SurfaceController 廣播更新,任何監聽該介面 ID 的 Surface 元件都將進行重建。元件繫結在 DataModel 上,因此當資料發生變化時,它們會自動更新。

  7. 回撥

    文字響應和錯誤會觸發 Conversation 上的回撥,或由您特定的 LLM 整合流程處理。

  8. 使用者互動

    使用者與新生成的 UI 進行互動(例如在文字框中打字)。此互動直接更新 DataModel。如果互動是一個操作(如按鈕點選),Surface 會捕獲該事件並將其轉發給 SurfaceController,後者會自動建立一個包含當前資料模型狀態的新 UserMessage,並重新開始迴圈。

有關 Flutter 版 GenUI SDK 實現的更多詳細資訊,請檢視設計文件

下一節將引導您完成將 genui 新增到您的應用中的過程。