json-render – Vercel开源的AI生成UI渲染可控方案

json-render的主要功能

• 约束化生成：通过定义 Catalog，限制 AI 只能使用指定的组件和属性，确保生成的 JSON 结构符合预设规则，避免不可控的输出。
• 流式渲染：支持增量解析和流式渲染，AI 在生成 JSON 的过程中即可实时渲染界面，减少等待时间，提升用户体验。
• 反向生成源码：基于生成的 JSON 和 Catalog，内置编译器可生成标准的 React 源码，方便开发者在本地进一步开发或部署。
• 条件可见性：支持基于数据、权限或复杂逻辑动态显示或隐藏组件，增强 UI 的灵活性。
• 富动作支持：支持定义带有确认对话框和回调的动作，提升交互性。
• 内置验证：支持对输入字段进行验证，确保数据的正确性和完整性。

如何使用json-render

• 安装依赖：在项目中安装 @json-render/core 和 @json-render/react。
• 定义 Catalog：创建一个 Catalog，明确支持 AI 使用的组件及其属性和约束。
• 注册组件：定义 React 组件，用于渲染 Catalog 中的组件。
• AI 生成 JSON：通过定义好的 Catalog，让 AI 根据用户输入生成符合约束的 JSON 数据。
• 渲染 UI：使用 json-render 的渲染器将生成的 JSON 数据渲染为实际的 UI。
• 本地开发（可选）：克隆 json-render 的 GitHub 仓库，运行本地开发环境熟悉其功能。
• 集成到项目：将 json-render 集成到实际项目中，根据需要调整 Catalog 和组件。

json-render的项目地址

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

json-render的应用场景

• 数据分析仪表盘：通过定义 Catalog 中的图表和卡片组件，AI 根据实时数据生成 JSON 数据，动态渲染出数据分析仪表盘。
• 电商营销配置后台：开发者定义轮播图、产品卡片等组件，AI 根据业务需求生成 JSON 数据，实现电商营销页面的动态配置。
• 动态表单和问卷：用 Catalog 定义表单组件，AI 根据用户需求生成表单的 JSON 数据，实现动态表单和问卷的快速生成。
• 展会和大屏可视化：定义可视化组件，AI 根据实时数据生成 JSON 数据，动态渲染到展会或会议的大屏上。