json-render-Vercel开源的AI生成UI渲染可控方案
文章来源：智汇AI 发布时间：2026-01-23
json-render是 Vercel 开源的项目，解决 AI 生成 UI 的不可控问题。json-render通过定义一个 Catalog，约束 AI 只能生
暂无访问json-render是什么
json-render是 Vercel 开源的项目，解决 AI 生成 UI 的不可控问题。json-render通过定义一个 Catalog，约束 AI 只能生成符合特定 Schema 的 JSON 数据，用前端组件库将 JSON 渲染为 UI。核心机制包括 Catalog 定义、流式渲染和反向生成源码，支持实时反馈和高效开发。json-render适用数据分析仪表盘、动态表单等多种场景，推动开发者从编写页面代码向构建组件库和规则转变，是 AI 与前端开发结合的重要创新。
json-render的主要功能
约束化生成：通过定义 Catalog，限制 AI 只能使用指定的组件和属性，确保生成的 JSON 结构符合预设规则，避免不可控的输出。流式渲染：支持增量解析和流式渲染，AI 在生成 JSON 的过程中即可实时渲染界面，减少等待时间，提升用户体验。反向生成源码：基于生成的 JSON 和 Catalog，内置编译器可生成标准的 React 源码，方便开发者在本地进一步开发或部署。条件可见性：支持基于数据、权限或复杂逻辑动态显示或隐藏组件，增强 UI 的灵活性。富动作支持：支持定义带有确认对话框和回调的动作，提升交互性。内置验证：支持对输入字段进行验证，确保数据的正确性和完整性。如何使用json-render
安装依赖：在项目中安装 @json-render/core 和 @json-render/react。相关推荐
![FLUX.2 [klein]-Black Forest Labs开源的图像生成模型](/uploadfile/2026/0117/e99e07b6e562d3f0a06e948018e7af6f.png)
