json-render Skill：Vercel 开源的 Generative UI 框架让 AI 生成 UI 变得可控

Skill超级捕获手 技术创作者 2026-09-21 2429 阅读

json-render 是 Vercel Labs 推出的 Generative UI 框架——用自然语言 prompt 驱动 AI 生成动态 UI 界面，但输出被严格约束在开发者预设的组件目录内。AI 不写代码，只生成符合 Schema 的 JSON，前端用已有组件渲染。这种「 Guardrail + JSON 输出」模式解决了传统 AI 生成 UI 不可控、输出随机的核心痛点，让 AI 生成界面真正可投入生产。9 月 10 日登 GitHub Trending，当日 +585 星，截至 2026-09-21 约 17K 星，暴涨中。

功能与原则

json-render 的核心设计原则是「框架管组件，AI 只管 JSON」：

  • Catalog（组件目录）：开发者预定义可用组件、props 类型、触发的 action；AI 只在目录内选组件，不能越界
  • 流式渲染：模型每输出一个 token，界面就实时增量渲染，用户感知「还没打完字，界面就出来了」
  • Schema 校验：输出 JSON 严格匹配 Zod Schema，每次都 Predictable，不会乱飞
  • 跨平台同构：同一套 Catalog + JSON，跨 React / Vue / Svelte / Solid / React Native 渲染
  • 内置 DevTools：浮动调试面板 + 事件流录制，线上自动降级不渲染（NODE_ENV=production）

认可度

  • GitHub Star：约 17K（截至 2026-09-21）
  • GitHub Trending：2026-09-10 登日榜，+585 星/天
  • skills.sh 安装量：多个 skill 累计数万安装（devtools skill 4.1K 安装，next skill 785 安装）
  • 媒体报道：2026 年 8 月被掘金评为「2026 前端最火 5 个开源项目」之一；Vercel CEO Guillermo Rauch 公开称其为「颠覆性技术」
  • npm 周下载：核心包 @json-render/core 周下载量持续攀升

链接

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

原作者

Vercel Labs（vercel-labs）
Vercel 官方实验性项目团队，专注 AI 与前端交叉地带的原型探索。json-render 是其 Labs 品牌下推进最快的项目之一，Apache-2.0 开源，多名 Vercel 工程师持续维护。

介绍

传统 LLM 输出 UI 的方式有两种缺陷：要么让 AI 直接生成 React 代码——结果 UI 结构随机、样式不可控；要么用模板填空——灵活度又太低。json-render 给出了第三条路：不让 AI 生成代码，而是让它生成描述界面的结构化 JSON，渲染完全由开发者提供的组件接管。

使用流程极简：第一步用 Zod 定义 Catalog（允许哪些组件、props 什么类型）；第二步把 Catalog 扔给 AI；第三步 AI 输出 JSON，前端用 <Renderer /> 组件消费。整个链路里 AI 永远不会生成 <div> 或 className，只在安全边界内操作数据。

项目生态极为丰富：内置 36 个预置 shadcn/ui 组件开箱即用；支持 Next.js 全栈（路由/SSR/路由元数据）；Remotion 视频渲染；React Email 邮件生成；React PDF 文档；React Three Fiber 3D 场景（Gaussian Splatting）；Ink 终端 UI；甚至 MCP 协议集成让 Claude/ChatGPT/Cursor/VS Code 直接消费同一套 JSON。

特点

  • Guardrailed 生成：AI 只能在 Catalog 范围内选组件，输出天然安全，不会渲染未定义内容
  • 流式增量渲染：SSE/WebSocket 模式下 token 级别流式输出，界面先于文字呈现
  • 跨端同构：一份 Schema，走遍 React/Vue/Svelte/Solid/Web/Mobile/Terminal/3D
  • 36 个预置 shadcn/ui 组件：开箱即用，支持 Radix UI + Tailwind CSS 设计体系
  • DevTools 调试面板：可视化 inspector + 事件录制，生产级可观测性，线上自动关闭不污染
  • MCP 集成：通过 @json-render/mcp 与 Claude/ChatGPT/Cursor 直接对接
  • 状态管理适配器：官方支持 Redux/Zustand/Jotai/XState，适配主流状态管理方案
  • Codegen 工具：内置工具把 JSON + Catalog 编译为标准 React/Vue 源码，可下载部署

