Browserbase MCP Server - 让 AI 像人类一样操控浏览器的自动化利器

Posted on

Browserbase MCP Server - 让 AI 像人类一样操控浏览器的自动化利器

Browserbase MCP Server

简介

Browserbase MCP Server 是一款革命性的云端浏览器自动化服务器，通过 Model Context Protocol 让 AI 助手能够像人类用户一样与网页进行自然交互。它不仅仅是传统的网页抓取工具，而是集成了 Stagehand 多模态 AI 技术，能够理解复杂的 DOM 结构、处理动态内容、执行 JavaScript、填写表单、点击按钮，甚至从视觉角度理解页面布局。服务器提供了 6 个核心工具，涵盖导航、交互、数据提取、截图和脚本执行等全方位能力。基于 Browserbase 的云基础设施，它支持并行运行多个浏览器会话、启用高级反检测模式、使用代理网络，确保自动化任务的稳定性和隐蔽性。这对于需要大规模网页数据采集、自动化测试、竞品监控、内容聚合等场景具有突破性价值。

核心特性

  • 自然语言驱动 - AI 可以用自然语言描述操作意图（如”找到登录按钮并点击”），无需编写复杂的选择器
  • 多模态页面理解 - 结合视觉识别和 DOM 分析，能够处理复杂布局、动态内容和 Shadow DOM 结构
  • 完整的浏览器能力 - 支持 JavaScript 执行、Cookie 管理、本地存储、表单提交、文件上传等所有浏览器功能
  • 结构化数据提取 - 可以根据自定义 schema 从网页中提取结构化数据，自动适应页面布局变化
  • 高级反检测 - 内置 Browserbase 的 AdvancedStealth 模式，模拟真实用户行为，绕过反爬虫检测
  • 代理网络支持 - 集成住宅代理池，支持地理位置切换，确保大规模抓取的稳定性
  • 会话持久化 - 支持保持浏览器会话活跃，在多次操作之间维护登录状态和 Cookie
  • 并行执行能力 - 可以同时运行多个独立的浏览器实例，显著提升数据采集效率
  • 灵活的模型选择 - 支持 Gemini、GPT-4o、Claude 等多个多模态 AI 模型，可根据任务需求选择
  • 远程托管选项 - 通过 Smithery.ai 提供 SHTTP 协议的远程托管服务，无需本地部署

工具列表

页面导航

browserbase_navigate

描述: 导航到指定的网页 URL，支持完整的页面加载和 JavaScript 执行

参数:

  • url (string): 要访问的完整网页地址，必须包含协议（http:// 或 https://） [必需]

页面交互

browserbase_click

描述: 点击网页上的元素，支持使用 CSS 选择器或自然语言描述

参数:

  • selector (string): 要点击的元素选择器，可以是 CSS 选择器（如 “#login-button”）或自然语言描述（如 “蓝色的提交按钮”） [必需]

browserbase_fill_form

描述: 填写网页表单字段，支持输入框、文本区域、下拉菜单等所有表单元素

参数:

  • selector (string): 表单字段的选择器或自然语言描述（如 “邮箱地址输入框”） [必需]
  • value (string): 要填入的值，对于下拉菜单可以是选项文本或值 [必需]

数据提取

browserbase_extract_data

描述: 从当前网页中提取结构化数据，根据自定义 schema 自动定位和提取内容

参数:

  • schema (object): 定义要提取数据的结构，JSON Schema 格式 [必需]
    • 示例: {"title": "string", "price": "number", "inStock": "boolean"}

使用说明:
此工具会智能分析页面内容，根据 schema 定义的字段名称和类型，自动寻找最匹配的内容。无需手动指定选择器，AI 会从语义层面理解页面结构。

截图捕获

browserbase_screenshot

描述: 捕获当前网页的截图，支持全页面截图或特定元素截图

参数:

  • fullPage (boolean): 是否捕获整个页面（包括滚动区域外的内容），默认为 false [可选]
  • selector (string): 要截图的特定元素选择器，如果提供则只截取该元素 [可选]

返回格式:
返回 base64 编码的 PNG 图片数据，可以直接在对话中显示或保存到文件。

脚本执行

browserbase_execute_script

