跳到主要内容

Computer Use Agents

2024-10 Anthropic 发布 Claude Computer Use，2025-10 OpenAI 发布 ChatGPT Atlas，2026-Q1 Google 推出 Gemini Computer Use。AI 从"对话"进入"操作"时代。本篇是这套新形态的工程化指南。

学前说明​

如果说 Coding Agent 让 AI 能"写"，Computer Use Agent 让 AI 能"用"。

Computer Use 的核心能力：

  • 看屏幕（截图 + 视觉理解）
  • 操作鼠标（点击、拖拽、滚动）
  • 敲键盘（输入文字、组合键）
  • 导航网页 / 应用

它不是：

  • 不是 RPA（RPA 是预录脚本，Computer Use 是 LLM 实时决策）
  • 不是 API 调用（它操作 GUI，不调 API）
  • 不是浏览器自动化框架（它用 LLM + 视觉，不靠 selector）

2025 年下半年到 2026 年，这是变化最快的领域。每个厂商方案都在演进。本篇基于已成熟的工程模式。

学习目标​

  • 理解 Computer Use 的工程架构（视觉 + 推理 + 操作循环）
  • 区分三大厂商方案的差异和适用场景
  • 实现简单的 Computer Use Agent
  • 处理 GUI Agent 的特殊难点（弹窗、登录、CAPTCHA）
  • 应用安全边界（这是 Lethal Trifecta 的极端场景）
  • 评估什么场景该用、什么场景别用

与现有知识的衔接​

  • 04 Lethal Trifecta：Computer Use 是高风险 Agent，必须严格隔离
  • 07 Agentic Loop：Computer Use 是典型的 loop 应用
  • 11 Sandbox：Computer Use 必须在沙箱跑
  • 6-8 Voice Agent：另一类"非纯文本" Agent

第一章：Computer Use 的本质​

1.1 工作循环​

每一步都是多模态 LLM 调用：

  1. 截图屏幕（PNG）
  2. 把截图 + 当前目标 + 历史 → 多模态 LLM
  3. LLM 输出动作（"点击 (250, 400)"、"输入 'hello'"）
  4. 执行动作
  5. 重复

1.2 为什么之前做不到​

Computer Use 的关键依赖是视觉模型质量：

  • 2023：GPT-4V 能描述图片但不擅长精确定位
  • 2024 Q3：Claude 3.5 Sonnet 视觉精度大幅提升
  • 2024-10：Anthropic 推出 Computer Use beta
  • 2025-2026：成为主流能力

视觉精度 + 推理能力突破临界点后，"AI 直接用电脑"才工程可行。

1.3 Computer Use vs 其他 Agent​

能力工具型 AgentCoding AgentComputer Use
操作对象API代码文件屏幕像素
输入文本文本 + 文件文本 + 截图
输出工具调用代码鼠标键盘动作
速度快中慢（每步要截图）
成本低中高（视觉 token 贵）
可靠性高中-高中-低
适合标准化任务写代码没 API 的场景

关键洞察：Computer Use 是最后手段。能用 API 就用 API，能写代码就写代码，没办法才用 GUI。

第二章：三大厂商方案对比​

2.1 Claude Computer Use（Anthropic）​

2024-10 首发，2026 年成熟。

架构：

  • LLM：Claude Sonnet/Opus
  • 工具：computer、bash、str_replace_editor（一组预定义工具）
  • 部署：你自己跑 Agent，调用 Anthropic API

优点：

  • 通用（能操作任何 GUI）
  • 可在任何 OS（你提供 VM/容器）
  • 协议开放（你能完整控制）

缺点：

  • 你需要搭基础设施（VM、截图服务、动作执行器）
  • 视觉 token 消耗大（每次截图 ~1500 tokens）
  • 慢（每步 3-10 秒）

典型代码：

const response = await anthropic.beta.messages.create({
  model: 'claude-sonnet-4-5',
  max_tokens: 4096,
  tools: [
    {
      type: 'computer_20250124',
      name: 'computer',
      display_width_px: 1280,
      display_height_px: 800,
    },
    {
      type: 'bash_20250124',
      name: 'bash'
    }
  ],
  messages: [
    {
      role: 'user',
      content: '帮我在 google.com 搜索 "MCP protocol" 并截图'
    }
  ],
  betas: ['computer-use-2025-01-24']
});

