---

摘要

Anthropic 在 Claude Code 中正式引入 Computer Use 能力，让大模型可以直接操作你的桌面应用和浏览器，从“写代码助手”升级为“全栈自动化代理”。本文从原理、典型场景、跨平台替代方案，到如何用统一 OpenAI 兼容 API（基于 xuedingmao.com）接入多模型 Agent，给出完整的落地实践与 Python 代码示例。

---

一、背景介绍：从 ChatGPT 到“能点鼠标的代理”

传统 LLM 助手（ChatGPT、Claude、Gemini 等）主要停留在“生成结果”层面：输出代码、文档或命令，然后还需要开发者自己去执行。

Anthropic 在 3 月推出的 Computer Use 能力改变了这一点：

• Claude 可以在你的 Mac 上：
  • 打开应用、切换窗口
  • 操作浏览器、填写 Web 表单
  • 操作 Excel / Google Sheets
  • 在 CI 中直接跑 UI 流程测试与可视化调试
• 甚至可以通过手机远程控制你的电脑（借助 Cloud Cowork / Claude Work 之类的客户端）

近期，Anthropic 又把 Computer Use 能力集成到了 Claude Code（Cloud Code CLI/IDE 插件） 中，使得：

你可以不离开终端，让 Claude 自动构建、运行、点击、输入、截图、验证整个应用及工作流。

对开发者而言，这意味着从“代码助手”到“自动化工程师”的跃迁。

---

二、核心原理：LLM + 视觉 + UI 控制 = 通用 GUI Agent

从开发者视角，可以把 Claude Computer Use 理解为一个“三层架构”的智能代理系统：

1. 感知层：屏幕与 UI 结构感知

Claude 通过内置的 视觉模型 与系统 Hook 能力，获得当前屏幕或窗口的状态：

• 屏幕截图（Image）
• 识别 UI 元素：按钮、输入框、表格、菜单等
• 有时候还会结合 DOM / Accessibility Tree（尤其在浏览器中）

这一层的目标是把“像素级屏幕”抽象为“语义化 UI 组件描述”。

2. 决策层：LLM 规划与工具使用

在 Claude Code / Computer Use 模式下，模型多了一类“工具”：

• click(x, y | element_id)
• type(text, into=element)
• scroll(...)
• wait_for(selector | condition)
• screenshot()

LLM 在“扩展思考”模式下，循环执行：

1. 观察当前 UI 状态（截图 + 元素描述）
2. 规划操作步骤（类似 AGI 级 Chain-of-Thought）
3. 调用相应的 UI 操作工具
4. 再次观察，校验结果，继续下一步

3. 执行层：系统与浏览器控制

官方 Claude Code on macOS 使用的是 原生客户端 + CLI 集成 的控制方式：

• Mac 客户端负责：
  • 获得屏幕内容与窗口结构
  • 通过系统 API 执行鼠标、键盘、窗口操作
• CLI / Cloud Code 负责：
  • 把用户任务 + UI 状态传给 LLM
  • 接收 LLM 工具调用指令
  • 转发给本地控制模块执行

对于 Windows / Linux，目前没有官方 Computer Use，但视频中提到一个开源 “Dev 浏览器 / Dev Agent” 作为替代方案：

• 在一个“可编程浏览器（Dev Browser）”中执行 JavaScript / Python
• 允许 Agent 通过“写代码 + 执行”来控制浏览器
• 类似有代表性的实现：Playwright + LLM、Selenium + LLM、puppeteer + LLM 等

本质上是把“本地电脑控制”替换为“浏览器沙盒控制”。

---

三、实战演示：用 Python + 搭建一个 Browser-Agent

由于官方 Computer Use 目前仅支持部分 macOS 用户，本文用更通用的方式演示：通过 OpenAI 兼容 API + 可编程浏览器，构建一个“自动化表格填充 Agent”。

这里我们使用：

• 模型：claude-sonnet-4-6
• 平台：薛定猫 AI（xuedingmao.com，OpenAI 兼容模式）
• 任务：自动生成“Top Movies Tracker” Google 表格，并填充示例数据（与视频中的 Demo 对齐）

3.1 环境准备

pip install playwright python-dotenv requests
playwright install

3.2 配置环境变量（.env）

XDM_API_KEY=你在 xuedingmao.com 获取的密钥
XDM_BASE_URL=https://xuedingmao.com

3.3 Python 代码示例：LLM + Playwright 浏览器 Agent

import os
import json
import asyncio
from dataclasses import dataclass
from typing import List, Dict, Any

import requests
from dotenv import load_dotenv
from playwright.async_api import async_playwright

