Claude Agent 的「眼睛」来了：用 browserbase/skills 让 AI 真正看懂网页 🛠️

想象一下，你正在开发一个智能客服系统，用户问「帮我看看购物车里的商品有没有打折」。你的 AI 助手需要打开网页、登录账号、浏览购物车、提取商品信息、比对价格——这一连串操作，传统 API 调用根本无法完成。你只能要么自己写 Puppeteer 脚本，要么放弃这个功能。

这就是今天我们要解决的问题。browserbase/skills 为 Claude Agent 提供了真正的「网页浏览能力」，让 AI 不再只是文本理解的工具，而是能像人类一样操作浏览器的智能体。🔥

🤯 痛点：AI 的「视力障碍」

开发者在使用 Claude API 时，常常遇到一个尴尬的瓶颈：模型能理解复杂的代码逻辑，却看不懂一个简单的网页。

传统解决方案要么是调用 fetch() 获取 HTML 源码，但现代网页大量依赖 JavaScript 渲染，你拿到的只是一堆空壳标签；要么是集成 Puppeteer 或 Playwright，但需要自己处理登录态、Cookie、反爬虫策略，还要解析 DOM 结构——这工作量堪比写一个小型浏览器。

更致命的是，AI 无法「看到」动态加载的内容。比如无限滚动页面、需要点击「展开更多」才能显示的评论区、经过 JavaScript 计算的实时价格——这些内容在静态 HTML 中根本不存在。

而 browserbase/skills 的出现，让 Claude 直接获得了「视觉能力」，就像给一个盲人装上了电子眼。👁️

🔧 解决方案：Agent SDK 的「浏览器外挂」

browserbase/skills 本质上是一个为 Claude Agent SDK 设计的工具包，它封装了浏览器自动化、DOM 解析、页面截图、JavaScript 执行等能力，让 Claude 能够像人类一样「看」网页、「点」按钮、「读」内容。

它的核心思路是：不依赖 API，只依赖浏览器。这意味着你不需要网站提供任何接口，只要人能操作的网页，AI 就能操作。

核心能力一览

  • 页面截图与视觉理解：Claude 可以「看到」当前页面的截图，理解布局和内容
  • DOM 交互操作：点击、滚动、输入、选择——所有浏览器操作都通过工具暴露给 AI
  • JavaScript 执行：AI 可以执行任意 JS 代码来提取页面数据
  • 会话持久化：保持登录状态和 Cookie，实现多步骤操作
  • 反检测能力：内置指纹伪装，减少被网站拦截的概率

// 使用 browserbase/skills 让 Claude 浏览网页
import { Agent } from '@anthropic-ai/sdk';
import { browserSkill } from '@browserbase/skills';

const agent = new Agent({
  model: 'claude-3-opus-20240229',
  tools: [browserSkill()],
});

const result = await agent.run(
  '请打开 example.com，找到"产品"页面的第一个商品价格，并告诉我是否有折扣'
);
// AI 会自动：打开网页 -> 点击产品链接 -> 截图分析 -> 提取价格 -> 返回结果

🔬 技术深潜：AI 如何「操作」浏览器？

这个 SDK 的实现思路值得深入探讨。它不是一个简单的 Puppeteer 封装，而是专为 LLM 设计的浏览器抽象层。

架构设计

整个系统分为三层：

  1. 浏览器层：基于 Playwright 的 headless 浏览器实例，负责实际渲染和交互
  2. 抽象层：将复杂的浏览器操作（如等待元素加载、处理弹窗、切换标签页）简化为几个原子工具
  3. AI 适配层：将工具描述转化为 Claude 能理解的函数调用格式，并处理多轮对话中的上下文

// 工具定义示例
const browserTool = {
  name: 'browser_click',
  description: '点击页面上的某个元素',
  parameters: {
    type: 'object',
    properties: {
      selector: {
        type: 'string',
        description: 'CSS选择器，如 #submit-btn 或 div.product > a'
      },
      waitForNavigation: {
        type: 'boolean',
        description: '点击后是否等待页面跳转'
      }
    }
  },
  execute: async ({ selector, waitForNavigation }) => {
    await page.click(selector);
    if (waitForNavigation) {
      await page.waitForNavigation();
    }
    // 自动返回当前页面的截图和关键文本
    return {
      screenshot: await page.screenshot({ encoding: 'base64' }),
      textContent: await page.evaluate(() => document.body.innerText.slice(0, 5000))
    };
  }
};

