The Generative UI framework——AI 只能在你的乐高目录里搭界面
分类：AI 前端 · 生成式 UI · ← 返回汇总
AI 出 JSON，你出组件——界面生成从「画图」变「拼装」
Generative UI 框架：先定义组件目录（catalog，含 Zod props schema 与 actions），AI 的输出被约束在目录内生成 JSON Spec，渲染器把 Spec 安全落到任意平台。流式渐进渲染，同一目录支持 React/Vue/Svelte/Solid/React Native/终端/3D/视频/PDF/邮件等 13 个目标。适合把 LLM 输出变成可靠交互界面的产品团队——聊天式仪表盘、个性化卡片、MCP 应用都在射程内。
GitHub API 采集于 2026-09-21 · 2026-01-14 建仓 · 最近 push 2026-09-18 · 文档站 json-render.dev · Vercel Labs 官方产品（非玩具）
自由生成代码 = XSS 注入面、幻觉组件、任意布局漂移——产品不敢上生产。
JSON mode 解决「格式合法」，不解决「语义在界内」——没有组件目录约束就没法渲染。
Catalog = 提前定义的乐高块（组件 + props schema + actions）。AI 在目录内组合，输出天然可渲染、可预测、可流式。
一句话：把「AI 生成界面」从开放生成问题变成受限组合问题——可靠性来自约束，不来自祈祷。
// 1. 目录：组件 + Zod schema + actions const catalog = defineCatalog(schema, { components: { Metric: { props: z.object({ label: z.string(), value: z.string(), format: z.enum(["currency","percent"]) .nullable() }) }, Button: { props: z.object({ label: z.string(), action: z.string() }) }, }, actions: { export_report: {/*…*/} } }); // 2. 注册表：目录 → 实际组件实现 const { registry } = defineRegistry(catalog, { components: { Metric: MyMetric, Button: MyButton } }); // 3. 渲染：spec 进，UI 出 <Renderer spec={spec} registry={registry} />
catalog.prompt() 从目录生成系统提示词，加组件就自动更新emit 触发 actions，含内置 setState| 域 | 目标 | 说明 |
|---|---|---|
| Web 四框架 | react / vue / svelte / solid | 同一 catalog 跨框架渲染；Svelte 5 runes / Solid 细粒度响应式原生适配 |
| 全栈应用 | next / tanstack-start | JSON 变完整应用：路由、布局、SSR、metadata |
| 移动端 | react-native | 标准移动组件渲染器 |
| 终端 | ink | 交互式 TUI——CLI 也能吃同一目录 |
| 3D | react-three-fiber | 20 个内置 3D 组件，含 GaussianSplat 高斯泼溅 |
| 视频 | remotion | 时间轴 schema，Spec 生成视频 |
| 文档/图 | react-pdf / react-email / image | PDF、HTML 邮件、OG 图/社交卡（Satori） |
这份矩阵就是「Spec 是货币」的含义：AI 学一次你的目录，产出物从网页到视频到 PDF 全通兑——渲染目标成为可替换的下游。
$state：任意 prop 读状态树：{"name": {"$state": "/activeTab"}}$cond：条件表达式按状态选值（icon 颜色随 tab 切换）$template："Hello, ${/user/name}!" 插值$computed：调用注册函数，参数也走表达式AI 只生成一次静态 JSON 的 UI 是死水。带上状态/条件/监听后，生成的界面能响应用户操作——按钮切 tab、表单联动、错误提示显隐——而这一切仍是纯数据，可校验、可 diff、可回放。
配套 directives 包预置 $format/$math/$concat/$count/$truncate/$pluralize/$join/$t(i18n)——常见格式化不用写 $computed。
// 流式编译器：chunk 到一段，patch 一段 const compiler = createSpecStreamCompiler(); for await (const chunk of llmStream) { const { result, newPatches } = compiler.push(chunk); setSpec(result); // 部分结果直接上屏 } const final = compiler.getResult();
StateStore 官方适配 Redux/RTK、Zustand、Jotai、XState——spec 的 $state 直接挂进你现有的状态管理，不另起炉灶。
@json-render/mcp 让 Claude / ChatGPT / Cursor / VS Code 里直接渲染你的组件——聊天工具变成你的应用分发渠道。
experimental_composeSpec + createEvaluator 可用 Jev（System One 模型）替代自回归 LLM 生成 spec——typed decision 出 UI 的早期试验田。
Jev 联动值得玩味：本周看的 awesome-jev / laya 都是「typed decision」故事，json-render 把同一个模型接到 UI 生成端——新一代生成栈正在互相对齐（codegen 包还能把 spec 树反过来生成代码）。
左边编辑 JSON Spec（或点预设），右边实时渲染一个迷你 catalog：改 $state 看 $cond 表达式变色、点 setState 按钮看 visible 条件显隐——json-render 的核心求值语义（动态 props / 条件可见性 / 状态动作）全部可玩。
▶ 打开 Spec 渲染实验台求值器语义 1:1 复刻官方文档的 Dynamic Props 规则，真值表 + node 对拍双验证。
Generative UI 是 LLM 应用的下一站之争（Anthropic 的 server-driven UI、各家的 artifact 都在抢），json-render 用「约束生成 + 一目录多端」给出了工程上最完整的一版，Vercel 的分发能力加分。看点：MCP Apps 能否成为聊天工具里的 UI 标准、Jev 组合能否跑通、React 之外的渲染器成熟度。评分 8.5：范式清晰、执行强，扣分在心智复杂度与 Labs 属性。