JSON-Render Vibe 项目

产品简介

JSON-Render 是 Vercel Labs 开源的一款生成式 UI（Generative UI）框架，专注于解决 AI 模型生成动态界面时的可靠性问题。在传统方案中，AI 生成的内容通常是纯文本或需要前端工程师手工实现为组件；JSON-Render 则允许 AI 根据自然语言描述生成符合预设规范的 JSON 结构，再由预先定义的组件库渲染为真实 UI——既保留了 AI 生成界面的灵活性，又通过组件目录约束确保输出可预测、可复用。

核心功能

约束型生成：开发者预先定义组件目录（Component Catalog），AI 只能在目录范围内选择组件组合生成界面，从根本上避免生成不可控或样式混乱的 UI。

流式渲染：支持边生成边渲染，JSON 数据流式到达时界面逐步呈现，用户无需等待完整响应即可看到结果。

跨平台支持：同一套组件目录和 JSON 规范可同时用于 React Web、React Native、Vue、Svelte、Solid、Next.js App Router、React Native 以及终端 TUI，一次定义多端生效。

36 个预置 shadcn/ui 组件：开箱即用，涵盖卡片、表格、表单、图表等常见 UI 模式，无需从零定义组件。

代码导出：可将 AI 生成的 UI 导出为独立的 React 项目，包含完整的 package.json、组件文件和样式，可脱离 json-render 运行时独立运行。

数据绑定：支持 $state、$item、$index 等绑定语法，以及双向数据绑定，将动态数据直接连接到组件属性。

多场景适配：除 Web 和移动端外，还支持 PDF 文档生成、HTML 邮件渲染、Remotion 视频界面和 React Three Fiber 3D 场景等多种输出目标。

技术实现

JSON-Render 的工作流程分为三个阶段。第一阶段是目录定义：开发者通过 defineCatalog 声明可用组件集合，每个组件附带 Zod schema 定义其接受的 props 类型和取值范围——这是整个约束机制的核心。第二阶段是 AI 生成：用户输入自然语言提示，AI 在给定 JSON Schema 的约束下生成符合规范的 JSON 结构；第三阶段是渲染：框架将 JSON 解析为组件树，按拓扑顺序依次渲染，同时支持流式写入实现渐进式界面展示。

框架使用 JSON Schema 作为 AI 输出和组件渲染之间的契约层，确保 AI 生成的每一条 JSON 都对应一个真实存在的组件和有效的 props 值。对于复杂场景，框架还支持 Action 定义，让 AI 能够触发具体的后端操作。导出功能则是在渲染完成后，将组件树反编译为标准 React 代码，实现从运行时生成到静态代码的转换。

快速上手

第一步：安装核心包

npm install @json-render/core @json-render/react

第二步：定义组件目录

import { defineCatalog } from '@json-render/core'; import { schema } from '@json-render/react/schema'; import { z } from 'zod';

const catalog = defineCatalog(schema, { components: { Card: { props: z.object({ title: z.string(), description: z.string() }), }, }, });

第三步：创建渲染器

const render = createRenderer(catalog);

第四步：传入 AI 生成的 JSON

const json = await ai.generate(userPrompt, { schema: catalog.jsonSchema }); render(json);

第五步：导出为静态代码（可选）

const code = await render.exportAsCode(); // 导出为独立 Next.js 项目

适用人群

AI 应用开发者：需要在应用中引入 AI 生成界面能力，同时希望保持 UI 一致性和可控性的团队。

前端工程师：希望让 AI 辅助生成 UI 代码，但不愿放弃对设计系统和组件规范控制的开发者。

全栈开发者：需要快速在 AI Agent 应用中实现多端 UI 输出一致性的工程师，一次定义即可覆盖 Web、移动端和邮件等多个渠道。

官方链接

官网：https://json-render.dev GitHub：https://github.com/vercel-labs/json-render NPM：https://www.npmjs.com/package/@json-render/core