meng shao(@shao__meng)

Generative UI × Agent Harness Coding Agent（Claude Code / Codex / Pi）在 Vercel Sandbox 里真实改代码、跑命令、测用例...

8.5内容质量
Generative UI × Agent Harness Coding Agent（Claude Code / Codex / Pi）在 Vercel Sandbox 里真实改代码、跑命令、测用例...

TL;DR · AI 摘要

Vercel Sandbox 中的 Coding Agent 可实时修改代码、运行命令并生成结构化 UI 报告，提升开发效率。

核心要点

  • Vercel Sandbox 支持 Claude Code、Codex、Pi 等模型在真实环境中运行代码并生成 UI。
  • Agent 输出 JSONL 格式的 UI 报告，前端通过 json-render 实时渲染成组件。
  • HarnessAgent 抽象层实现模型与执行环境的解耦，提升系统灵活性。

结构提纲

按章节快速跳转。

  1. §引言

    介绍 Vercel Sandbox 中 Coding Agent 的能力，包括代码修改、命令执行和 UI 报告生成。

  2. ·技术架构

    描述基于 AI SDK 7 的三层解耦架构，包括 HarnessAgent、模型和 Vercel Sandbox。

  3. ›关键设计点

    说明 Harness 抽象、UI 与执行层解耦、Catalog 约束和 Session 绑定 Sandbox 的设计。

  4. ·交互流程

    描述用户与 Agent 的完整交互过程，包括任务发送、执行、结果输出和 UI 渲染。

  5. ›Agent 的限制

    强调 Agent 不得虚构结果，必须基于真实执行环境输出错误信息和测试结果。

思维导图

用一张图看清主题之间的关系。

查看大纲文本（无障碍 / 无 JS 友好）
  • Generative UI × Agent Harness
    • 技术架构
      • HarnessAgent（AI SDK 7）
      • 模型（Claude Code / Codex / Pi）
      • Vercel Sandbox（隔离环境）
    • 关键设计点
      • Harness 抽象与模型抽象对称
      • UI 层与执行层解耦
      • Catalog 约束（安全 + 可预测）
      • Session 绑定 Sandbox

金句 / Highlights

值得收藏与分享的关键句。

#Vercel#AI#前端#开发工具
打开原文

meng shao on X: "Generative UI × Agent Harness Coding Agent（Claude Code / Codex / Pi）在 Vercel Sandbox 里真实改代码、跑命令、测用例；汇报时不再只返回 Markdown，它基于「json-render」输出受约束的 JSON UI 规格，前端实时渲染成步骤、Diff、终端、测试结果、图表等组件。 https://t.co/Fgt4GYJVYd https://t.co/RGzw4x3II0" / X

meng shao

@shao__meng

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

github.com/vercel-labs/js…

心开发者

@

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

13h

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

00:00

1:14 AM · Jun 16, 2026

1.1K

Views

2

5

Read 2 replies