// 处理 tool_use 响应
for (const block of response.content) {
  if (block.type === 'tool_use' && block.name === 'computer') {
    const action = block.input as ComputerAction;
    
    if (action.action === 'screenshot') {
      const screenshot = await takeScreenshot();
      // 把截图返回给 LLM 继续
    }
    if (action.action === 'left_click') {
      await clickAt(action.coordinate);
    }
    if (action.action === 'type') {
      await typeText(action.text);
    }
    // ...
  }
}

2.2 ChatGPT Atlas（OpenAI）​

2025-10 推出，集成在 ChatGPT 浏览器中。

架构：

  • 专属浏览器（Chrome 分支）
  • AI 直接在浏览器内操作
  • 用户可见 AI 在做什么

优点：

  • 用户体验最好（看得见）
  • 不用搭基础设施
  • 适合普通用户

缺点：

  • 锁定在 OpenAI 浏览器
  • 工程师无法深度定制
  • 隐私争议大（参考 2025-10 OpenAI CISO 关于 Atlas 注入风险的回应）

典型场景：

  • 帮我订机票
  • 帮我比较 5 个商品价格
  • 帮我填这个表单

2.3 Gemini Computer Use（Google）​

2026-Q1 推出，强调和 Google 生态集成。

架构：

  • Chrome + Gemini 集成
  • 偏向 Google Workspace 自动化
  • 也支持开放协议（类似 Anthropic）

优点：

  • 和 Google Docs/Sheets/Gmail 深度集成
  • 多模态（视觉、表格、邮件）

缺点：

  • 生态偏窄
  • 中文场景较弱（截至 2026-Q2）

2.4 选型决策​

场景推荐
个人用户日常任务ChatGPT Atlas
Google Workspace 重度用户Gemini Computer Use
工程师自建 / 定制Claude Computer Use
需要本地部署（合规）Claude Computer Use + 自部署 LLM
需要嵌入自己产品Claude Computer Use API
浏览器自动化（特定场景）Browser Use（开源框架）

第三章：架构设计​

3.1 经典三层架构​

┌─────────────────────────────────┐
│  LLM (Claude / GPT / Gemini)    │  ← 视觉 + 推理 + 决策
└──────────┬──────────────────────┘
           │ Tool calls
┌──────────▼──────────────────────┐
│  Action Executor                │  ← 执行点击、输入
└──────────┬──────────────────────┘
           │
┌──────────▼──────────────────────┐
│  Sandbox (VM / Container)        │  ← 隔离环境
│   ├─ Browser / Desktop          │
│   └─ Screenshot Service         │
└─────────────────────────────────┘

LLM 层：

  • 接收当前截图 + 任务 + 历史
  • 输出下一步动作（结构化 JSON）

Executor 层：

  • 解析 LLM 输出
  • 调用 OS 级 API（鼠标、键盘）
  • 截图返回给 LLM

Sandbox 层：

  • 完全隔离的环境
  • VM、Docker、远程桌面
  • 失败可丢弃

3.2 工具集设计​

最小必要工具集（参考 Anthropic computer 工具）：

const computerActions = {
  // 鼠标
  mouse_move: { coordinate: [x, y] },
  left_click: { coordinate?: [x, y] },
  right_click: { coordinate?: [x, y] },
  double_click: { coordinate?: [x, y] },
  left_click_drag: { start: [x, y], end: [x, y] },
  scroll: { coordinate: [x, y], direction: 'up' | 'down', amount: number },
  
  // 键盘
  type: { text: string },
  key: { text: string },  // 'Return', 'cmd+a', 'ctrl+c'
  
  // 视觉
  screenshot: {},
  
  // 时间控制
  wait: { duration: number },
  
  // 高级（可选）
  cursor_position: {},  // 拿当前位置
};

每个动作都映射到 OS API：

