L17 浏览器 Agent（CUA）：让 Agent 像人一样"上网"

• 难度 ⭐⭐⭐⭐⭐（高级）
• 预计阅读 30 分钟
• 代码量 含 Browser-Use 完整示例
• 先修 L4（Tool Use）+ L10（Agentic RAG）+ L11（MCP）+ L16（MAF）

课程目标：理解 Computer Use Agent（CUA）的原理与架构，掌握 Browser-Use + Playwright 的混合模式，能构建一个能在真实网站上操作的浏览器 Agent。

一、99% 的网站没有 API#

老王想做一个"价格监控 Agent"——自动监控 Airbnb 上斯德哥尔摩的酒店价格波动。

他打开 Airbnb 官网一看——没 API。

老王崩溃："那我只能手动刷新页面吗？"

不是——你需要 Computer Use Agent（CUA）：让 Agent 像人一样打开浏览器、点击按钮、提取信息。

Building Computer Use Agents 就是教这个：

当 API 不可用时，让 Agent 直接操作浏览器——打开网页、识别元素、模拟点击、提取数据。

二、用一个比喻：CUA = 机器人实习生#

把 CUA 比作一位机器人实习生：

好处：实习生能做任何"人在浏览器前能做"的事——这是通用性最高的自动化方式。

坏处：实习生很慢（每一步都要"看屏幕"）、很贵（视觉模型调用）、容易出错（页面变了就崩）。

三、CUA 的技术栈#

Building Computer Use Agents 推荐了四个核心组件：

# 安装
pip install browser_use playwright python-dotenv
playwright install chromium

四、动手：监控 Airbnb 价格的 CUA#

Building Computer Use Agents 给出了一个完整的 notebook 案例——搜斯德哥尔摩的 Airbnb 房源，提取价格，找到最便宜的。

4.1 启动 Chrome with CDP#

import subprocess
import time

# 用 CDP 模式启动 Chrome（这样 Browser-Use 和 Playwright 能共享同一个 session）
chrome_process = subprocess.Popen(
    [
        "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
        "--remote-debugging-port=9222",
        "--user-data-dir=/tmp/chrome-cua",
    ]
)
time.sleep(2)  # 等 Chrome 启动

4.2 用 Browser-Use 做开放性导航#

from browser_use import Agent as BrowserAgent
from langchain_openai import AzureChatOpenAI

llm = AzureChatOpenAI(
    azure_deployment="gpt-5-mini",  # 视觉模型
    azure_endpoint=os.environ["AZURE_OPENAI_ENDPOINT"],
    api_version="2024-12-01-preview"
)

agent = BrowserAgent(
    task="""Go to airbnb.com and search for stays in Stockholm for next week.
    Then close any popups that appear.""",
    llm=llm,
)

await agent.run()

4.3 用 Playwright 做精确提取#

from playwright.async_api import async_playwright
from pydantic import BaseModel

class Listing(BaseModel):
    title: str
    price_per_night: float
    rating: float
    url: str

async def extract_listings():
    async with async_playwright() as p:
        # 连接已经启动的 Chrome
        browser = await p.chromium.connect_over_cdp("http://localhost:9222")

        # 找到 Airbnb 的 tab
        for context in browser.contexts:
            for page in context.pages:
                if "airbnb" in page.url:
                    airbnb_page = page

        # 提取结构化数据
        listings = await airbnb_page.evaluate("""() => {
            return Array.from(document.querySelectorAll('[itemprop="itemListElement"]')).map(el => ({
                title: el.querySelector('[itemprop="name"]')?.innerText,
                price: parseFloat(el.querySelector('[data-testid="price"]')?.innerText.replace(/[^0-9.]/g, '')),
                rating: parseFloat(el.querySelector('[aria-label*="rating"]')?.getAttribute('aria-label'))
            }));
        }""")

        return [Listing(**l) for l in listings if l["price"]]

4.4 比较价格#

listings = await extract_listings()
cheapest = min(listings, key=lambda x: x.price_per_night)

print(f"最便宜的：{cheapest.title} - {cheapest.price_per_night}元/晚")
print(f"链接：{cheapest.url}")

五、Agent 模式 vs Actor 模式#

Building Computer Use Agents 给出了一个关键决策表：

最佳实践：先用 Agent 做探索性导航，遇到稳定结构后切换到 Actor 做精确控制。

六、CUA 的七大安全护栏#

CUA 操作真实网站——必须有严格的边界：

1. 限定浏览范围：用专用 browser profile/sandbox，限制可访问域名

2. 分离观察与行动：让 Agent 先搜索、读取、提取；提交表单、付款、改账户前必须人工审批

3. 不在 prompt/trace 里写密钥：密码、支付信息、session cookie、个人数据不进 LLM context

4. 把页面内容视为不可信输入：网站可能有针对 Agent 的 prompt injection

5. 危险步骤前做确定性检查：校验 URL、页面标题、选中项、价格、收件人

6. 设置预算与停止条件：限制操作次数、重试次数、tab 数、运行时长

7. 只记录有用证据：保留操作摘要、时间戳、URL、截图引用

Building Computer Use Agents 强调：

在 Airbnb 案例中，安全默认值是只搜索+提取价格；登录、联系房东、完成预订必须是用户单独批准的操作。

七、真实世界案例：微软 Project Opal#

Building Computer Use Agents 提到了微软的企业级产品——Project Opal：

Opal 已经在 Microsoft 365 Copilot 的 Frontier 早期访问中可用。

八、CUA 的局限性与未来#

8.1 当前局限#

• 慢：每一步都要视觉推理，比 API 调用慢 10-100 倍

• 贵：视觉模型调用成本大

• 脆：网站改版就可能崩

• 不安全：操作真实网站风险大

8.2 未来方向#

• 更快的小视觉模型（专门优化）

• 更稳的 web 元素识别（结构化 DOM + 视觉融合）

• 更安全的人类监督机制（HITL 强制审批）

• 企业级 CUA 平台（Opal、Salesforce Agentforce）

九、关键要点回顾#

最佳模式：Agent 做探索 + Actor 做精确控制。

核心安全：观察和行动分离——搜索可以自动，付款必须人工。

十、参考资源#

• 课程章节：Building Computer Use Agents (CUA)

• Browser-Use 文档：https://docs.browser-use.com/

• Playwright 文档：https://playwright.dev/python/

• Project Opal：Microsoft 365 Copilot Frontier 计划

十一、下一课预告#

L19-L20 生产部署——从 demo 到生产的"最后一公里"：版本控制、可观测性、CI/CD、模型路由、缓存、人审、灰度发布。

为什么重要：99% 的 Agent 死在"看起来跑通了"——部署到生产后才发现没监控、没回滚、没测试。