🔧 阿川の電商水電行
引言
「Generative UI」這個詞您聽過嗎？
Generative UI是由生成式AI或AI代理生成使用者介面的技術。
在嵌入AI代理的應用程式中，AI會在與使用者的對話中動態生成適當的使用者介面。
這次，我將廣泛而淺顯地總結Generative UI的技術和規範。
先行結論
- 實現Generative UI有兩種方法
- AI代理從現有的使用者介面中選擇適當的介面
- AI代理動態生成使用者介面的資訊
- 方法1：由「MCP應用程式」作為MCP的官方規範進行制定
- 方法2：「A2UI」作為Generative UI的標準協議已經公開
Generative UI的概述與解決的問題
Generative UI的概述
首先我們來看看嵌入AI代理的聊天機器人應用。
在常見的簡易聊天機器人應用中，使用者與AI代理的對話主要是以文字為基礎的。
舉個例子，假如問Claude天氣，您只是想知道天氣，卻不想閱讀冗長的文字，對吧？
那麼如果AI代理能顯示出更易於閱讀的UI會怎麼樣呢？
這樣不是更方便嗎？這就是Generative UI的概念。
參考：https://docs.copilotkit.ai/aws-strands/generative-ui/backend-tools
Generative UI所解決的問題
對於簡單的信息，文字傳輸是足夠的。
然而，在以下複雜的應用場合中，文字傳輸會導致使用者體驗不佳的問題。
- 購買商品
- 預訂飛機或餐廳
- 數據可視化
例如，在預訂餐廳時，藉由UI如日曆來輸入日期和時段，比用文字輸入來得更方便。
再者，當處理數據時，若能以圖表等方式可視化，對使用者而言也更加明瞭。
這些問題正是Generative UI所要解決的。
實現Generative UI的兩種方法
在將Generative UI應用於AI代理的應用程式時，有哪些實現的手段呢？
Generative UI本身只是手段，因此實現它需要規範。
這些規範有多種類別，主要分為兩種方法：
- AI代理從現有使用者介面中選擇適合的介面
- AI代理動態生成使用者介面的資訊
方法1：AI代理從現有的使用者介面中選擇適合的介面
此方法中，AI代理將會從事先構建的使用者介面中根據情況選擇適合的介面。
這裡所說的使用者介面是指Web中的HTML、JavaScript、CSS等，這些是渲染使用者介面所需的全部靜態內容。
AI代理將透過MCP存取使用者介面的資訊，並將適合的使用者介面返回到應用程式。
由於MCP本身並未包含專為Generative UI設計的規範，因此需透過SDK加以擴展來實現。
- Apps SDK
- MCP-UI
目前正在致力於將這些作為「MCP應用程式」的標準規範，並在以下問題中討論進行中。
方法2：AI代理動態生成使用者介面的資訊
在此方法中，應用程式所顯示的使用者介面所需的資訊將由AI代理生成。
因此，AI代理並不會直接生成HTML或JavaScript等代碼。
AI代理以「聲明性」方式定義使用者介面，並在前端根據該定義組建使用者介面。
這種方法可以利用以下SDK和框架來實現。
- Open-JSON-UI
- AI SDK UI
- CopilotKIt
最終，Google將於2025年12月制定一個共同的規範「A2UI」。
最終的視覺效果如展示的圖形所示。若想把握趨勢，我認為追隨「A2UI」和「MCP應用程式」會是個不錯的選擇。
實現方法1的手段
Apps SDK
「Apps SDK」是用於在ChatGPT的對話中啟用Generative UI的SDK。
ChatGPT能夠通過MCP與外部連接。
Apps SDK擴展MCP，使得透過MCP來使用生成式AI功能成為可能。
↓ 官方頁面
↓ 參考資訊
MCP-UI
「MCP-UI」是由社群主導的Generative UI規範。
擴展MCP以實現Generative UI的概念與前述的「Apps SDK」相同，但擴展MCP的方式不同。
在前端顯示Generative UI是透過iframe進行的。
↓ 官方頁面
MCP應用程式
「MCP應用程式」是標準化MCP以拓展Generative UI功能的規範，並於2025年11月21日被提案。
前述的Apps SDK和MCP-UI都被參考，此努力旨在標準化MCP的規範。
↓ 建議在GitHub上的規範
↓ 參考的文章（感謝）
實現方法2的手段
Open-JSON-UI
Open-JSON-UI是由OpenAI所規定的規範，AI代理以JSON格式返回聲明式的使用者介面定義。
不過，CopilotKit的頁面有Open-JSON-UI的描述，但找不到Open-JSON-UI的官方頁面。
↓ CopilotKit內的描述頁面
CopilotKit和AI SDK UI的專屬規範
可以使用「CopilotKit」或「AI SDK UI」等框架或SDK來構建AI代理的前端。
↓ 在CopilotKit的情況下
↓ 在AI SDK UI的情況下
A2UI
「A2UI（Agent to UI）」是為Generative UI提供的共同協議。
前端與AI代理之間傳遞JSON Lines格式的使用者介面數據。
AI代理生成SON Lines格式的使用者介面數據，前端解析JSON Lines並最終顯示到畫面上。
{
"surfaceUpdate": {
"surfaceId": "booking",
"components": [
{
"id": "title",
"component": {
"Text": {
"text": {
"literalString": "Book Your Table"
},
"usageHint": "h1"
}
}
},
{
"id": "datetime",
"component": {
"DateTimeInput": {
"value": {
"path": "/booking/date"
},
"enableDate": true
}
}
},
{
"id": "submit-text",
"component": {
"Text": {
"text": {
"literalString": "Confirm"
}
}
}
},
{
"id": "submit-btn",
"component": {
"Button": {
"child": "submit-text",
"action": {
"name": "confirm_booking"
}
}
}
}
]
}
}AI代理和用戶介面的交互是過程串流進行的，並且支持AG-UI等通用連接協議。
值得一提的是，「Lit」「Angular」和「Flutter」的用戶介面已支持A2UI，而「React」等還未支持。不過，根據消息顯示，2026年第1季會實現支持，因此個人建議稍作觀望。
↓ 官方頁面
↓ A2UI的路線圖
↓ 以下文章對尋求概要非常有幫助。（感謝）
總結
此次，我簡要總結了Generative UI以便理解其全貌。
目前，MCP應用程式的共同規範正在制定中！A2UI尚未支持React！據此意味著，隨著時間的推移，行業的事實標準方法將得到確立。
透過撰寫這篇文章，我對此有了一些模糊的概念，接下來想將其實際嵌入AI代理中試試。
其他參考
原文出處：https://qiita.com/Takenoko4594/items/4387782ff8310427048e
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