class ActionExecutor {
  async execute(action: ComputerAction) {
    switch (action.action) {
      case 'left_click':
        await this.os.mouseMove(...action.coordinate);
        await this.os.mouseClick('left');
        break;
      case 'type':
        await this.os.typeText(action.text);
        break;
      case 'screenshot':
        return await this.os.captureScreen();
      // ...
    }
    
    // 关键：每个动作后等一下
    await sleep(500);  // 让 UI 反应
  }
}

3.3 截图与视觉处理​

截图是 Computer Use 最贵的部分：

// 1. 截图
const png = await captureScreen();

// 2. 优化大小（视觉 token 跟分辨率成正比）
const resized = await resize(png, { maxWidth: 1280 });

// 3. 转 base64
const base64 = resized.toString('base64');

// 4. 传给 LLM
const response = await llm.chat({
  messages: [{
    role: 'user',
    content: [
      { type: 'text', text: '当前任务：' + goal },
      { type: 'image', source: { type: 'base64', media_type: 'image/png', data: base64 } },
    ]
  }]
});

关键优化：

  • 限制最大分辨率（1280x800 通常够）
  • 用 PNG 不要 JPEG（细节损失影响识别）
  • 必要时多张图（比如重点区域单独截）

第四章：浏览器 vs 桌面​

4.1 浏览器 Computer Use​

优点：

  • 沙箱化容易（容器里跑 Chrome）
  • 用户场景大（90% 任务在浏览器）
  • 工具成熟（Puppeteer / Playwright）

实战：

import puppeteer from 'puppeteer';

async function browserComputerUse(task: string) {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.setViewport({ width: 1280, height: 800 });
  
  let history = [];
  
  while (true) {
    // 截图
    const screenshot = await page.screenshot({ encoding: 'base64' });
    
    // 调 LLM
    const response = await llm.chat({
      messages: [
        ...history,
        {
          role: 'user',
          content: [
            { type: 'image', data: screenshot },
            { type: 'text', text: task }
          ]
        }
      ],
      tools: computerTools,
    });
    
    history.push(/* ... */);
    
    if (response.stop_reason === 'end_turn') break;
    
    // 执行动作
    for (const block of response.content) {
      if (block.type === 'tool_use') {
        const action = block.input;
        await executeOnPage(page, action);
      }
    }
  }
  
  await browser.close();
}

async function executeOnPage(page: Page, action: any) {
  switch (action.action) {
    case 'left_click':
      await page.mouse.click(action.coordinate[0], action.coordinate[1]);
      break;
    case 'type':
      await page.keyboard.type(action.text);
      break;
    case 'scroll':
      await page.mouse.wheel({ deltaY: action.amount });
      break;
  }
  await page.waitForTimeout(500);
}

4.2 桌面 Computer Use​

更通用但更复杂。

实战（macOS）：

import { spawn } from 'child_process';

class MacOSExecutor {
  async click(x: number, y: number) {
    // 用 cliclick 命令行工具
    spawn('cliclick', [`c:${x},${y}`]);
  }
  
  async type(text: string) {
    spawn('cliclick', [`t:${text}`]);
  }
  
  async screenshot(): Promise<Buffer> {
    return new Promise((resolve, reject) => {
      const proc = spawn('screencapture', ['-x', '/tmp/screen.png']);
      proc.on('close', async () => {
        resolve(await fs.readFile('/tmp/screen.png'));
      });
    });
  }
}

实战（Linux）：

用 xdotool + xwd 或者 pyautogui。

实战（Windows）：

PowerShell 调 SendKeys + Add-Type 调 Windows API。

4.3 远程桌面 Computer Use​

最常用模式：在 VM/容器里跑桌面，AI 通过 VNC/RDP 操作。

// VM 内：跑 GUI（Xvfb + 任意 desktop）
xvfb-run -a -s "-screen 0 1280x800x24" \
  --server-num=99 \
  firefox --window-size=1280,800

// Host：通过 VNC 截图 + 通过 xdotool 操作
import vnc from 'rfb2';

const client = vnc.createConnection({
  host: 'localhost',
  port: 5900,
});

client.on('rect', (rect) => {
  // 收到屏幕变化
});

await client.click(x, y);
await client.type(text);

