vercel-labs/json-render

解決的問題

json-render 是一個 Generative UI 框架，允許 AI 從自然語言提示中建立動態且個人化的使用者介面。它透過將 AI 限制在預先定義的元件與動作目錄中，解決了 AI 生成介面的不可預測性問題，確保輸出安全、可預測，並符合特定的模式。

如何運作

開發者定義一個 目錄（使用 Zod 定義的可用元件及其 prop 模式集合）與一個 註冊表（這些元件的實際 UI 實作）。AI 根據目錄的提示產生 JSON 規格（spec），框架的 渲染器 將該 JSON 轉換為跨多個平台的即時介面。

適用對象

需要根據 AI 回應動態調整介面的前端開發人員與 AI 工程師，適用於 Web（React、Vue、Svelte、Solid）、行動裝置（React Native）、3D（Three.js）、終端（Ink）或文件格式（PDF、電子郵件、影像）等場景。

特色亮點

• 跨平台支援：一個元件目錄可渲染為 Web、行動裝置、3D 場景、PDF、HTML 電子郵件與終端介面。
• 受控 AI：AI 僅限使用開發者目錄中定義的元件與操作。
• 串流支援：包含 SpecStream，可在 AI 模型回應時逐步渲染介面。
• 開箱即用：提供 36 個預先建構的 shadcn/ui 元件，實現快速部署。
• 動態邏輯：支援使用表示式（如 $state、$cond）實現條件式顯示與資料驅動的 props。
• 開發者工具：提供與框架無關的開發者工具面板，用於檢查 spec 樹與狀態。