Vercel 开源了这套实现，让 Claude Code 等代理在沙箱里改代码时直接给你展示步骤、Diff 和测试结果，不用只看 Markdown 了。
Vercel Labs 推出基于 AI SDK 7 实验性 HarnessAgent 的 Generative UI 方案，支持在 Vercel Sandbox 中替换 Claude Code、Codex 或 Pi 等编码代理。代理在隔离 Linux 环境下执行真实 bash、编辑、测试，输出受 Zod schema 约束的 JSONL spec，前端通过 json-render 管道实时渲染为 Steps、FileChange、Terminal、TestResults 等组件。系统实现三层解耦：Harness 抽象层可互换代理，UI 层与执行层独立，Catalog 限制组件边界以保障安全。每个会话绑定 live sandbox，10 分钟空闲后销毁，首条消息冷启动较慢但后续复用工作区。
Generative UI × Agent Harness Coding Agent（Claude Code / Codex / Pi）在 Vercel Sandbox 里真实改代码、跑命令、测用例...
Generative UI × Agent Harness Coding Agent（Claude Code / Codex / Pi）在 Vercel Sandbox 里真实改代码、跑命令、测用例；汇报时不再只返回 Markdown，它基于「json-render」输出受约束的 JSON UI 规格，前端实时渲染成步骤、Diff、终端、测试结果、图表等组件。 github.com/vercel-labs/js… 这个实现思路，和 Claude Code 核心开发者 @trq212 「Using Claude Code: The Unreasonable Effectiveness of HTML」异曲同工： x.com/trq212/status/… 技术架构（三层解耦） 用户 Prompt ↓ HarnessAgent（AI SDK 7 实验 API） ├─ Claude Code / Codex / Pi（可互换） └─ Vercel Sandbox（隔离 Linux 环境，真实 bash/edit/test） ↓ Agent 输出：短 prose + ```spec 围栏内的 JSONL ↓ pipeJsonRender（从流中提取 spec → data-spec parts） ↓ 前端 useChat + useJsonRenderMessage → 渲染组件树 关键设计点： 1. Harness 抽象与模型抽象对称 AI SDK 7 的 HarnessAgent 让你像换模型一样换 Harness——claudeCode 换成 codex 或 pi，调用方式不变。Harness 管 skills、sandbox、session、权限、compaction 等「模型之上的层」。 2. UI 层与执行层完全解耦 HarnessAgent. stream() 返回标准 AI SDK StreamTextResult，因此 json-render 管道与单模型 chat 示例 完全相同。换 Agent Harness，前端代码不用改。 3. Catalog 约束 = 安全 + 可预测 Agent 只能使用预定义组件（Steps、FileChange、Terminal、TestResults、Metric、BarChart…），输出必须符合 Zod schema。AI 生成 UI，但 在你划定的组件边界内。 4. Session 绑定 Sandbox 每个 chat 维护一个 live session + sandbox；首条消息冷启动较慢，后续复用同一工作区。10 分钟 idle 或「Start Over」会销毁 sandbox。 一次完整交互里发生了什么 1. 用户选 Agent（Claude Code / Codex / Pi）并发送任务 2. 服务端 getSession(chatId, agent) 创建或复用 Harness session 3. Agent 在 sandbox 内执行真实操作（写文件、跑测试、benchmark 等） 4. 回合结束时 Agent 输出： · 一两句 conversational 总结 · 一个 ```spec 围栏包裹的 JSONL UI 报告 5. pipeJsonRender 把 spec 从文本流中拆出，变成 typed data-spec parts 6. 前端同时渲染：Markdown prose、工具调用活动行（bash/edit/read…）、结构化报告组件 Agent 的 system instructions 明确要求：不得虚构结果——失败就展示 error step、非零 exit code、失败测试；Terminal 必须用 session 中真实捕获的输出。 Chris Tate @ctatedev Introducing Generative UI for Claude Code, Codex and Pi Charts, forms, 3D, anything Your agent renders real UI for users while it works in a sandbox Powered by AI SDK's experimental HarnessAgent + json-render Your browser does not support the video tag. 🔗 View on Twitter 🔗 View Quoted Tweet 💬 1 🔄 0 ❤️ 1 👀 375 📊 1 ⚡