Gan-Tu/Widgets

解決的問題

本專案提供了一種在聊天介面中渲染緊湊且結構化的 UI 小工具的方法。它讓開發者能超越簡單的文字回應，透過模板與資料結合的方式，提供一種標準化系統，用以渲染豐富且可互動的元件（如圖表、表單和代理專用原語）。

工作原理

系統使用 WidgetRenderer，接收三個主要輸入：UI 模板字串（以嚴格、類似 JSX 的語言撰寫）、可選的 Zod 模式用於資料驗證，以及實際的資料物件。

為確保安全性與可預測性，渲染器使用保守的模板引擎，支援宣告式邏輯（繫結、條件與迴圈），但禁止任意 JavaScript 執行。它包含一個 142 個預註冊元件的圖書館——從基本佈局與排版，到複雜的代理原生原語（如 ThinkingReasoning 和 StreamingText）。互動透過本地客戶端動作（例如複製文字或開啟 URL）處理，或透過 onAction 回呼函式轉送至主應用程式。

適用對象

希望在建構 AI 聊天 UI 或代理基礎應用時，無需為每種可能的 AI 輸出手動建構獨特的 React 元件，即可提供結構化、可互動的視覺回應的開發者。

主要亮點

• 豐富的元件圖書館：內建 142 個元件，包括圖表、表單和工作區原語。
• 模式驗證：可選的 Zod 整合，確保在渲染前傳遞給元件的資料是有效的。
• 安全的模板：受限的 JSX 類似語言，防止任意 JS 執行，同時支援迴圈與條件渲染。
• 代理原生原語：專為 AI 互動設計的特殊元件，如推理區塊和審核卡片。
• 主題支援：透過 CSS 設計令牌完全可自訂，並內建亮色與暗色模式支援。