描述: 在浏览器上下文中执行任意 JavaScript 代码，可以访问完整的 DOM API 和浏览器对象

参数:

  • script (string): 要执行的 JavaScript 代码字符串 [必需]

使用场景:

  • 修改页面元素（如隐藏广告、调整样式）
  • 执行复杂的数据计算和转换
  • 触发自定义事件和回调
  • 访问 localStorage、sessionStorage、Cookie 等浏览器 API
  • 调用页面上的 JavaScript 函数

配置方式

基础 NPM 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "mcpServers": {
    "browserbase": {
      "command": "npx",
      "args": [
        "@browserbasehq/mcp-server-browserbase"
      ],
      "env": {
        "BROWSERBASE_API_KEY": "your-api-key",
        "BROWSERBASE_PROJECT_ID": "your-project-id"
      }
    }
  }
}

高级配置（启用所有功能）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "mcpServers": {
    "browserbase": {
      "command": "npx",
      "args": [
        "@browserbasehq/mcp-server-browserbase",
        "--proxies",
        "--advancedStealth",
        "--keepAlive",
        "--modelName", "gpt-4o"
      ],
      "env": {
        "BROWSERBASE_API_KEY": "your-api-key",
        "BROWSERBASE_PROJECT_ID": "your-project-id",
        "OPENAI_API_KEY": "your-openai-key"
      }
    }
  }
}

Smithery.ai 远程托管配置

Smithery 配置界面

通过 Smithery.ai 可以实现 SHTTP 协议的远程托管，无需本地运行服务器：

  1. 访问 https://smithery.ai
  2. 搜索 “Browserbase MCP Server”
  3. 配置 API 密钥和选项
  4. 生成 SHTTP 连接配置
  5. 添加到你的 MCP 客户端

环境变量说明

必需变量:

  • BROWSERBASE_API_KEY: Browserbase 账户的 API 密钥
  • BROWSERBASE_PROJECT_ID: Browserbase 项目 ID

可选变量:

  • OPENAI_API_KEY: 使用 GPT-4o 模型时需要
  • ANTHROPIC_API_KEY: 使用 Claude 模型时需要

命令行参数

  • --proxies: 启用 Browserbase 住宅代理网络
  • --advancedStealth: 启用高级反检测模式
  • --keepAlive: 保持浏览器会话活跃，避免频繁重启
  • --contextId <id>: 复用特定的 Browserbase 上下文（保持登录状态）
  • --modelName <name>: 选择 AI 模型（默认：gemini-2.0-flash-exp）
  • --modelApiKey <key>: 提供自定义模型的 API 密钥

使用示例

NPM 本地安装

1
2
3
4
5
6
7
8
9
10
11
12
# 安装包
npm install @browserbasehq/mcp-server-browserbase

# 基础运行
npx @browserbasehq/mcp-server-browserbase

# 启用所有功能
npx @browserbasehq/mcp-server-browserbase \
  --proxies \
  --advancedStealth \
  --keepAlive \
  --modelName gpt-4o

支持的 AI 模型

1
2
3
4
5
6
7
8
9
10
# 使用 Google Gemini（默认，免费）
--modelName gemini-2.0-flash-exp

# 使用 OpenAI GPT-4o（需要 API 密钥）
--modelName gpt-4o
--modelApiKey $OPENAI_API_KEY

# 使用 Anthropic Claude（需要 API 密钥）
--modelName claude-3-5-sonnet-20241022
--modelApiKey $ANTHROPIC_API_KEY

实际操作示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// 示例 1: 自动登录网站
await browserbase_navigate("https://example.com/login");
await browserbase_fill_form("邮箱输入框", "user@example.com");
await browserbase_fill_form("密码输入框", "password123");
await browserbase_click("登录按钮");

// 示例 2: 提取产品数据
await browserbase_navigate("https://shop.example.com/products");
const products = await browserbase_extract_data({
  products: [{
    name: "string",
    price: "number",
    rating: "number",
    inStock: "boolean",
    imageUrl: "string"
  }]
});

// 示例 3: 捕获页面截图
await browserbase_navigate("https://dashboard.example.com");
const screenshot = await browserbase_screenshot({ fullPage: true });

