json-render 是由 vercel 开源的一项前沿技术，旨在应对 ai 自动生成 ui 过程中常见的不可控性难题。它通过引入 catalog（组件目录） 机制，强制 ai 仅输出符合预设 schema 的 json 结构，并借助前端组件库将该 json 精准渲染为真实 ui。其核心技术涵盖 catalog 规范定义、流式增量渲染、以及从 json 反向生成可维护 react 源码的能力，同时支持实时预览与高效迭代。json-render 广泛适用于数据分析看板、智能表单构建、营销页面配置等场景，正推动前端开发范式从“手写页面”转向“构建组件体系+定义规则”，是 ai 原生开发落地的关键实践之一。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
json-render 的核心能力
- 结构化输出控制：依托 Catalog 明确限定 AI 可调用的组件类型、属性范围及嵌套规则，确保生成的 JSON 严格遵循业务约束，杜绝非法或冗余字段。
- 边生成边渲染（Streaming Render）：在 AI 流式输出 JSON 的过程中即开始解析与渲染，UI 可随数据逐步呈现，显著降低用户等待感知，提升交互流畅度。
- JSON → React 源码双向转换：内置编译器可根据 JSON 内容与 Catalog 描述，自动生成标准化、可读性强的 React 组件代码，便于本地调试、二次开发或上线部署。
- 动态可见性逻辑：支持基于状态、权限、表达式甚至异步结果控制组件显隐，满足复杂业务场景下的条件渲染需求。
- 增强型交互动作：允许为按钮、链接等元素绑定含确认弹窗、加载态、成功/失败回调的复合行为，强化用户操作反馈。
- 声明式表单校验：在 Catalog 中直接定义字段验证规则（如必填、格式、范围），渲染层自动注入校验逻辑，保障输入质量。
如何接入 json-render
-
引入基础包：在项目中安装
@json-render/core（核心引擎）与@json-render/react（React 渲染适配器）。 - 构建 Catalog：编写 TypeScript 或 JSON 格式的 Catalog 文件，清晰描述所有允许使用的组件、props 类型、默认值及约束条件。
- 实现对应组件：按 Catalog 要求开发或复用现有 React 组件，确保每个组件名与 props 接口与 Catalog 定义一致。
- 驱动 AI 生成：将 Catalog 作为提示词上下文输入给大模型，引导其输出合规 JSON；也可集成 LLM API 实现自动化流程。
-
执行渲染：调用
JsonRenderer组件传入生成的 JSON 和注册好的组件映射表，即可完成 UI 渲染。 - 本地体验（可选）：克隆官方 GitHub 仓库，在本地运行 demo 示例，快速掌握工作流与调试技巧。
- 工程化集成：将 json-render 封装为项目内的低代码模块，结合 CI/CD 与权限系统，实现规模化应用。
json-render 的官方资源
json-render 的典型落地场景
- 数据可视化仪表盘：在 Catalog 中预置 ECharts、AntV 图表组件及指标卡片，AI 根据自然语言指令与实时数据源生成 JSON，即时构建个性化 BI 看板。
- 电商活动配置平台：定义 Banner、商品瀑布流、优惠券弹窗等营销组件，运营人员通过对话式界面触发 AI 输出 JSON，秒级发布活动页。
- 智能问卷与动态表单：以 Catalog 描述表单项（单选、多选、文件上传、联动逻辑等），AI 根据调研目标生成结构化 JSON，实现表单零代码搭建。
- 展厅大屏与数字孪生界面：配置地图、3D 模型容器、实时告警面板等高阶组件，AI 结合 IoT 数据流生成 JSON，驱动沉浸式可视化大屏实时更新。
