Vercel 开源 json-render！短短 4 天狂揽 7500 Star，这才是 AI 生成 UI 的终极解法！

如果你关注前端或 AI 圈，这几天一定被 Vercel 最新开源的 json-render 刷屏了。

四天时间，7500 Star。这不仅是火，这是“爆款”的节奏。

究其原因是由于 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智能导航站。

他就能立马给我设计一个通过内置规定的一些组件，以此生成 JSON 数据，再渲染到页面上。

也可以将关键代码拷贝或下载进行本地复用。

如果想要在本地搭建演示服务，可执行以下指令：

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：

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' },

 },

});

注册组件：

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 生成：

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 就好了。

GitHub：

https://github.com/vercel-labs/json-render

文章来自于“开源星探”，作者 “痕小子”。