E2B 提供专门的 Desktop Sandbox，开箱即用。

第五章：实际落地的 7 大难点​

5.1 弹窗与中断​

GUI 经常弹出意外窗口：cookie 同意、订阅提醒、系统通知。

// 防御：每次截图前先扫一眼有没有弹窗
async function dismissPopups(page: Page) {
  const commonPopups = [
    'button:has-text("Accept")',
    'button:has-text("Got it")',
    'button:has-text("X")',
    '[aria-label="Close"]',
  ];
  
  for (const selector of commonPopups) {
    const el = await page.$(selector);
    if (el) {
      await el.click();
      await page.waitForTimeout(500);
    }
  }
}

但更好的方式是让 LLM 自己处理——它能从截图识别弹窗并决定关掉。

5.2 登录与认证​

很多任务需要登录。三种处理：

A. 预登录：

// 启动浏览器前先登录，cookies 保留
async function setupAuthedBrowser() {
  const browser = await puppeteer.launch({
    userDataDir: '/path/to/persistent/profile',  // 持久 profile
  });
  // 第一次手动登录，之后 cookies 在
  return browser;
}

B. AI 完成登录（危险）：

// AI 自己输用户名密码
// ⚠️ 必须严格沙箱 + 不能让 AI 看到真实密码

C. 跳过登录：

// 给 AI 受限版本的环境（用 demo / sandbox 账号）

推荐 A 或 C。AI 直接处理凭证风险高。

5.3 CAPTCHA​

AI 不应该自动绕过 CAPTCHA（违反服务条款且不道德）。

正确处理：

async function detectCaptcha(screenshot: Buffer): Promise<boolean> {
  // 用 LLM 检测截图里有没有 CAPTCHA
  const response = await llm.chat({
    messages: [{
      role: 'user',
      content: [
        { type: 'image', data: screenshot },
        { type: 'text', text: '画面中是否有 CAPTCHA 验证？只回 yes 或 no' }
      ]
    }]
  });
  return response.content[0].text.toLowerCase() === 'yes';
}

// 主循环
if (await detectCaptcha(screenshot)) {
  // 转给人工
  await pauseForHuman('遇到 CAPTCHA，请手动处理');
}

5.4 慢和超时​

每步 3-10 秒，复杂任务几分钟到几小时。处理：

const STEP_TIMEOUT = 60_000;
const TOTAL_TIMEOUT = 30 * 60_000;
const MAX_STEPS = 50;

let steps = 0;
const start = Date.now();

while (steps < MAX_STEPS) {
  if (Date.now() - start > TOTAL_TIMEOUT) {
    throw new Error('total_timeout');
  }
  
  const stepResult = await Promise.race([
    doOneStep(),
    new Promise((_, reject) => setTimeout(() => reject(new Error('step_timeout')), STEP_TIMEOUT))
  ]);
  
  steps++;
  if (stepResult.done) break;
}

5.5 视觉错误​

LLM 视觉不完美：

  • 把"按钮 A"误识别为"按钮 B"
  • 坐标偏几个像素
  • 在密集 UI 里选错元素

缓解策略：

  • 让 LLM 先标注它看到的元素，再选
  • 操作后立即截图，验证是否符合预期
  • 错了让它自己回退（按 Escape、点 Back）
// 自纠错模式
async function clickWithVerify(target: string) {
  const before = await screenshot();
  await llm.click(target);
  const after = await screenshot();
  
  // 让 LLM 判断点对了吗
  const verify = await llm.chat({
    messages: [{
      content: [
        { type: 'image', data: before },
        { type: 'image', data: after },
        { type: 'text', text: `预期：点击 "${target}"。实际是否成功？` }
      ]
    }]
  });
  
  if (!verify.success) {
    // 回退、重试
    await page.goBack();
    return false;
  }
  return true;
}

5.6 状态丢失​

中断后状态难恢复。比如填到表单第 5 步崩溃，从头再来很烦。

对策：定期 checkpoint（包括 cookies、URL、表单填写状态）。

5.7 网络不稳定​

页面加载慢、AJAX 请求失败。AI 不知道"还在 loading"。

对策：

