Vercel JSON-Render

项目简介

JSON-Render 是 Vercel Labs 推出的生成式 UI 框架，核心主张是让 AI 能够从自然语言提示生成动态、个性化的用户界面，同时不牺牲输出的可靠性和可预测性。框架通过预定义组件和操作来约束 AI 输出，确保生成的 UI 符合预期。

核心功能

• 多框架支持：React、React Native、Vue、Svelte、SolidJS、Next.js 全覆盖
• 全场景覆盖：Web、移动端、视频、PDF 文档、HTML 邮件、终端 UI 均可生成
• Shadcn/ui 集成：提供开箱即用的现代化 UI 组件
• Remotion 视频支持：AI 生成视频内容和小动画
• React Email 集成：生成格式正确的 HTML 邮件
• 类型安全：基于 TypeScript 和 Zod 提供完整的类型推导

技术实现

JSON-Render 的核心设计是让 AI 生成结构化的 JSON 描述而非随机的代码片段。该 JSON 描述了要渲染的组件树及其属性，然后框架将其渲染为对应平台的真实 UI。框架为每个目标平台（React、Vue 等）提供了专门的渲染适配器，确保 AI 输出在所有平台上保持一致。

核心依赖分为主包（@json-render/core）和平台适配包两层。主包提供 AI 接口契约和组件注册机制，适配包负责将 JSON 描述转化为具体平台的 UI 代码。这种分层设计使得框架易于扩展新平台，同时保持核心逻辑的稳定。

快速上手

1. 安装核心包和目标平台的适配包，例如 React 项目：npm install @json-render/core @json-render/react
2. 如果需要 Shadcn/ui 组件：npm install @json-render/shadcn
3. 在 AI 提示中引入框架的组件注册表，告知 AI 可用的组件及其属性
4. 让 AI 生成描述 UI 的 JSON 对象
5. 调用框架的渲染函数将 JSON 转化为真实 UI

适用人群

• 使用 AI 辅助编程的前端开发者
• 需要在应用中嵌入 AI 生成 UI 能力的团队
• 研究生成式 UI 方向的研究者
• 希望用自然语言快速原型化 UI 的设计师和开发者

官方链接

GitHub：https://github.com/vercel-labs/json-render npm：https://www.npmjs.com/package/@json-render/core