// 示例 4: 执行自定义脚本
await browserbase_execute_script(`
  // 隐藏所有广告
  document.querySelectorAll('.ad, .advertisement').forEach(el => {
    el.style.display = 'none';
  });

  // 返回页面标题和主要内容
  return {
    title: document.title,
    mainContent: document.querySelector('main').innerText
  };
`);

// 示例 5: 处理动态加载内容
await browserbase_navigate("https://infinite-scroll.example.com");
await browserbase_execute_script(`
  // 滚动到底部触发加载
  window.scrollTo(0, document.body.scrollHeight);
`);
// 等待新内容加载后再提取

实际应用场景

竞品监控和价格追踪

定期访问竞争对手的网站，自动提取产品价格、库存状态、促销信息。通过结构化数据提取，即使页面布局变化，也能持续获取准确数据。结合代理网络避免被封禁，支持全球范围的多地区价格监控。

自动化测试和质量保证

模拟真实用户的浏览行为，测试 Web 应用的功能完整性。AI 可以理解页面语义，自动发现和点击新增的按钮，而不依赖固定的测试脚本。截图功能可用于视觉回归测试，捕获 UI 变化。

内容聚合和新闻采集

从多个新闻网站、博客、论坛自动采集内容，提取标题、正文、作者、发布时间等结构化信息。支持处理需要登录、分页、AJAX 加载的复杂网站。可以并行运行多个会话，显著提升采集效率。

表单自动填写和提交

批量注册账户、提交问卷、申请服务等重复性表单操作。AI 能够理解表单字段的语义（如”电话号码”、”出生日期”），自动选择正确的输入方式。支持处理验证码、下拉菜单、复选框等复杂表单元素。

市场调研和数据分析

从电商平台、评论网站、社交媒体采集用户反馈和市场趋势数据。提取产品评分、评论内容、销量排名等信息，进行情感分析和竞争分析。通过代理网络模拟不同地区用户，获取区域化的市场数据。

技术实现

Browserbase MCP Server 基于以下核心技术栈构建：

Browserbase 云平台
提供托管的浏览器实例，基于 Chromium 引擎，运行在分布式云基础设施上。每个会话都是隔离的、可扩展的，支持自动回收和负载均衡。

Stagehand 多模态引擎
集成 Stagehand 作为页面理解和交互层，它结合了：

  • 视觉识别: 使用多模态 AI 模型（GPT-4 Vision、Gemini Pro Vision）理解页面布局
  • DOM 分析: 解析 HTML 结构，建立元素之间的语义关系
  • 自然语言处理: 将用户的自然语言描述映射到具体的 DOM 元素

反检测技术
通过 AdvancedStealth 模式实现：

  • 修改浏览器指纹（User-Agent、WebGL、Canvas）
  • 模拟真实的鼠标移动和点击轨迹
  • 随机化请求时间间隔和行为模式
  • 使用住宅代理 IP 池分散请求来源

数据提取算法
使用基于 schema 的智能提取：

  1. 分析 schema 定义的字段名称和类型
  2. 在页面中搜索语义匹配的内容（如字段名”price”匹配包含货币符号的文本）
  3. 使用 AI 模型验证提取结果的合理性
  4. 处理多个匹配项（如产品列表），返回数组结构

会话管理
支持通过 --contextId 参数复用浏览器上下文：

  • 保存 Cookie、localStorage、sessionStorage
  • 维护登录状态和用户配置
  • 跨多次操作保持连续性
  • 支持手动释放或自动过期

服务器遵循 MCP 协议规范，所有工具调用都是异步的，支持超时控制和错误重试。通过 TypeScript 类型系统确保参数验证和类型安全。

获取方式

相关资源

  • Stagehand 项目: 了解多模态浏览器自动化的技术原理
  • Browserbase 文档: 深入学习云浏览器平台的能力和最佳实践
  • Web Scraping 指南: 合法合规的网页数据采集技术和注意事项
  • MCP 协议规范: 理解 Model Context Protocol 的设计和扩展方法
  • 示例应用: 查看使用 Browserbase MCP Server 的实际项目案例
© 2025 Generative AI Discovery All Rights Reserved.
Theme by hiero