async function waitForStable(page: Page) {
  // 等网络空闲 + 等 DOM 稳定
  await page.waitForLoadState('networkidle');
  await page.waitForTimeout(1000);
  
  // 用 LLM 判断是否 ready（看 spinner）
  const screenshot = await page.screenshot({ encoding: 'base64' });
  const ready = await llm.askYesNo('画面是否加载完成？没有 loading 动画？', screenshot);
  if (!ready) await page.waitForTimeout(3000);
}

第六章：安全边界​

Computer Use 是Lethal Trifecta 的极端场景：

  • 访问私有数据：浏览器里所有 cookies、localStorage、登录状态都是
  • 接触不可信内容：网页内容（攻击者控制）
  • 对外通信：浏览器本身就是

→ 完整 Trifecta，必须严格隔离。

6.1 必须的隔离​

1. 沙箱 VM/容器

不要让 AI 操作你的真实浏览器：

# Docker 跑专用浏览器
docker run --rm \
  --memory=2g \
  --cpus=1 \
  -p 6080:6080 \   # noVNC 端口
  -e RESOLUTION=1280x800 \
  computer-use-sandbox

2. 不共享 cookies

每次会话用 fresh profile：

const browser = await puppeteer.launch({
  userDataDir: `/tmp/profile-${Date.now()}`,
});
// 完成后销毁

3. 网络白名单

# 只允许访问任务相关域名
allowed_domains:
  - airbnb.com
  - google.com
blocked: '*'

4. 不操作真实账户

对高风险任务（购物、银行），用 demo 账号，让 AI 演示，最后人工确认 + 真实账户操作。

6.2 用户审批​

每次重要动作前停下来确认：

const HIGH_RISK_ACTIONS = [
  /click.*purchase/i,
  /click.*pay/i,
  /click.*delete/i,
  /click.*confirm/i,
];

if (HIGH_RISK_ACTIONS.some(p => p.test(action.description))) {
  const approved = await askUser(`即将执行：${action.description}，请确认`);
  if (!approved) return abort();
}

6.3 OpenAI Atlas 的教训​

Dane Stuckey（OpenAI CISO）2025-10 公开承认 Atlas 有 prompt injection 风险——网页里的恶意指令能让 AI 做坏事。OpenAI 的对策：

  • 浏览模式 vs Agent 模式分离
  • Agent 模式有显著的视觉提示
  • 不允许 Agent 模式访问敏感网站（银行）
  • 每个动作日志可见

这套设计原则适用所有 Computer Use 实现。

6.4 数据外泄路径​

Computer Use 的外泄路径特别多：

路径例子
表单提交AI 把你 cookies 填到攻击者表单
URL 参数navigation 到 attacker.com?data=...
上传文件AI 上传你的文件到任意网站
截图分享AI 分享含敏感信息的截图
复制粘贴clipboard 内容外发

防御：每个外发渠道都要监控 + 白名单。

第七章：何时该用 Computer Use​

7.1 适合场景​

真没 API：

  • 老旧 SaaS 没有 API
  • 政府办公网站
  • 内部系统遗产代码

临时/低频需求：

  • 一次性数据迁移
  • 偶尔的批量操作
  • 不值得为它写 API 集成

视觉强相关：

  • UI 测试（看渲染对不对）
  • 设计验收（截图比 DOM 更可信）
  • 截图分析、信息提取

7.2 不适合场景​

场景原因替代
高频任务慢、贵写 API / 浏览器扩展
高准确率要求（金融）视觉错误率不够低API 调用
实时响应每步秒级延迟API
大批量成本爆炸脚本 + API
涉及 CAPTCHA不能合规绕过转人工
监管严格行业审计困难RPA + 严格审批

7.3 决策流程​

新需求 →
  有 API 吗？
    有 → 用 API（永远优先）
    没 →
      能写代码绕过吗？（爬虫、headless 测试框架）
        能 → 用代码
        不能 →
          频率高吗？
            高 → 投资写适配层
            低 → Computer Use（接受慢和贵）

第八章：实战例子​

8.1 例：自动化 QA 测试​

任务：每次 deploy 后跑核心 user flow（登录 → 创建订单 → 结算）。

