vercel-labs/json-render

解决的问题

json-render 是一个 Generative UI 框架，允许 AI 从自然语言提示中创建动态、个性化的用户界面。它通过将 AI 限制在预定义的组件和操作目录中，解决了 AI 生成 UI 的不可预测性问题，确保输出安全、可预测，并符合特定的模式。

工作原理

开发者定义一个 目录（使用 Zod 定义的可用组件及其 prop 模式集合）和一个 注册表（这些组件的实际 UI 实现）。AI 根据目录的提示生成 JSON 规范（spec），框架的 渲染器 将该 JSON 转换为跨多个平台的实时界面。

适用人群

需要根据 AI 响应动态调整 UI 的前端开发人员和 AI 工程师，适用于 Web（React、Vue、Svelte、Solid）、移动（React Native）、3D（Three.js）、终端（Ink）或文档格式（PDF、邮件、图像）等场景。

特色亮点

• 跨平台支持：一个组件目录可渲染为 Web、移动、3D 场景、PDF、HTML 邮件和终端 UI。
• 受控 AI：AI 仅限使用开发者目录中定义的组件和操作。
• 流式支持：包含 SpecStream，可在 AI 模型响应时逐步渲染 UI。
• 开箱即用：提供 36 个预构建的 shadcn/ui 组件，实现快速部署。
• 动态逻辑：支持使用表达式（如 $state、$cond）实现条件可见性和数据驱动的 props。
• 开发者工具：提供与框架无关的开发工具面板，用于检查 spec 树和状态。