Vercel 发布生成式 UI 框架 JSON-Render
点击查看原文>
Vercel 开源了 json-render，并将其描述为一个"生成式 UI "框架，允许 AI 模型基于自然语言提示生成结构化的用户界面。该项目遵循 Apache 2.0 许可，并托管在 GitHub 上，自 2026 年 1 月推出以来已获得超过 13000 个星标，做过 200 次发布。目前，该渲染器已支持 React、Vue、Svelte、Solid、React Native 等框架。
json-render 的核心理念是：开发者使用 Zod schema 定义允许的组件和操作目录，然后 LLM 生成受该目录约束的 JSON 规范。当模型流式传输响应时，框架会逐步渲染输出。Vercel 首席执行官 Guillermo Rauch 在接受 The New Stack 采访时表示，这种方法"将 AI 直接嵌入渲染层"，并称之为"一项非常具有颠覆性的技术"。
AI 会生成一棵扁平的 JSON 树，其中包含仅引用目录条目的类型化元素，渲染器（Renderer）组件将其映射到实际的实现。该框架附带了 36 个预构建的 shadcn/ui 组件，供想要快速上手的团队使用，同时还提供一些扩展包用于 PDF 生成、HTML 邮件、通过 Remotion 处理视频、OG 图片渲染以及通过 React Three Fiber 实现 3D 场景。
社区反应褒贬不一。在 Hacker News 上，一位用户评论道：
提供一种 AI 可以访问的结构，将它带入诞生于 90 年代末的各种四代语言（4GL）的领域，使用户创建表单变得容易了许多。
另一位评论者强调，他们用这个工具从文本构建仪表板时“获得了一些成功”，并发现它"比结构化输出 API 和 GPT-4 时代的模型这一组合更强大"。
不过，也有一些人持怀疑态度。一位用户质疑， Vercel 为什么要"重新发明一个新系统"，因为 OpenAPI 和 JSON Schema 等现有标准已经可以描述数据结构。一位回应者反驳了这种观点，概述了两者的区别：
OpenAPI、JsonSchema、GraphQL 都是描述数据的。
而这个描述的是用户界面。最接近的替代方案是直接返回 React JS 代码。
但这增加了一层约束和控制，有助于防止 LLM 生成恶意的 React JS 代码等。
在 Reddit 上，一位开发者观察到，"这种转变确实存在，但你描述的角色变化在某些领域早已开始出现。我们多年来一直在向基于约束的系统发展，设计令牌、组件库、Storybook 配置。这只是将这个边界进一步推向了运行时组合而非构建时编写。"
谷歌推出了一个类似的项目 A2UI（Agent-to-User Interface） 。该项目于 2025 年底悄然发布。Medium 上有一篇对比文章指出，虽然两者共享相同的上层管道（AI → JSON → 组件目录 → UI），但它们解决的问题不同：json-render 被描述为一个与特定应用程序组件集紧密耦合的"工具"，而 A2UI 则将自己定位为一种跨代理的互操作"协议"。
json-render 是一个由 Vercel Labs 维护的开源项目。它使用 TypeScript 编写，采用由 pnpm 托管的 monorepo 结构，可通过 npm 在 @json-render 作用域下获取。文档包含快速入门指南、在线体验场以及所支持的每个渲染器的示例。
声明：本文为 InfoQ 翻译，未经许可禁止转载。
本文来源：InfoQ