Cua Playground 实战指南在浏览器中免代码测试与调试 computer-use 智能体【免费下载链接】cuaScale computer-use 2.0 with open-source drivers, cross-OS fleets, and benchmarks for training, evaluation, and data generation.项目地址: https://gitcode.com/GitHub_Trending/cua/cuaCua Playground 是 Cua 项目提供的浏览器端交互环境让你无需编写代码即可向运行中的沙箱发送消息、实时观察智能体执行计算机操作并即时迭代提示词。本文以 官方预览博客 为核心结合仓库中 trycua/playground 源码 的适配器架构、请求链路与消息渲染实现带你从上手操作一路深入到源码级原理掌握 Prompt 测试、模型对比与智能体行为调试的完整方法论。为什么需要 Playgroundcomputer-use 智能体调试的固有痛点构建 computer-use 智能体本质上是一个写代码 → 部署到沙箱 → 测试行为 → 调试问题的循环而每一轮测试都要求你在代码编辑器、终端和 VNC 查看器之间来回切换。想换一种 prompt 试试改代码、重新部署、再等智能体重启一个循环下来往往以分钟计。正如预览博客开头所描述的Every test requires switching between your code editor, terminal, and VNC viewer. Want to try a different prompt? Edit your code, redeploy, and wait for the agent to restart. It works, but its slow.这种低效的迭代方式正是 Playground 诞生的动机把实验和生产分离。Playground 面向快速测试与实验而生产部署、定时任务、复杂工作流仍交给 Agent SDKPython / TypeScript。两者共享同一批沙箱资源却服务于不同的开发阶段。Cua Playground 核心能力一览Playground 是一个纯浏览器环境其本次发布带来四项关键能力能力说明即时测试直接从浏览器向任意运行中的沙箱发送消息无需写代码实时执行实时查看智能体工作过程包含实时工具调用更新与截图多模型支持支持在 Claude Sonnet 4.5、Haiku 4.5 等模型间切换对比持久化聊天历史会话自动保存云端模式存入 CUA API本地模式存入 localStorage关键设计是Playground 连接的正是你已有的 Cua 沙箱——与 Agent SDK 使用的那批沙箱完全一致。选中一个运行中的沙箱和一个模型然后开始聊天即可。智能体使用 computer-use 工具鼠标、键盘、bash、编辑器完成任务而你能看到它执行的每一个动作。快速上手5 步完成首次智能体对话按以下步骤即可开始以 cua.ai 云端服务为例前往 cua.ai/signin 注册并从 Dashboard 获取你的 API Key进入Dashboard Playground从下拉框选择一个沙箱必须是running状态选择一个模型官方建议先用 Claude Sonnet 4.5 起步发送一条消息例如Take a screenshot and describe what you see截图并描述你看到的内容然后实时观看智能体执行计算机操作。关于第 3 步有一个常见误区沙箱必须处于running状态才会出现在下拉框中。如果未显示请到 Dashboard Sandboxes 检查状态若是 stopped点击 Start 并等待约 30 秒使其就绪。源码级解析一三层适配器架构从源码看Playground 被设计为一个可复用 UI 包trycua/playground见 package.json其核心是适配器Adapter架构——定义需要什么而不关心如何实现。见 adapters/types.tsexport interface PlaygroundAdapters { persistence: PersistenceAdapter; // 会话存储 computer: ComputerAdapter; // 可用计算机/沙箱列表 inference: InferenceAdapter; // 推理配置与模型列表 }三个适配器的职责与两种内置实现如下PersistenceAdapter持久化负责加载/保存会话chat与消息。云端实现走 CUA API/v1/playground/chats、/v1/playground/settings/{key}本地实现使用 localStoragekey 为playground-chats、playground-custom-computers、playground-settings见 cloud.ts 与 local.tsComputerAdapter计算机负责列出可用沙箱并返回规范化的ComputerInfo含id、name、vncUrl、agentUrl、status。云端实现调用/v1/vms接口并将 VM 状态归一化running/stopped/starting/error这也从源码层面印证了 FAQ 中沙箱必须为 running 状态的规则本地实现则允许用户自行提供 computer server URL 或添加自定义计算机InferenceAdapter推理负责根据所选计算机返回推理配置baseUrl、model、apiKey、env。云端由 CUA 服务端托管 API Key本地模式则把用户提供的ANTHROPIC_API_KEY/OPENAI_API_KEY注入环境变量。模型列表也由推理适配器提供云端通过/v1/models接口动态获取失败时回退到内置默认列表如 Claude Sonnet 4、Claude 3.5 Sonnet本地模式则按已配置的 provider key 返回对应模型Anthropic 系与 OpenAI 系含 GPT-4o / GPT-4o Mini。如果你想在本地把 Playground 跑起来可以直接复用工厂函数createLocalAdapterimport { Playground, createLocalAdapter } from trycua/playground; const adapters createLocalAdapter({ computerServerUrl: http://localhost:8443, // computer server 地址 providerApiKeys: { anthropic: sk-... }, }); function App() { return Playground adapters{adapters} /; }云端模式则使用createCloudAdapter({ apiKey, baseUrl })baseUrl默认指向https://api.cua.ai。源码级解析二从发送消息到智能体执行当你点击发送按钮后真正驱动智能体的是 useAgentRequest.ts 中的AgentClient。它直接向沙箱内的computer server发起 HTTP 请求核心调用链如下确定 computer server 地址优先取ComputerInfo.agentUrl其次取自定义计算机的url最后回退为从 VNC 地址主机名 端口 8443重建兼容旧版云 VM构建环境变量推理适配器返回的baseUrl会写入CUA_BASE_URLAPI Key 写入CUA_API_KEY随请求传给沙箱内的 agent发送/responses请求请求体包含model、input消息历史、agent_kwargs与env。其中模型 ID 若不以cua/开头会自动补前缀兼容旧版agent_kwargs默认携带use_prompt_caching: false与only_n_most_recent_images: 3只回传最近 3 张截图控制 token 开销可靠性机制默认单次请求超时 120 秒、最多重试 3 次每次重试通过onRetry回调在 UI 上展示重试进度用户点击停止或超时时通过AbortController中止请求并区分manual手动停止与timeout超时两种中止原因多轮 agent 循环如果响应output的最后一条不是message类型说明 agent 仍在工具调用循环中sendAgentRequest会递归携带累积消息继续请求直到出现最终的message消息为止并统计iterationCount与durationMs上报遥测。整体组件布局见 Playground.tsx左侧是会话列表ChatList中间是聊天面板ChatPanel右侧是VNC 实时画面VNCViewer——你可以在聊天中看到工具调用与截图同时通过 VNC 面板直接目睹屏幕上发生的一切。实时执行可视化工具调用如何被渲染Playground 的实时性体验来自对消息流的精细渲染。agent 产生的不只是文本还有reasoning推理、computer_call计算机动作、function_call函数调用、computer_call_output含截图等结构化消息。messageProcessing.ts 中的processMessagesForRendering负责把扁平的原始消息流转换为适合渲染的分组结构连续的computer_call与其匹配的computer_call_output通过call_id关联会被成对分组输出附带执行后的截图function_call与其function_call_output同样按call_id配对分组后的工具调用组会挂载到前一条 assistant 消息上若前一条是用户消息则插入占位 assistant 消息从而在 UI 中呈现出智能体思考 → 动作 → 结果截图的连贯轨迹。这就是你在调试时能看到每一次鼠标移动的底层原因——每次点击、输入、按键、滚动都以computer_call消息的形式实时流入聊天面板并配以执行后的屏幕截图。典型使用场景1. Prompt 测试用具体指令替代模糊指令同一任务下模糊与具体的 prompt 效果天差地别。博客给出的示例❌ Check the website ✅ Navigate to example.com in Firefox and take a screenshot of the homepage具体、含明确工具路径的指令能让 agent 一次性执行到位减少来回试探。Playground 让你不必重启沙箱即可反复打磨这类指令。2. 模型对比对同一任务切换不同模型运行直接对比质量、速度与成本。由于 Playground 支持多模型你可以在完全相同的沙箱状态下做 A/B 测试排除环境变量的干扰。3. 调试智能体行为当 agent 行为异常时可按如下四步定位发送一条明确的指令例如Find the login button and click it查看工具调用流观察每一次鼠标移动检查截图确认 agent 是否找到了正确的元素根据观察到的结果调整 prompt重新发送。配合内置的轨迹工具见 trajectory.ts每一次用户消息会开启一轮独立的 runinferRuns按role user切分并统计每轮的screenshotCount截图数与actionCount动作数。这些轨迹既可导出用于复盘也可作为后续训练、评估 computer-use 模型的数据素材。4. 预设示例提示词Playground 还内置了一批可直接使用的复杂示例 prompt见 ExamplePrompts.tsx例如Job Application指导 agent 打开 Firefox、下载简历 PDF、访问招聘表单、填写并提交申请Browse YC Companies浏览 YC 公司列表、逐家抓取信息、最后用文本编辑器整理成 CSV 保存到桌面Install Claude Code检查 Node.js、下载安装器、全局安装并验证版本。这些示例展示了截图评估当前状态 → 打开浏览器 → 多步操作 → 校验结果的完整 agent 工作流是理解如何撰写高质量 computer-use 指令的极佳模板。常见问题FAQQ需要会编程吗不需要。Playground 的设计目标就是不写代码地测试 agent 行为。但请注意生产部署仍需使用 Agent SDKPython / TypeScript。QPlayground 会取代 Agent SDK 吗不会。Playground 面向快速测试与实验生产部署、定时任务、复杂工作流应使用 Agent SDK。Q费用如何计算Playground 请求与 Agent SDK 请求共用同一套积分系统按模型推理费用因模型而异 沙箱运行时长按小时计费运行时才计费收费。Q为什么我的沙箱不显示沙箱必须处于running状态才会出现在下拉框中。请到 Dashboard Sandboxes 确认状态若是 stopped点击 Start 并等待约 30 秒。小结Cua Playground 把 computer-use 智能体的调试循环从编辑器 终端 VNC 多窗口切换压缩为浏览器内的单一会话既保留了与 Agent SDK 完全一致的沙箱与执行链路三层适配器 /responses请求循环又通过实时的工具调用分组与截图渲染让每一次动作都透明可见。无论是打磨 prompt、横向对比模型还是逐步定位 agent 的异常行为它都是进入 computer-use 2.0 开发流程的低门槛起点而当你需要把这些经验固化为生产级能力时仓库中的 Agent SDKPython 与 TypeScript SDK 会承接你的下一站。【免费下载链接】cuaScale computer-use 2.0 with open-source drivers, cross-OS fleets, and benchmarks for training, evaluation, and data generation.项目地址: https://gitcode.com/GitHub_Trending/cua/cua创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Cua Playground 实战指南：在浏览器中免代码测试与调试 computer-use 智能体
Cua Playground 实战指南在浏览器中免代码测试与调试 computer-use 智能体【免费下载链接】cuaScale computer-use 2.0 with open-source drivers, cross-OS fleets, and benchmarks for training, evaluation, and data generation.项目地址: https://gitcode.com/GitHub_Trending/cua/cuaCua Playground 是 Cua 项目提供的浏览器端交互环境让你无需编写代码即可向运行中的沙箱发送消息、实时观察智能体执行计算机操作并即时迭代提示词。本文以 官方预览博客 为核心结合仓库中 trycua/playground 源码 的适配器架构、请求链路与消息渲染实现带你从上手操作一路深入到源码级原理掌握 Prompt 测试、模型对比与智能体行为调试的完整方法论。为什么需要 Playgroundcomputer-use 智能体调试的固有痛点构建 computer-use 智能体本质上是一个写代码 → 部署到沙箱 → 测试行为 → 调试问题的循环而每一轮测试都要求你在代码编辑器、终端和 VNC 查看器之间来回切换。想换一种 prompt 试试改代码、重新部署、再等智能体重启一个循环下来往往以分钟计。正如预览博客开头所描述的Every test requires switching between your code editor, terminal, and VNC viewer. Want to try a different prompt? Edit your code, redeploy, and wait for the agent to restart. It works, but its slow.这种低效的迭代方式正是 Playground 诞生的动机把实验和生产分离。Playground 面向快速测试与实验而生产部署、定时任务、复杂工作流仍交给 Agent SDKPython / TypeScript。两者共享同一批沙箱资源却服务于不同的开发阶段。Cua Playground 核心能力一览Playground 是一个纯浏览器环境其本次发布带来四项关键能力能力说明即时测试直接从浏览器向任意运行中的沙箱发送消息无需写代码实时执行实时查看智能体工作过程包含实时工具调用更新与截图多模型支持支持在 Claude Sonnet 4.5、Haiku 4.5 等模型间切换对比持久化聊天历史会话自动保存云端模式存入 CUA API本地模式存入 localStorage关键设计是Playground 连接的正是你已有的 Cua 沙箱——与 Agent SDK 使用的那批沙箱完全一致。选中一个运行中的沙箱和一个模型然后开始聊天即可。智能体使用 computer-use 工具鼠标、键盘、bash、编辑器完成任务而你能看到它执行的每一个动作。快速上手5 步完成首次智能体对话按以下步骤即可开始以 cua.ai 云端服务为例前往 cua.ai/signin 注册并从 Dashboard 获取你的 API Key进入Dashboard Playground从下拉框选择一个沙箱必须是running状态选择一个模型官方建议先用 Claude Sonnet 4.5 起步发送一条消息例如Take a screenshot and describe what you see截图并描述你看到的内容然后实时观看智能体执行计算机操作。关于第 3 步有一个常见误区沙箱必须处于running状态才会出现在下拉框中。如果未显示请到 Dashboard Sandboxes 检查状态若是 stopped点击 Start 并等待约 30 秒使其就绪。源码级解析一三层适配器架构从源码看Playground 被设计为一个可复用 UI 包trycua/playground见 package.json其核心是适配器Adapter架构——定义需要什么而不关心如何实现。见 adapters/types.tsexport interface PlaygroundAdapters { persistence: PersistenceAdapter; // 会话存储 computer: ComputerAdapter; // 可用计算机/沙箱列表 inference: InferenceAdapter; // 推理配置与模型列表 }三个适配器的职责与两种内置实现如下PersistenceAdapter持久化负责加载/保存会话chat与消息。云端实现走 CUA API/v1/playground/chats、/v1/playground/settings/{key}本地实现使用 localStoragekey 为playground-chats、playground-custom-computers、playground-settings见 cloud.ts 与 local.tsComputerAdapter计算机负责列出可用沙箱并返回规范化的ComputerInfo含id、name、vncUrl、agentUrl、status。云端实现调用/v1/vms接口并将 VM 状态归一化running/stopped/starting/error这也从源码层面印证了 FAQ 中沙箱必须为 running 状态的规则本地实现则允许用户自行提供 computer server URL 或添加自定义计算机InferenceAdapter推理负责根据所选计算机返回推理配置baseUrl、model、apiKey、env。云端由 CUA 服务端托管 API Key本地模式则把用户提供的ANTHROPIC_API_KEY/OPENAI_API_KEY注入环境变量。模型列表也由推理适配器提供云端通过/v1/models接口动态获取失败时回退到内置默认列表如 Claude Sonnet 4、Claude 3.5 Sonnet本地模式则按已配置的 provider key 返回对应模型Anthropic 系与 OpenAI 系含 GPT-4o / GPT-4o Mini。如果你想在本地把 Playground 跑起来可以直接复用工厂函数createLocalAdapterimport { Playground, createLocalAdapter } from trycua/playground; const adapters createLocalAdapter({ computerServerUrl: http://localhost:8443, // computer server 地址 providerApiKeys: { anthropic: sk-... }, }); function App() { return Playground adapters{adapters} /; }云端模式则使用createCloudAdapter({ apiKey, baseUrl })baseUrl默认指向https://api.cua.ai。源码级解析二从发送消息到智能体执行当你点击发送按钮后真正驱动智能体的是 useAgentRequest.ts 中的AgentClient。它直接向沙箱内的computer server发起 HTTP 请求核心调用链如下确定 computer server 地址优先取ComputerInfo.agentUrl其次取自定义计算机的url最后回退为从 VNC 地址主机名 端口 8443重建兼容旧版云 VM构建环境变量推理适配器返回的baseUrl会写入CUA_BASE_URLAPI Key 写入CUA_API_KEY随请求传给沙箱内的 agent发送/responses请求请求体包含model、input消息历史、agent_kwargs与env。其中模型 ID 若不以cua/开头会自动补前缀兼容旧版agent_kwargs默认携带use_prompt_caching: false与only_n_most_recent_images: 3只回传最近 3 张截图控制 token 开销可靠性机制默认单次请求超时 120 秒、最多重试 3 次每次重试通过onRetry回调在 UI 上展示重试进度用户点击停止或超时时通过AbortController中止请求并区分manual手动停止与timeout超时两种中止原因多轮 agent 循环如果响应output的最后一条不是message类型说明 agent 仍在工具调用循环中sendAgentRequest会递归携带累积消息继续请求直到出现最终的message消息为止并统计iterationCount与durationMs上报遥测。整体组件布局见 Playground.tsx左侧是会话列表ChatList中间是聊天面板ChatPanel右侧是VNC 实时画面VNCViewer——你可以在聊天中看到工具调用与截图同时通过 VNC 面板直接目睹屏幕上发生的一切。实时执行可视化工具调用如何被渲染Playground 的实时性体验来自对消息流的精细渲染。agent 产生的不只是文本还有reasoning推理、computer_call计算机动作、function_call函数调用、computer_call_output含截图等结构化消息。messageProcessing.ts 中的processMessagesForRendering负责把扁平的原始消息流转换为适合渲染的分组结构连续的computer_call与其匹配的computer_call_output通过call_id关联会被成对分组输出附带执行后的截图function_call与其function_call_output同样按call_id配对分组后的工具调用组会挂载到前一条 assistant 消息上若前一条是用户消息则插入占位 assistant 消息从而在 UI 中呈现出智能体思考 → 动作 → 结果截图的连贯轨迹。这就是你在调试时能看到每一次鼠标移动的底层原因——每次点击、输入、按键、滚动都以computer_call消息的形式实时流入聊天面板并配以执行后的屏幕截图。典型使用场景1. Prompt 测试用具体指令替代模糊指令同一任务下模糊与具体的 prompt 效果天差地别。博客给出的示例❌ Check the website ✅ Navigate to example.com in Firefox and take a screenshot of the homepage具体、含明确工具路径的指令能让 agent 一次性执行到位减少来回试探。Playground 让你不必重启沙箱即可反复打磨这类指令。2. 模型对比对同一任务切换不同模型运行直接对比质量、速度与成本。由于 Playground 支持多模型你可以在完全相同的沙箱状态下做 A/B 测试排除环境变量的干扰。3. 调试智能体行为当 agent 行为异常时可按如下四步定位发送一条明确的指令例如Find the login button and click it查看工具调用流观察每一次鼠标移动检查截图确认 agent 是否找到了正确的元素根据观察到的结果调整 prompt重新发送。配合内置的轨迹工具见 trajectory.ts每一次用户消息会开启一轮独立的 runinferRuns按role user切分并统计每轮的screenshotCount截图数与actionCount动作数。这些轨迹既可导出用于复盘也可作为后续训练、评估 computer-use 模型的数据素材。4. 预设示例提示词Playground 还内置了一批可直接使用的复杂示例 prompt见 ExamplePrompts.tsx例如Job Application指导 agent 打开 Firefox、下载简历 PDF、访问招聘表单、填写并提交申请Browse YC Companies浏览 YC 公司列表、逐家抓取信息、最后用文本编辑器整理成 CSV 保存到桌面Install Claude Code检查 Node.js、下载安装器、全局安装并验证版本。这些示例展示了截图评估当前状态 → 打开浏览器 → 多步操作 → 校验结果的完整 agent 工作流是理解如何撰写高质量 computer-use 指令的极佳模板。常见问题FAQQ需要会编程吗不需要。Playground 的设计目标就是不写代码地测试 agent 行为。但请注意生产部署仍需使用 Agent SDKPython / TypeScript。QPlayground 会取代 Agent SDK 吗不会。Playground 面向快速测试与实验生产部署、定时任务、复杂工作流应使用 Agent SDK。Q费用如何计算Playground 请求与 Agent SDK 请求共用同一套积分系统按模型推理费用因模型而异 沙箱运行时长按小时计费运行时才计费收费。Q为什么我的沙箱不显示沙箱必须处于running状态才会出现在下拉框中。请到 Dashboard Sandboxes 确认状态若是 stopped点击 Start 并等待约 30 秒。小结Cua Playground 把 computer-use 智能体的调试循环从编辑器 终端 VNC 多窗口切换压缩为浏览器内的单一会话既保留了与 Agent SDK 完全一致的沙箱与执行链路三层适配器 /responses请求循环又通过实时的工具调用分组与截图渲染让每一次动作都透明可见。无论是打磨 prompt、横向对比模型还是逐步定位 agent 的异常行为它都是进入 computer-use 2.0 开发流程的低门槛起点而当你需要把这些经验固化为生产级能力时仓库中的 Agent SDKPython 与 TypeScript SDK 会承接你的下一站。【免费下载链接】cuaScale computer-use 2.0 with open-source drivers, cross-OS fleets, and benchmarks for training, evaluation, and data generation.项目地址: https://gitcode.com/GitHub_Trending/cua/cua创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
