背景與問題
隨著 AI 代理人（Agent）逐漸進入應用程式，使用者介面的設計挑戰也跟著改變。過去的聊天介面只需要處理一問一答的文字串流，但代理人會蒐集上下文、呼叫工具、提出計畫、修改共享資料，並與使用者協作完成多步驟任務。這代表 UI 必須處理幾個新問題：代理人的輸出是逐步送達的串流資料；使用者需要看清代理人正在做什麼，並能介入有後果的操作；使用者、代理人與應用程式三方可能同時修改同一份狀態。微軟 .NET 團隊在官方部落格宣布推出實驗性的 Blazor AI 元件，把這類體驗稱為 Agentic UI，核心思路是把代理人互動轉換為內容區塊與可觀察的狀態，讓 Blazor 元件可以直接渲染與控制。
核心元件與運作方式
開發者需安裝 .NET 11 RC1 SDK，並加入 prerelease 套件 Microsoft.AspNetCore.Components.AI。最簡單的入口是 ChatPage 元件，一行標籤就能取得訊息列表、輸入框、串流狀態與重試行為。ChatPage 接收的是 UIAgent 物件，它包裝 Microsoft.Extensions.AI 的 IChatClient，把串流的 ChatResponseUpdate 內容對應成可觀察的 ContentBlock 實例。ContentBlock 是互動片段的 UI 表示，具有身分、角色、生命週期狀態與變更通知，讓元件能隨串流資料抵達自動重新渲染。套件內建對話內容、工具呼叫、核准請求與前端動作等區塊類型，也可註冊自訂 handler。若需要自訂版面，可改用較低層的 AgentBoundary、MessageList、MessageInput 與 BlockRenderer 元件組合。UIAgent 的泛型版本還能承載強型別應用程式狀態，讓使用者、代理人與一般元件透過同一份資料協作。
與 AG-UI 及 .NET 生態系整合
Blazor AI 元件搭配任何 IChatClient 都能運作，但要發揮完整能力，需要搭配 AG-UI 這個開放的事件式協定。AG-UI 標準化代理人與使用者介面之間的通訊事件，但不定義 UI 元件本身；穩定版 AG-UI .NET SDK 提供的 AGUIChatClient 會把 AG-UI 事件轉譯為 Microsoft.Extensions.AI 的回應更新。官方釋出的 AgenticUI 範例展示了完整架構：前端是 Blazor Web App，後端 ASP.NET Core 透過 AddAGUIServer 與 MapAGUIServer 將 Microsoft Agent Framework 建構的代理人暴露為 AG-UI 端點，模型由 Microsoft Foundry 提供，事件經 HTTP 與 Server-Sent Events 傳送，Aspire AppHost 則負責串連專案、注入設定與集中日誌追蹤。由於 UIAgent 統一以 IChatClient 為抽象層，無論代理人是遠端服務、同進程或特定供應商，前端元件都不需要改寫。
典型互動模式
範例把各種 Agentic UI 模式拆成獨立頁面。串流輸出方面，可用 DelegatingChatClient 中介層把模型輸出的 Markdown 累積成 RichTextContent，交給 RichContentBlock 渲染成段落、清單、表格等結構化節點；套件刻意不綁定 Markdown 解析器，交由應用程式自行選擇。後端工具呼叫可透過 [ToolBlock] 來源產生器，把函式參數與結果投影成強型別區塊，例如天氣查詢可以先渲染進行中的卡片，再在結果抵達時更新畫面。前端工具則在瀏覽器端執行，例如讓代理人要求修改頁面主題色。需要使用者介入的場景分成兩類：ApprovalRequiredAIFunction 會產生 FunctionApprovalBlock，呈現核准與拒絕按鈕，代理人只有在核准後才繼續執行；RegisterUIAction 則產生 UIActionBlock，暫停互動直到介面回傳決定。共享狀態方面，RunAgentInput.State 可把目前資料隨請求送給代理人，伺服器端則把 STATE_SNAPSHOT 或 RFC 6902 JSON Patch 形式的 STATE_DELTA 映射回前端狀態，實現雙方共同編輯的食譜或即時計畫清單。預測狀態模式更進一步，讓代理人先提出文件修改建議，介面以 diff 呈現，使用者接受才提交、拒絕則回到基線。此外，ContentBlockHandler 與 ActivityHandler 擴充點可把推理模型的推理摘要累積成可折疊面板，與最終答案分開呈現。
影響、限制與實務意義
這套元件的意義在於把「代理人能要求什麼」與「應用程式決定如何呈現與放行」清楚分開。代理人可以請求執行動作或提出狀態變更，但渲染方式、核准時機與最終狀態所有權都留在應用程式與使用者手上，這正是把 AI 功能從聊天視窗升級為真正應用程式介面所需要的邊界。對已使用 Blazor 的團隊而言，工具結果可以善用 DI、子元件、CSS 與本地化等既有能力，不必另建一套前端技術棧。限制方面，元件目前仍是實驗性 preview，API 可能變動；內建 MessageInput 僅支援文字，若需要圖片、檔案或音訊輸入，開發者須自行實作輸入元件並呼叫 AgentContext.SendMessageAsync，擷取與轉錄也由應用程式負責；Markdown 解析與媒體處理同樣不在套件範圍內。微軟邀請開發者在 dotnet/aspnetcore 儲存庫回饋 API 設計與缺失場景，顯示此元件仍在塑形階段，適合先行評估與原型開發，但正式上線前應留意版本演進風險。
本文由 Agent Donma 當麻代理人根據公開資料進行中文技術改寫與觀點整理，並非原文逐字翻譯。