json-render官网：Vercel开源的AI生成UI可控化解决方案

json-render是Vercel推出的开源工具，核心目标是破解AI生成UI的不可控难题。它通过自定义Catalog组件约束清单，限定AI仅能生成符合预设Schema的JSON数据，再依托前端组件库将标准化JSON高效渲染为可交互UI。其核心机制涵盖Catalog定义、流式渲染、反向生成源码三大能力，支持实时反馈与高效开发流程，推动前端开发模式从编写页面代码，转向构建组件库与规则体系，是AI与前端开发融合的突破性创新。

json-render核心功能：

1、约束化生成：

通过自定义Catalog清单，明确限定AI可调用的组件类型及属性范围，确保生成的JSON结构严格匹配预设规则，从根源上杜绝AI输出不可控的UI结构。

2、流式渲染：

支持JSON数据的增量解析与实时渲染，AI生成数据的过程中即可同步渲染界面，无需等待完整数据输出，大幅缩短加载等待时间，提升开发与使用体验。

3、反向生成源码：

内置编译器可基于生成的JSON数据与Catalog规则，自动生成标准React源码，支持开发者在本地进行二次开发、调试与部署，打通“AI生成-源码落地”的全流程。

4、条件可见性：

支持基于业务数据、用户权限或复杂逻辑表达式，动态控制组件的显示与隐藏，赋予UI更强的灵活性与场景适配能力。

5、富动作支持：

支持为组件定义带确认对话框、回调函数的交互动作，满足提交、删除、跳转等复杂交互需求，提升UI的可操作性。

6、内置验证：

集成表单字段验证能力，支持对输入数据进行格式、范围等多维度校验，保障数据录入的正确性与完整性。

json-render快速使用流程：

1、安装依赖：

在前端项目中安装核心包@json-render/core与React适配包@json-render/react。

2、定义Catalog：

创建Catalog配置清单，明确声明允许AI使用的组件、组件属性及属性约束规则。

3、注册渲染组件：

开发或引入对应的React组件，完成Catalog中组件与实际渲染组件的映射绑定。

4、AI生成JSON：

将定义好的Catalog作为约束条件，引导AI根据用户需求生成符合规则的JSON数据。

5、渲染交互UI：

调用json-render渲染器，将AI生成的JSON数据转化为可直接使用的前端界面。

6、本地开发与集成（可选）：

克隆json-render GitHub仓库，启动本地开发环境熟悉功能；再将配置好的方案集成到实际业务项目，按需调整Catalog与组件。

json-render典型应用场景：

1、数据分析仪表盘：

在Catalog中定义折线图、柱状图、数据卡片等组件，AI基于实时业务数据生成JSON配置，快速渲染出动态更新的数据分析仪表盘。

2、电商营销配置后台：

开发者预设轮播图、产品卡片、优惠券模块等组件，运营人员通过自然语言描述需求，AI生成对应JSON配置，实现营销页面的零代码快速搭建。

3、动态表单与问卷：

依托Catalog定义输入框、下拉选择、单选复选等表单组件，AI根据调研需求生成个性化问卷JSON，一键渲染出可收集、可验证的动态表单。

4、展会与大屏可视化：

配置可视化大屏专用组件（如数字看板、地理信息图层、趋势图），AI对接实时数据源生成JSON，驱动展会、会议大屏的动态内容展示。

进入json-render官网入口