Vercel全新开源json-render上线！AI生成UI仅4天破7500星！|json|render|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-rendercd json-renderpnpm installpnpm 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 dataformat: 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 }) => (
 {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 生成：

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

适用场景