如果你关注前端或AI领域，最近几天一定被 Vercel 旗下实验室最新开源的项目 json-render 刷屏了。
短短四天，该项目在 GitHub 上就获得了超过 7500 个 Star，热度空前。
这一现象背后，是 Vercel 精准地切中了当前 AI 应用开发的一大核心痛点：由 AI 直接生成的 UI 结构不可预测、难以控制。
以往，我们让大语言模型编写界面代码时，输出结果往往天马行空，组件使用混乱，每一次生成都可能截然不同。Vercel Labs 推出的 json-render 提供了一种极其优雅的工程化解决方案，其核心思路可以概括为一个简洁的公式：
AI → JSON → UI
它不再让 AI 直接输出前端代码（如 JSX），而是引导 AI 生成一份符合开发者预先定义好的 Schema（模式）的 JSON 数据。然后，前端应用根据这份 JSON，调用项目中已经存在的、经过充分测试的组件进行渲染。
这首次将“AI 生成 UI”这件事，纳入了 工程可控、输出可审计、易于规模化 的生产级流程。
核心机制：约束与流式渲染
这个项目的精髓在于“约束”与“流式”的巧妙结合。
1. 定义组件目录 (Catalog)
首先，你需要定义一个 catalog。这相当于给 AI 划定一个“组件游乐场”，明确告诉它：
- 允许使用哪些组件（如
Button, Card, Chart）
- 每个组件有哪些可配置的属性（props）
- 这些属性的类型、结构、以及可能的枚举值范围
- 组件可以触发哪些预定义的操作（actions）
例如，你可以规定：
- 在这个仪表盘场景下，AI 只能使用
LineChart、StatCard、DataTable 这几个组件。
LineChart 组件只接收 data（数组）和 color（字符串）两个参数。- 绝对不允许 AI 自由发挥编写 JSX 或创造不存在的组件。
通过这种方式，彻底杜绝了 AI 的“幻觉”问题——它绝不会给你生成一个你没有在 catalog 里定义的 3DMap 组件。
2. 支持流式渲染 (Streaming)
传统的工作流是：等待 AI 生成完整的 JSON 字符串 -> 前端解析（JSON.parse）-> 最后一次性渲染整个界面。这会导致用户面临几秒钟的白屏或加载等待。
json-render 支持增量解析。AI 模型开始输出 JSON 的第一个字符时，渲染引擎就可以开始解析并准备相应的组件。这意味着，AI 的话还没“说完”，界面上的第一个卡片可能就已经开始渲染了。
用户感知到的将是“界面随着文字一起出现”的无缝体验，这对于追求流畅感的 B 端应用或仪表盘至关重要。
3. 反向生成可部署源码
这可能是最懂开发者的一环。json-render 不仅生成运行时界面，其内部还包含一个编译器。
它能够基于 AI 生成的最终 JSON 和你定义的 catalog，反向生成一份标准的、干净的 React 组件源码。你可以直接将这份代码下载并集成到自己的项目中，进行进一步的定制或部署，实现了从 AI 草稿到生产代码的平滑过渡。
快速体验与上手
官方已经提供了一个在线的演示服务，直接在浏览器中访问 json-render.dev 即可体验。
例如，输入“创建一个卡片式 AI 智能导航站”的指令。
系统会基于内置的组件规则生成对应的 JSON 结构，并实时渲染出页面。你可以在右侧直接查看生成的静态 React 代码，并复制或下载以供本地使用。
若想在本地运行演示环境，可以执行以下命令：
git clone https://github.com/vercel-labs/json-render
cd json-render
pnpm install
pnpm dev
启动后：
http://localhost:3000 — 项目文档和主演示界面http://localhost:3001 — 一个示例仪表板应用
如何集成到你的项目
要在自己的 前端 项目中引入 json-render 的能力，首先需要安装核心包。
npm install @json-render/core @json-render/react
第一步：定义组件目录 (Catalog)
使用 zod 库来定义严格的组件属性模式。
import { createCatalog } from '@json-render/core';
import { z } from 'zod';
const catalog = createCatalog({
components: {
Card: {
props: z.object({ title: z.string() }),
hasChildren: true,
},
Metric: {
props: z.object({
label: z.string(),
valuePath: z.string(), // 用于绑定你的数据源
format: z.enum(['currency', 'percent', 'number']),
}),
},
Button: {
props: z.object({
label: z.string(),
action: ActionSchema, // AI声明意图，由你来实现具体逻辑
}),
},
},
actions: {
export_report: { description: 'Export dashboard to PDF' },
refresh_data: { description: 'Refresh all metrics' },
},
});
第二步：实现并注册渲染组件
将 catalog 中定义的抽象组件映射到你项目中的实际 UI 组件。
const registry = {
Card: ({ element, children }) => (
<div className="card">
<h3>{element.props.title}</h3>
{children}
</div>
),
Metric: ({ element }) => {
const value = useDataValue(element.props.valuePath);
return <div className="metric">{format(value)}</div>;
},
Button: ({ element, onAction }) => (
<button onClick={() => onAction(element.props.action)}>
{element.props.label}
</button>
),
};
第三步：连接AI流并渲染
使用提供的 React Hook 和组件来连接 AI 后端并渲染 UI。
import { DataProvider, ActionProvider, Renderer, useUIStream } from '@json-render/react';
function Dashboard() {
const { tree, send } = useUIStream({ api: '/api/generate' });
return (
<DataProvider initialData={{ revenue: 125000, growth: 0.15 }}>
<ActionProvider actions={{
export_report: () => downloadPDF(),
refresh_data: () => refetch(),
}}>
<input
placeholder="Create a revenue dashboard..."
onKeyDown={(e) => e.key === 'Enter' && send(e.target.value)}
/>
<Renderer tree={tree} components={registry} />
</ActionProvider>
</DataProvider>
);
}
典型应用场景
- 数据分析与业务仪表盘：快速根据自然语言描述生成数据可视化面板。
- 电商与营销后台：动态配置商品展示页面或活动页面。
- 动态表单与问卷调查：根据需求实时生成数据收集界面。
- 会展大屏可视化：快速搭建实时数据监控视图。
- 内部运营与工具平台：为非技术人员提供快速创建功能界面的能力。
凡是那些你不想手动重复编写、但又必须保证 UI 一致性和质量的应用场景，json-render 都能作为一个理想的底层框架。
结语
AI 天生擅长自由创作，而 UI 开发则是强调约束与规范的工程活动。json-render 所做的工作，正是在两者之间搭建了一条可靠的“管道”。
对于开发者而言，这不仅是一个工具，更可能是一种思维范式的转变。未来的 前端 开发，重点或许将从编写一个个具体的“页面”，转向设计高内聚的“组件库”和定义清晰的“约束规则(Schema)”。剩下的组合与布局工作，则可以放心地交给 人工智能 来完成。
如果你对这类工程化解决 AI 应用落地的方案感兴趣，欢迎在 云栈社区 交流讨论。
项目地址：https://github.com/vercel-labs/json-render
发表于 前天 09:03
|
查看: 9|
回复: 0
