vercel-labs/json-render

解决的问题

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

工作原理

该框架通过将 UI 定义与实现分离来工作：

1. 目录定义：开发者使用 Zod 模式定义“目录”，指定 AI 可以使用的组件（及其必需的属性）和操作。
2. 注册表映射：开发者创建一个注册表，将这些目录定义映射到实际的 UI 组件（例如 React、Vue、Svelte 或 SolidJS）。
3. 渲染：AI 基于目录生成 JSON 规范（spec）。Renderer 接收此 JSON 规范和注册表，安全地在目标平台上渲染最终 UI。

适用人群

希望构建可在多个平台（Web、移动、视频、PDF、邮件、3D）上流式传输并渐进式渲染的 AI 驱动界面，同时不牺牲设计一致性或可靠性的前端开发者和 AI 工程师。

特色亮点

• 跨平台支持：支持 React、Vue、Svelte、SolidJS、React Native、Remotion（视频）、React PDF、React Email 和 Three.js（3D）。
• 受控输出：AI 被限制在特定组件目录内，防止生成无效或不支持的 UI 元素。
• 开箱即用：包含 36 个预构建的 shadcn/ui 组件，支持快速开发。
• 完整应用功能：针对 Next.js 和 TanStack Start 的专用渲染器，使 JSON 规范可转化为包含路由、布局和 SSR 的完整应用。
• 开发者工具：提供与框架无关的 devtools 核心，包含规范树、状态编辑器和 DOM 选择器。