使用方法

安装

# React 基础
npm install @json-render/core @json-render/react

# 含 shadcn/ui 组件（推荐）
npm install @json-render/core @json-render/react @json-render/shadcn

# Next.js 全栈
npm install @json-render/core @json-render/react @json-render/next

# MCP（让 Claude/Cursor 直接用）
npm install @json-render/mcp

定义 Catalog

import { defineCatalog } from "@json-render/core";
import { z } from "zod";

const catalog = defineCatalog(schema, {
  components: {
    Card: {
      props: z.object({ title: z.string() }),
      description: "卡片容器",
    },
    Metric: {
      props: z.object({
        label: z.string(),
        value: z.string(),
        format: z.enum(["currency", "percent", "number"]).nullable(),
      }),
      description: "指标展示",
    },
    Button: {
      props: z.object({ label: z.string(), action: z.string() }),
      description: "按钮",
    },
  },
  actions: {
    export_report: { description: "导出报表为 PDF" },
    refresh_data: { description: "刷新所有指标" },
  },
});

渲染组件

import { defineRegistry, Renderer } from "@json-render/react";

const { registry } = defineRegistry(catalog, {
  components: {
    Card: ({ props, children }) => (
      <div className="card"><h3>{props.title}</h3>{children}</div>
    ),
    Metric: ({ props }) => (
      <div className="metric">
        <span>{props.label}</span>
        <span>{format(props.value, props.format)}</span>
      </div>
    ),
    Button: ({ props, emit }) => (
      <button onClick={() => emit("press")}>{props.label}</button>
    ),
  },
});

function Dashboard({ spec }) {
  return <Renderer spec={spec} registry={registry} />;
}

AI 端 prompt 示例（发给 Claude/GPT）

生成一个仪表盘，包含标题为「销售概览」的卡片，内有一个货币格式的指标「总收入 $128,400」和一个「导出报表」按钮。

使用场景与人群

适用场景

  • AI 应用需要生成可交互界面（不是纯文字/Markdown）
  • 需要给 AI 输出加安全 Guardrail 的 B2B SaaS 产品
  • 多端 App（Web + Mobile）共用一套 AI UI 生成逻辑
  • AI 数据分析/BI 工具，需要动态渲染图表+指标卡片
  • 客服/对话式产品，需要 AI 动态生成表单、列表、按钮

目标用户

  • 前端开发者：想把 AI 能力集成进已有组件库
  • 全栈工程师：快速搭建 AI-native 产品界面
  • AI 应用团队：需要可靠、可预测的 AI UI 输出
  • 低代码平台：把 AI 生成接入可视化搭建体系

输入与输出案例

案例 1：仪表盘生成

Input（用户 prompt）：

生成一个销售仪表盘，包含标题为「Q3 业绩」的主卡片，内有「总收入」「环比增长」「订单数」三个指标，指标下方有一个「刷新数据」按钮。

Output（AI 生成的 JSON spec）：

{
  "root": "card-1",
  "elements": {
    "card-1": { "type": "Card", "props": { "title": "Q3 业绩" }, "children": ["metric-1", "metric-2", "metric-3", "button-1"] },
    "metric-1": { "type": "Metric", "props": { "label": "总收入", "value": "2,847,300", "format": "currency" }, "children": [] },
    "metric-2": { "type": "Metric", "props": { "label": "环比增长", "value": "+18.3%", "format": "percent" }, "children": [] },
    "metric-3": { "type": "Metric", "props": { "label": "订单数", "value": "14,286", "format": "number" }, "children": [] },
    "button-1": { "type": "Button", "props": { "label": "刷新数据", "action": "refresh_data" }, "children": [] }
  }
}

渲染结果：由前端 Card/Metric/Button 组件接管，最终用户看到的是一个结构规范、可交互的销售仪表盘卡片，而非随机生成的代码。

案例 2：MCP 集成（让 Claude 直接调用）

安装 MCP server 后，Claude Code 可以直接调用 @json-render/mcp，用户说「生成一个待办列表，包含三个待办项」，Claude 输出 JSON spec，json-render 实时渲染出可交互的 Todo 卡片，点击可完成/删除。

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 2429 阅读