# Vercel Labs 推出 HarnessAgent：为 Coding Agent 提供生成式 UI

- 来源：meng shao (@shao__meng)
- 发布时间：2026-06-16 09:14
- AIHOT 分数：66
- AIHOT 链接：https://aihot.virxact.com/items/cmqfyfyst01ubslsprlj2ny8r
- 原文链接：https://x.com/shao__meng/status/2066690742727409944

## AI 摘要

Vercel Labs 利用 AI SDK 7 实验 API 推出 HarnessAgent，结合 json-render 为 Claude Code / Codex / Pi 等 Coding Agent 提供生成式 UI。Agent 在 Vercel Sandbox 隔离 Linux 环境中执行写文件、跑测试等真实操作，输出受 Zod schema 约束的 JSONL UI 规格（仅限 Steps、FileChange、Terminal 等预定义组件），前端通过 useChat + useJsonRenderMessage 实时渲染。核心设计：Harness 抽象允许像换模型一样互换 Agent；UI 层与执行层完全解耦；Session 绑定 Sandbox，10 分钟空闲或“Start Over” 销毁。Agent 不得虚构结果，失败必须展示 error step、非零 exit code 或失败测试。

## 正文

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 中真实捕获的输出。

### 引用推文

> Chris Tate：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 ...