load_dotenv()


# ===============================
# 一、封装 xuedingmao OpenAI 兼容调用
# ===============================
class XueDingMaoClient:
    """
    简单的 OpenAI 兼容客户端封装，用于调用 claude-sonnet-4-6。
    """
    def __init__(self):
        self.api_key = os.getenv("XDM_API_KEY")
        self.base_url = os.getenv("XDM_BASE_URL", "https://xuedingmao.com")

        if not self.api_key:
            raise RuntimeError("请在 .env 中配置 XDM_API_KEY")

        self.chat_url = f"{self.base_url}/v1/chat/completions"

    def chat(self, messages: List[Dict[str, str]], model: str = "claude-sonnet-4-6") -> str:
        """
        调用聊天接口，返回模型回复文本。
        """
        headers = {
            "Authorization": f"Bearer {self.api_key}",
            "Content-Type": "application/json",
        }
        payload = {
            "model": model,
            "messages": messages,
            "temperature": 0.2,
        }
        resp = requests.post(self.chat_url, headers=headers, json=payload, timeout=60)
        resp.raise_for_status()
        data = resp.json()
        return data["choices"][0]["message"]["content"]


# ===============================
# 二、定义 Browser-Agent 任务协议
# ===============================
@dataclass
class BrowserAction:
    """
    描述一次浏览器动作，用于由 LLM 规划后返回。
    """
    type: str               # "goto", "click", "fill", "wait", ...
    selector: str = ""
    text: str = ""
    url: str = ""


def parse_actions_from_llm(response: str) -> List[BrowserAction]:
    """
    解析 LLM 返回的 JSON 动作列表。
    要求 LLM 输出严格 JSON 格式。
    """
    try:
        actions_data = json.loads(response)
        actions = []
        for item in actions_data:
            actions.append(BrowserAction(
                type=item.get("type", ""),
                selector=item.get("selector", ""),
                text=item.get("text", ""),
                url=item.get("url", "")
            ))
        return actions
    except json.JSONDecodeError as e:
        raise ValueError(f"LLM 返回 JSON 解析失败: {e}\n原始内容: {response}")


# ===============================
# 三、核心逻辑：LLM 规划 + Playwright 执行
# ===============================
SYSTEM_PROMPT = """
你是一个浏览器自动化规划器，负责为 Playwright 生成动作序列。
仅输出一个 JSON 数组，每个元素是一个动作对象，不要包含其他文本。

动作对象字段：
{
  "type": "goto" | "click" | "fill",
  "url": "仅在 type=goto 时使用",
  "selector": "CSS 选择器",
  "text": "仅在 type=fill 时使用"
}

约束：
1. 严格输出有效 JSON，最外层是数组。
2. 只生成高层逻辑需要的必要步骤。
3. 使用简洁但尽量稳健的 CSS 选择器。
"""

USER_PROMPT = """
目标：在浏览器中创建一个“Top Movies Tracker”Google Sheet，并填充少量示例数据。

步骤大致为：
1. 访问 https://docs.google.com/spreadsheets/ 并创建一个新的空白表格。
2. 在第一行创建列：Title, Year, Genre, Rating, Watched。
3. 在 A2:E6 填充 5 条示例电影条目，Rating 为 1-10 分，Watched 为 TRUE/FALSE。
4. 保持简单，不需要复杂公式，只需要一个便于演示的表格。

请生成一系列动作，让人类执行这些动作就可以完成整个流程。
注意：
- 假设用户已经登录 Google 账号。
- 不要处理登录场景。
"""


async def run_browser_actions(actions: List[BrowserAction]):
    """
    使用 Playwright 执行 LLM 规划好的动作。
    """
    async with async_playwright() as p:
        browser = await p.chromium.launch(headless=False)  # headless=False 方便可视化调试
        page = await browser.new_page()

        for i, act in enumerate(actions, start=1):
            print(f"[Action {i}] {act}")
            if act.type == "goto":
                await page.goto(act.url, wait_until="networkidle")
            elif act.type == "click":
                await page.click(act.selector, timeout=15000)
            elif act.type == "fill":
                await page.fill(act.selector, act.text, timeout=15000)
            else:
                print(f"未知动作类型: {act.type}")

        # 为方便观察结果，延迟一段时间
        await page.wait_for_timeout(15000)
        await browser.close()


def plan_actions_with_llm() -> List[BrowserAction]:
    """
    调用薛定猫 AI（claude-sonnet-4-6）规划浏览器动作。
    """
    client = XueDingMaoClient()
    response = client.chat(
        messages=[
            {"role": "system", "content": SYSTEM_PROMPT},
            {"role": "user", "content": USER_PROMPT},
        ]
    )
    print("LLM 原始输出：", response)
    actions = parse_actions_from_llm(response)
    return actions