关键创新点

这个项目最聪明的地方在于「视觉反馈循环」。每次 AI 执行一个操作（如点击按钮），系统会自动返回当前页面的截图和文本摘要。Claude 通过「看到」前后页面的变化，来判断操作是否成功，并决定下一步行动。

这解决了 LLM 在浏览器自动化中最大的痛点：错误恢复。传统脚本一旦选择器失效或页面结构变化，整个流程就崩溃了。但有了视觉反馈，AI 能发现「哦，这个按钮没点动，可能是因为弹窗挡住了」，然后自动调整策略。

💡 最佳实践：让 AI 浏览器操作更可靠

在实际使用中，有几个技巧能让你的 Agent 表现更稳定：

1. 给 AI「思考时间」

浏览器操作往往需要等待页面加载。不要期望 AI 能瞬间完成所有操作。在工具定义中，给每个操作留出合理的超时时间：


// 为操作设置合理的超时
const navigateTool = {
  name: 'browser_navigate',
  execute: async (url) => {
    await page.goto(url, { 
      waitUntil: 'networkidle', // 等待网络空闲
      timeout: 30000 // 30秒超时
    });
    // 额外等待页面完全渲染
    await page.waitForTimeout(2000);
  }
};

2. 合理利用截图

截图是 AI 理解页面的核心，但频繁截图会增加 Token 消耗。建议只在关键步骤（如登录后、点击关键按钮后）触发截图，而不是每次操作都截。

3. 处理登录态

对于需要登录的网站，建议先手动登录一次，保存 Cookie 和 LocalStorage，然后让 AI 复用这些信息：


// 保存和恢复 session
const sessionData = await page.context().storageState();
// 后续启动时恢复
await page.context().addCookies(sessionData.cookies);

4. 限制 AI 的「好奇心」

Claude 有时会过于「探索」，比如在购物网站上到处点链接。建议在系统提示中明确限制操作范围：

"你只能操作当前页面的可见元素，不要点击任何广告或外部链接。"

⚠️ 潜在问题与注意事项

虽然 browserbase/skills 很强大，但并非万能。开发者需要注意以下几点：

  • Token 消耗较高：每次截图和页面文本提取都会消耗大量 Token，复杂任务可能很快消耗完上下文窗口
  • 反爬虫风险：虽然内置了指纹伪装，但一些严格的网站（如银行、支付平台）仍然可能检测到自动化操作
  • 执行速度：每个操作都需要「截图→AI分析→决策→执行」的循环，比传统脚本慢得多
  • 不是所有页面都适合：对于结构复杂、大量使用 Canvas/WebGL 的页面（如图形编辑器），截图分析效果不佳

🎯 最佳实践：将 browserbase/skills 用于「需要理解页面语义」的场景（如提取商品信息、填写表单），而将「纯性能操作」（如批量数据抓取）留给传统 Puppeteer 脚本。

🚀 总结：AI 能力的「最后一公里」

browserbase/skills 解决了一个长期被忽视但极其重要的问题：AI 如何与真实世界的网页交互。

它让 Claude 从「文本理解者」进化为「网页操作者」，打开了无数新的应用场景：

  • 自动化客服：AI 直接登录后台系统处理订单
  • 数据采集：从复杂动态页面中提取结构化数据
  • 测试自动化：AI 能理解 UI 变化，自动修复测试脚本
  • 个人助理：帮你管理多个网站的订阅、账户、购物车

对于开发者来说，这个项目展示了 AI Agent 发展的一个重要方向：不是让 AI 适应我们的 API，而是让 AI 适应我们使用的工具。浏览器作为人类与互联网交互的主要界面，自然应该成为 AI 的「眼睛」和「手」。

如果你正在构建下一代 AI 应用，不妨让 Claude 学会「看网页」——你会发现，世界突然变得清晰了。🌟