夜雨聆风学习资料网

ARTICLE · 1061228

AI 生成 UI 终于可控了!Vercel json-render 冲上 13000 star!

发布时间：2026-09-23 08:02:42 最近访问：2026-09-23 08:02:32
AI 生成 UI 终于可控了!Vercel json-render 冲上 13000 star!

大家好，我是 01。

让 AI 生成界面，大家试过的方案大概两类。

让 AI 直接写 React 代码：组件是它编的，样式随缘，偶尔夹带危险代码，跑之前还得人工审一遍。

让 AI 输出 Markdown 再渲染：安全是安全了，但表达力太弱，按钮、图表、交互统统没有。

两条路，一个失控，一个太弱。

今年 1 月，Vercel Labs 开源了 json-render，4 天拿下 7500 star，现在已过 13000。

它给这个问题找了个第三条路：

AI 不写代码，只生成 JSON；UI 永远由你自己的组件渲染。

核心公式：AI → JSON → UI

整套流程拆开看：

  1. 1. 开发者用 Zod 定义一个"组件目录"（Catalog）：允许哪些组件、每个组件有哪些 props、能触发哪些 action
  2. 2. AI 生成一份受 Catalog 约束的 JSON 树，只能选清单里的组件，只能填声明过的参数
  3. 3. 前端 Renderer 把 JSON 映射到真实组件实现，边流式边渲染

AI 在这里的角色被严格限制为"填表"。

它编不出你没定义的组件，也塞不进你没允许的参数。

约束即安全，约束即可控。

三个关键机制

1. Catalog：给 AI 一份白名单

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" },  },});

注意 Button 的设计：AI 只能"声明"要触发哪个 action，真正执行的是你注册的处理函数。

AI 没有执行权，只有建议权。

2. 流式渲染：字没打完，界面先出来

传统做法要等 JSON 全部生成完、parse、再渲染，中间好几秒白屏。

json-render 支持增量解析：AI 吐出第一个元素，界面上对应组件就开始渲染。

对话产品的"打字机效果"，直接平移到了 UI 生成。

3. 反向生成源码：给开发者留了后路

这是最贴心的一点。

json-render 内置了一个编译器，能把生成的 JSON + 你的 Catalog 反向编译成标准的 React 源码。

不满意 AI 的运行时方案？把源码下载下来，当普通项目改。

上手

安装：

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

注册真实组件：

const registry = {  Card: ({ element, children }) => (<div className="card">      <h3>{element.props.title}</h3>      {children}    </div>  ),  Button: ({ element, onAction }) => (<button onClick={() => onAction(element.props.action)}>      {element.props.label}    </button>  ),};

渲染：

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>  );}

DataProvider 负责数据绑定（valuePath 指向的数据源），ActionProvider 负责动作执行。

本地体验官方 demo：

git clone https://github.com/vercel-labs/json-rendercd json-render && pnpm install && pnpm dev

浏览器打开 json-render.dev 也可以直接玩。

生态：不止 React

  • • 渲染器：React、Vue、Svelte、Solid、React Native 都有官方包——Vue 团队不用等
  • • 36 个预置 shadcn/ui 组件：不想手写 registry 可以直接起步
  • • 脑洞更大的附加包：PDF 生成、HTML 邮件、Remotion 视频、OG 图、React Three Fiber 3D 场景

也就是说，"AI 生成"的对象不止是网页：邮件模板、社交分享图、甚至 3D 场景，都能用同一套约束管线。

社区的冷水，也值得听

Hacker News 上有过一轮很有质量的讨论。

"为什么不直接用 JSON Schema / OpenAPI？"

因为那些描述的是数据，json-render 描述的是 UI。最接近的替代方案是让 AI 直接返回 React 代码——但那等于把渲染层完全交出去，而 JSON 这层约束天然挡住了恶意代码。

"Google 不是也有个 A2UI？"

确实，Google 2025 年底发布了 A2UI（Agent-to-User Interface）。社区对比后的结论：json-render 是绑定你应用组件集的"工具"，A2UI 是跨 Agent 互操作的"协议"。一个做深，一个做通。

CEO 的表态则相当高调

Guillermo Rauch 的评价是"把 AI 直接插进渲染层"、"颠覆性的技术"。

是不是颠覆不好说，但方向确实是对的：与其让 AI 当程序员，不如让 AI 当排版员。

适用场景

  • • 数据分析仪表盘：自然语言拉面板，text-to-dashboard 是目前验证最充分的场景
  • • 营销配置后台：运营自己"说"出想要的页面
  • • AI 助手界面升级：从纯文本对话升级到富交互
  • • 动态报表/周报：数据一变，界面跟着变

写在最后

"AI 生成 UI"喊了两年，一直卡在同一个问题上：自由度和可控性不可兼得。

json-render 的答案很工程化：把 AI 的输出压缩成一份受 Schema 约束的 JSON，把创造力关进组件目录的笼子里。

听起来是限制，其实是解放——

AI 终于可以在生产环境里画界面了。

官网：https://json-render.dev/

文档：https://json-render.dev/docs

Playground：https://json-render.dev/playground

相关学习资料