思考未来

2026年9月22日

json-render：让 AI 生成界面，但不把前端控制权交出去

让大模型直接输出 HTML 或组件代码，演示很快，接入真实产品却容易遇到结构失控、样式漂移和危险操作。Vercel Labs 开源的 json-render 换了一个思路：开发者先定义可用组件与动作目录，AI 只生成符合约束的 JSON，再由应用自己的渲染器展示。项目今日进入 G

让大模型直接输出 HTML 或组件代码，演示很快，接入真实产品却容易遇到结构失控、样式漂移和危险操作。Vercel Labs 开源的 json-render 换了一个思路：开发者先定义可用组件与动作目录，AI 只生成符合约束的 JSON，再由应用自己的渲染器展示。项目今日进入 GitHub Trending，适合正在做生成式 UI、智能工作台或动态表单的团队关注。

📌 这个项目是干什么的

json-render 把生成式界面拆成三层：组件目录负责声明允许使用的组件、属性和动作；模型根据目录输出 JSON Spec；渲染器把 Spec 映射到真实组件。AI 决定“如何组合”，但不能凭空调用目录之外的能力。

项目支持流式接收 Spec，模型尚未输出完整结果时即可逐步渲染。官方包覆盖 React、Vue、Svelte、Solid、React Native，还提供 shadcn/ui、Next.js、PDF、邮件、视频和终端界面等适配。代码采用 Apache-2.0 许可证。

🔍 为什么值得关注

第一，约束比提示词更可靠。 组件属性可用 Zod 描述，动作也要预先登记。相比让模型生成任意代码，这种“目录 + 结构化输出”更容易做校验、权限控制和失败回退。

第二，AI 层与界面实现解耦。 同一套业务组件仍由团队维护，模型输出的是声明式结构，不必让生成代码进入构建链。已有设计系统的团队，可以只开放经过审核的组件子集。

第三，适用范围不止网页。 同一思路可扩展到移动端、PDF、邮件和视频，但更值得借鉴的是架构：先缩小 AI 可操作空间，再逐步增加组件与动作，而不是一次性开放整个应用。

🧪 谁适合试，怎么开始

适合开发 AI 仪表盘、动态表单、客服操作台、个性化报告和交互式 Agent 的前端团队。最短路径是新建一个 React 实验项目，安装 @json-render/core 与 @json-render/react，只注册 Card、Metric、Button 三个无风险组件，再用 README 的固定 Spec 验证渲染。第二步才接模型，并保存原始 JSON，测试缺字段、未知组件、流式中断和动作失败时的表现。

如果想快速看完整效果，可克隆仓库后按官方方式运行 Playground；仓库开发环境目前要求 Node.js 24 以上与 pnpm 11 以上。

⚠️ 使用提醒

“只能使用已注册组件”不等于自动安全。按钮背后的删除、付款、发信等动作仍要在服务端鉴权，敏感操作应增加确认与幂等控制。动态属性和状态表达式也需要限制数据来源，避免把不该暴露的信息送进模型上下文。

项目更新较快，最新 GitHub Release 为 v0.21.0，部分能力明确标注为实验性。生产接入应锁定版本，先从只读界面开始，并为生成失败准备静态兜底页。

🔗 参考资源