如果你关注前端或 AI 圈，这几天一定被 Vercel 最新开源的 **json-render** 刷屏了。四天时间，7500 Star。这不仅是火，这是“爆款”的节奏。 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/900ab324c3114c3b932f8f96627d54d2~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5byA5rqQ5pif5o6i:q75.awebp?rk3s=f64ab15b&x-expires=1773187221&x-signature=ndcuLVRKOBDlERCG6hKPUozQVhw%3D) 究其原因是由于 Vercel 极其精准地踩中了当前 AI 应用开发最大的一个痛点：**生成式UI不可控**。以前我们让 AI 写界面，UI 结构一会儿一个样，组件乱飞，输出不可预测。Vercel Labs 发布的 **json-render**，用一种极其优雅的工程化思路解决了这个问题。 **核心公式：AI → JSON → UI** 它不再让 AI 直接写代码，而是让 AI 生成符合特定 Schema 的 JSON 数据，然后前端根据这个 JSON，利用你已经写好的组件进行渲染。它第一次把“AI 生成 UI”这件事，真正拉进了工程可控、可审计、可规模化的生产流程。 #### 核心机制这个项目的精髓在于“约束”与“流式”的结合。 ① Catalog 你需要先定义一个 `catalog`，告诉 AI： * 允许使用哪些组件 * 每个组件有哪些 props（属性） * props 的类型、结构、枚举范围 * 能触发哪些 action 比如： * 只能用 LineChart、StatCard、DataTable * LineChart 只能接收 data 和 color 两个参数。 * 不允许自由写 JSX、不允许胡编组件 AI 在生成时，只能在这个清单里选组件，只能填这些参数，并生成标准的 Schema 用以校验。以此来彻底消灭幻觉，AI 绝对不会给你生成一个你没定义的 3DMap 组件。 ② 流式渲染传统的做法是：等 AI 把 JSON 全部生成完 -> JSON.parse -> 渲染。这中间会有几秒钟的白屏或加载动画。 json-render 支持增量解析。AI 吐出第一个字符，界面上可能就已经开始准备渲染卡片了。用户感觉到的就是：字还没打完，界面就已经跳出来了。这种“无等待”的体验对于 B 端来说至关重要。 ③ 反向生成源码这是 Vercel 最懂开发者的地方。AI 生成的不仅是运行时的界面，它还内置了一个编译器。它能基于当前的 JSON 和你的 Catalog，反向生成一份标准的 React 源码。你可以直接把这段代码下载到你的本地去部署。 #### 快速入手官方已有一个线上可以演示的服务，浏览器输入 `json-render.dev` 就可体验。比如我想：创建一个卡片式AI智能导航站。 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/223b70ad806240d6b4b102732f0e5054~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5byA5rqQ5pif5o6i:q75.awebp?rk3s=f64ab15b&x-expires=1773187221&x-signature=FIPtWsDCnh5cRodjOZunAzuHLqQ%3D) 他就能立马给我设计一个通过内置规定的一些组件，以此生成 JSON 数据，再渲染到页面上。也可以将关键代码拷贝或下载进行本地复用。 ![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/facc952f299a4329ab0e10649c5bddf0~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5byA5rqQ5pif5o6i:q75.awebp?rk3s=f64ab15b&x-expires=1773187221&x-signature=gObDgNZBhQgM2PvqXZFFIT2%2F5lI%3D) 如果想要在本地搭建演示服务，可执行以下指令： git clone https://github.com/vercel-labs/json-render cd json-render pnpm install pnpm dev 其中： * `http://localhost:3000` — 文档和演示区 * `http://localhost:3001` — 示例仪表板如要在你实际的项目中引入该功能，需要安装 json-render。安装指令： ```bash npm install @json-render/core @json-render/react ``` 定义Catalog： ```JavaScript 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(), // Binds to your data format: z.enum(['currency', 'percent', 'number']), }), }, Button: { props: z.object({ label: z.string(), action: ActionSchema, // AI declares intent, you handle it }), }, }, actions: { export_report: { description: 'Export dashboard to PDF' }, refresh_data: { description: 'Refresh all metrics' }, }, }); ``` 注册组件： ```javascript const registry = { Card: ({ element, children }) => (

{element.props.title}

{children} ), Metric: ({ element }) => { const value = useDataValue(element.props.valuePath); return {format(value)}; }, Button: ({ element, onAction }) => ( onAction(element.props.action)}> {element.props.label} ), }; ``` AI 生成： ```JavaScript import { DataProvider, ActionProvider, Renderer, useUIStream } from '@json-render/react'; function Dashboard() { const { tree, send } = useUIStream({ api: '/api/generate' }); return ( downloadPDF(), refresh_data: () => refetch(), }}> e.key === 'Enter' && send(e.target.value)} /> ); } ``` #### 适用场景 * 数据分析仪表盘 * 电商营销配置后台 * 动态表单/问卷 * 展会/大屏可视化 * 内部运营工具凡是你不想手写、但又不能乱写 UI 的地方，json-render 都是非常理想的底座。 #### 写在最后 AI 天生是自由发挥型选手，而 UI 是强约束工程产物。 json-render 干的事，就是在这两者之间建了一条「硬管道」。对于我们开发者来说，这不仅仅是一个工具，更是一种思维方式的转变。以前我们写前端，是写“页面”；以后我们写前端，是写“组件库”和“约束规则Schema”。而剩下的组装工作交给 AI 就好了。 GitHub： >