async function smokeTest(envUrl: string) {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto(envUrl);
  
  const tasks = [
    '登录（用户名 test@test.com，密码看 .env）',
    '点击"新建订单"',
    '添加 3 个商品（任意）',
    '到结算页',
    '验证总价 = 商品价格之和',
    '截图保存到 /tmp/smoke-test.png',
  ];
  
  for (const task of tasks) {
    const result = await computerUseAgent(page, task);
    if (!result.success) {
      throw new Error(`Failed at: ${task}, ${result.reason}`);
    }
  }
}

为什么用 Computer Use：

  • DOM selector 经常变（前端重构）
  • 视觉验证（看着对就对）
  • 写一次能跑各种环境

8.2 例：数据搬运​

任务：从老 CRM（无 API）迁移 1000 个客户到新 CRM。

// 先收集（从老 CRM）
async function scrape() {
  for (let page = 1; page <= 100; page++) {
    await navigateToOldCRM(page);
    const customers = await computerUseAgent(`提取本页所有客户的姓名、邮箱、电话，输出 JSON`);
    await saveToFile(customers);
  }
}

// 再录入（到新 CRM）
async function input(customers: Customer[]) {
  for (const customer of customers) {
    await computerUseAgent(`在新 CRM 创建客户：${JSON.stringify(customer)}`);
  }
}

注意：1000 个客户 × 5-10 秒/步 × 多步 = 几小时。异步跑。

8.3 例：竞品分析​

任务：每周看 5 个竞品官网，截图主页，检测变化。

async function competitorWatch() {
  const competitors = ['comp1.com', 'comp2.com', /* ... */];
  
  for (const url of competitors) {
    await page.goto(url);
    
    // AI 分析
    const analysis = await computerUseAgent(page, `
      1. 截屏整页
      2. 描述主要变化（vs 一周前的截图，已附上）
      3. 找出新功能、新价格、新文案
      4. 输出结构化报告
    `);
    
    await saveReport(url, analysis);
  }
}

每周自动跑，节省大量时间。

第九章：踩坑总结​

9.1 工程层​

坑后果修正
没限制 max_steps死循环烧 token强制上限
没截图 timeout一直等加 timeout
没沙箱安全灾难Docker / VM
共享 cookies跨任务污染fresh profile
没记录历史动作出错无法 debug每步存截图 + 动作
直接操作生产环境数据丢失用 staging

9.2 体验层​

坑表现修正
不告诉用户在干嘛用户焦虑实时显示当前动作
失败无降级卡死失败转人工
高风险动作不确认误操作强制 approval
进度无感"还在转"显示 "正在做 step 5/8"

9.3 何时停止​

// 明确的停止条件
function shouldStop(state: AgentState): boolean {
  if (state.success) return true;
  if (state.steps >= MAX_STEPS) return true;
  if (state.cost > BUDGET) return true;
  if (state.duration > TIMEOUT) return true;
  if (state.consecutiveFailures > 3) return true;  // 同一错误重复
  if (state.userCancelled) return true;
  return false;
}

特别第 5 条："连续 3 次失败"——LLM 卡在某个状态时会反复尝试同样动作。识别这个模式，及时停。

第十章：未来方向​

10.1 视觉模型专门优化​

通用 LLM 视觉精度还不够。专门为 GUI 训练的模型：

  • Anthropic Claude（特别针对 computer use 微调的版本）
  • OpenAI Operator
  • ByteDance UI-TARS（开源）

2026-2027 视觉精度会进一步提升。

10.2 协议标准化​

类似 MCP 之于工具，可能出现 "Computer Use Protocol"：

  • 标准化的 action schema
  • 跨厂商互操作
  • 标准的截图格式

讨论中。

10.3 更高效的视觉​

每次截图重传太贵。优化方向：

  • 只传变化区域（diff）
  • 用 OCR + 结构化 DOM 替代纯视觉
  • 边缘视觉模型（小模型预处理）

10.4 Multi-modal Embeddings​

把屏幕状态 embedding 化，相似状态共享 cache。

实验阶段。

权威资料​

核对日期：2026-06-12