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

开源星探

发布于 2026-03-16 19:51:25

3120

文章被收录于专栏：翩翩白衣少年翩翩白衣少年

如果你关注前端或 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>
  );
}