if __name__ == "__main__":
    # 1. 先由 LLM 规划动作
    actions = plan_actions_with_llm()

    # 2. 再用 Playwright 执行这些动作
    asyncio.run(run_browser_actions(actions))

3.4 说明与扩展

• 上述代码的结构本质上模拟了 “Claude Computer Use in Browser”：
  • LLM 只负责生成高层动作计划（JSON）
  • 本地 Playwright 负责执行实际 GUI 操作
• 你可以进一步扩展：
  • 加入截图工具（page.screenshot）并把结果回传给 LLM做“视觉调试”
  • 循环：执行一部分动作 → 截图 → LLM 评估 & 规划下一步
  • 加入错误恢复逻辑（例如元素未找到时，让 LLM 重新选择选择器）

---

四、注意事项与工程实践建议

1. 权限与安全边界

官方 Claude Computer Use 在本地执行任意 UI 操作，务必注意：

• 启用前明确权限范围（只在开发专用机器使用更安全）
• 不要在生产数据库或敏感系统上直接让 Agent 自动操作
• 建议在虚拟机 / 容器内提供“沙盒环境”

对于我们用 Playwright 的方案：

• 默认只控制浏览器，相对安全
• 仍需注意 Cookie / 登录态泄露风险

2. 可靠性：UI 变更与选择器问题

LLM 生成的 CSS 选择器并不总是稳健：

• 建议对常用站点（内部管理后台、运营系统）：
  • 手工设计更稳定的 selector
  • 把 selector 作为“工具配置”注入，LLM 只选择动作顺序
• 可以设计“视图校验回路”，例如：
  • 执行前/后截图 + DOM 抽象，交给 LLM 判断是否操作成功

3. 模型选型与多模型集成

在构建复杂 Agent 系统时，经常需要多种模型协作：

• 高级决策：Claude 4.6 / GPT-5.4 / Gemini 3 Pro
• 轻量工具调用 / 文本处理：小参数模型
• 视觉任务：支持多模态的 GPT / Claude / Gemini

这时如果每个模型各用一套 SDK，会导致：

• 接入代码重复、配置分散
• 生产环境切换模型成本很高

---

五、技术资源与平台推荐：统一多模型的 OpenAI 兼容接口

在上面的示例中，我使用 （xuedingmao.com） 作为底层 LLM 服务端，原因主要是工程上的：

1. 聚合 500+ 主流大模型

   • 包括 GPT-5.4、Claude 4.6、Gemini 3 Pro 等新型号
   • 同一接口下即可切换不同厂商的模型，适合做多模型对比与 A/B Test

2. 新模型实时首发，API 兼容 OpenAI 标准

   • 基本保持与 OpenAI API 一致的 chat/completions 协议
   • 像本文这样，把 base_url 换成 https://xuedingmao.com + API Key 即可无缝迁移

3. 统一接入接口，降低多模型集成复杂度

   • 在 AI Agent 场景下，可以非常方便地：
     • 用一个“规划模型”（如 Claude 4.6）负责高层策略
     • 用另一个“工具模型”做文本/结构化解析
   • 代码层只是修改 model 字段，不需要重写 SDK 逻辑

从技术选型角度说，这类聚合式平台更适合：

• 做前沿实验（第一时间体验新模型）
• 做多模型对比和弹性调度
• 做企业级 Agent 平台的底层 LLM 服务抽象层

---

六、小结

基于视频内容和目前的生态，可以看到几个明显趋势：

1. LLM 正从“写代码”升级为“直接动手”的自动化工程师
   • 能打开应用、点击按钮、填表、截图、调试 UI
2. 官方 Claude Computer Use 把这一能力与 CLI / IDE 深度融合
   • 对 macOS + Pro/Max 用户来说，已经可以做到“不离开终端”的完整开发闭环
3. 对 Windows / Linux 开发者来说，可编程浏览器 + LLM 是一个现实可行的替代方案
   • Playwright / Selenium + OpenAI 兼容 API（如薛定猫 AI）即可快速构建
4. 多模型时代，统一 API 网关是构建稳定 Agent 系统的关键基础设施
   • 避免被单一厂商锁死，也能快速试用最新能力

如果你在做自动化测试、运营工具、内部系统集成，强烈建议把“LLM + GUI 自动化”纳入技术路线，哪怕先从浏览器场景切入，也能极大提升开发与运维效率。

---

#AI #大模型 #Python #机器学习 #技术实战