Generative UI Agent Harness

Generative UI × Agent Harness Coding Agent（Claude Code / Codex / Pi）在 Vercel Sandbox 里真实改代码、跑命令、测用例；汇报时不再只返回 Markdown，它基于「json-render」输出受约束的 JSON UI 规格，前端实时渲染成步骤、Diff、终端、测试结果、图表等组件。 https://t.co/gZataZONIB 这个实现思路，和 Claude Code 核心开发者 @trq212 「Using Claude Code: The Unreasonable Effectiveness of HTML」异曲同工： https://t.co/z6Y5HXDcUG 技术架构（三层解耦） 用户 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 https://t.co/9fAWSbNX9k > https://x.com/ctatedev/status/2066555279295008908