Generative UI × Agent Harness：Vercel 开源三层解耦架构

Generative UI × Agent Harness

Coding Agent（Claude Code / Codex / Pi）在 Vercel Sandbox 里真实改代码、跑命令、测用例；汇报时不再只返回 Markdown，它基于「json-render」输出受约束的 JSON UI 规格，前端实时渲染成步骤、Diff、终端、测试结果、图表等组件。 https://github.com/vercel-labs/json-render/tree/main/examples/harness-chat

这个实现思路，和 Claude Code 核心开发者 @trq212 「Using Claude Code: The Unreasonable Effectiveness of HTML」异曲同工： https://x.com/trq212/status/2052809885763747935

技术架构（三层解耦） 用户 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 中真实捕获的输出。