Browserbase MCP Server - AI驱动的云端浏览器自动化

Posted on

Browserbase MCP Server - AI驱动的云端浏览器自动化

企业级方案 | Stars: 2700 | TypeScript | Apache-2.0

概述

Browserbase MCP Server 是一个基于 Model Context Protocol 的云端浏览器自动化服务器，通过 Browserbase 和 Stagehand 框架，让 AI 能够像人类一样与网页交互。它将强大的 Playwright 浏览器引擎与先进的大语言模型相结合，支持自然语言指令驱动的网页操作、数据提取和自动化测试。

该服务器提供了四个核心工具（navigate、act、extract、observe），支持多种 LLM 模型（Gemini、GPT-4o、Claude），并内置代理支持、隐身模式、会话持久化等企业级特性。特别适合需要智能网页交互的场景，如动态网站爬取、自动化测试、数据收集等。

核心特性

  • ✅ 自然语言控制，通过简单描述即可操作网页
  • 🤖 多模型支持（Gemini、OpenAI、Claude）
  • 🌐 云端浏览器，基于 Browserbase 的托管服务
  • 🎭 隐身模式，高级反检测能力绕过机器人检测
  • 📊 结构化提取，支持 Schema 定义的数据提取
  • 🖼️ 截图捕获，支持全页或元素级截图
  • 🔄 会话管理，支持浏览器上下文持久化和复用
  • 🌍 代理支持，内置 Browserbase 代理网络
  • 🚀 Playwright 驱动，可靠的浏览器自动化引擎

工具列表

1. stagehand_navigate

功能：导航到指定的 URL

参数：

  • url (string, 必需) - 要访问的网页地址

示例：

1
2
3
{
  "url": "https://github.com/browserbase"
}

使用场景：

  • 访问目标网站首页
  • 跳转到特定页面
  • 测试页面加载

2. stagehand_act

功能：使用自然语言指令在网页上执行操作

参数：

  • action (string, 必需) - 自然语言描述的操作指令
    • 例如：”点击登录按钮”、”在搜索框输入’AI工具’并回车”
  • variables (object, 可选) - 操作模板中使用的变量

示例：

1
2
3
{
  "action": "click on the stagehand repo"
}
1
2
3
{
  "action": "type 'Claude MCP' into the search box and press enter"
}

使用场景：

  • 点击按钮、链接
  • 填写表单字段
  • 执行复杂的交互序列
  • 滚动页面到特定位置

3. stagehand_extract

功能：从当前网页提取结构化数据

参数：

  • instruction (string, 必需) - 描述要提取什么数据的自然语言指令
  • schema (object, 必需) - 定义数据结构的 Zod 或 JSON Schema

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
  "instruction": "extract the title, author, and publication date",
  "schema": {
    "type": "object",
    "properties": {
      "title": {
        "type": "string",
        "description": "The article title"
      },
      "author": {
        "type": "string",
        "description": "The article author"
      },
      "date": {
        "type": "string",
        "description": "Publication date"
      }
    }
  }
}

使用场景：

  • 爬取产品信息（名称、价格、评分）
  • 提取文章元数据
  • 收集搜索结果
  • 获取表格数据

4. stagehand_observe

功能：观察当前网页上可以执行的所有操作

参数：

  • instruction (string, 可选) - 指导观察内容的自然语言指令

示例：

1
2
3
{
  "instruction": "find all clickable buttons and links"
}
1
2
3
{
  "instruction": "list all form input fields"
}

使用场景：

  • 探索未知网页结构
  • 列出可交互元素
  • 生成操作建议
  • 测试页面可访问性

资源列表

1. Screenshot Resource

URI 格式：screenshot://<screenshot-name>

类型：image/png

功能：访问浏览器捕获的截图

示例：

  • screenshot://homepage
  • screenshot://search-results
  • screenshot://product-page

2. Console Logs

URI 格式：console://logs

类型：text/plain

功能：访问浏览器控制台的所有消息（日志、错误、警告等）

配置方式

环境变量

1
2
3
4
5
6
# 必需
BROWSERBASE_API_KEY=your-api-key-here
BROWSERBASE_PROJECT_ID=your-project-id-here

# 可选（使用 Gemini 模型时需要）
GEMINI_API_KEY=your-gemini-api-key

Claude Desktop 基础配置

在 claude_desktop_config.json 中添加：

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

高级配置（带所有选项）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "mcpServers": {
    "browserbase": {
      "command": "npx",
      "args": [
        "@browserbasehq/mcp-server-browserbase",
        "--proxies",
        "--advancedStealth",
        "--keepAlive",
        "--persist", "true",
        "--browserWidth", "1920",
        "--browserHeight", "1080",
        "--modelName", "openai/gpt-4o"
      ],
      "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
{
  "mcpServers": {
    "browserbase": {
      "command": "npx",
      "args": [
        "@browserbasehq/mcp-server-browserbase",
        "--contextId", "ctx_1234567890",
        "--persist", "true",
        "--keepAlive"
      ],
      "env": {
        "BROWSERBASE_API_KEY": "your-api-key",
        "BROWSERBASE_PROJECT_ID": "your-project-id"
      }
    }
  }
}

命令行参数说明

参数 类型 默认值 说明
--proxies boolean false 启用 Browserbase 代理网络
--advancedStealth boolean false 启用高级反检测模式
--keepAlive boolean false 保持浏览器会话活跃
--contextId string null 复用现有的浏览器上下文 ID
--persist boolean true 持久化浏览器上下文
--port number null HTTP/SHTTP 传输端口
--host string localhost 服务器绑定地址
--cookies string null 注入浏览器 Cookie（JSON 格式）
--browserWidth number 1024 浏览器视口宽度（像素）
--browserHeight number 768 浏览器视口高度（像素）
--modelName string google/gemini-2.0-flash 使用的 LLM 模型
--modelApiKey string null 自定义模型的 API 密钥
--experimental boolean false 启用实验性功能

使用场景

1. 动态网站爬取

使用自然语言指令爬取需要复杂交互的动态网站。

示例流程：

  1. 使用 stagehand_navigate 访问目标网站
  2. 用 stagehand_act 登录、搜索、翻页
  3. 用 stagehand_extract 提取数据到结构化格式
  4. 使用 screenshot:// 资源保存证据截图

最佳实践：

  • 启用 --advancedStealth 绕过反爬虫检测
  • 使用 --proxies 分散请求来源
  • 利用 --contextId 保持登录状态

2. 自动化测试

对 Web 应用进行端到端自动化测试。

示例流程：

  1. 导航到测试页面
  2. 用自然语言描述测试步骤
  3. 使用 stagehand_observe 验证元素存在
  4. 用 console://logs 检查错误日志

最佳实践：

  • 使用固定的 --browserWidth 和 --browserHeight 确保一致性
  • 启用 --keepAlive 加速测试执行
  • 捕获失败截图用于调试

3. 竞品监控

定期监控竞品网站的价格、功能更新等。

示例流程：

  1. 配置定时任务访问竞品网站
  2. 提取关键信息（价格、特性、更新日志）
  3. 与历史数据对比
  4. 发现变化时发送通知

最佳实践：

  • 使用 --persist 保存浏览器状态
  • 配置合理的 --browserWidth 确保页面完整加载
  • 使用 Schema 定义确保数据一致性

4. 表单自动化

批量填写和提交表单。

示例流程：

  1. 导航到表单页面
  2. 用 stagehand_observe 识别所有输入字段
  3. 用 stagehand_act 逐字段填写
  4. 提交并验证结果

最佳实践：

  • 使用 Cookie 注入保持会话
  • 处理验证码时结合 Vision 模型
  • 启用日志记录追踪提交状态

5. 内容截图

为文档、报告生成网页截图。

示例流程：

  1. 导航到目标页面
  2. 等待内容加载完成
  3. 通过 screenshot:// 资源获取截图
  4. 保存到文档或报告中

最佳实践：

  • 设置高分辨率 --browserWidth 和 --browserHeight
  • 等待页面完全加载后再截图
  • 对于长页面使用全页截图

技术架构

核心组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
┌─────────────────────────────────────────────────────┐
│              MCP Client (Claude, Cursor, etc.)      │
└───────────────────┬─────────────────────────────────┘
                    │ MCP Protocol
┌───────────────────┴─────────────────────────────────┐
│           Browserbase MCP Server                    │
│  ┌─────────────────────────────────────────────┐   │
│  │  Stagehand Framework (AI Automation Layer)  │   │
│  └───────────────────┬─────────────────────────┘   │
│                      │                              │
│  ┌───────────────────┴─────────────────────────┐   │
│  │      Playwright (Browser Engine)            │   │
│  └───────────────────┬─────────────────────────┘   │
└────────────────────┬─┴──────────────────────────────┘
                     │
         ┌───────────┴───────────┐
         │                       │
┌────────┴────────┐   ┌──────────┴──────────┐
│  Browserbase    │   │   LLM Models        │
│  Cloud Browsers │   │  (Gemini/GPT/Claude)│
└─────────────────┘   └─────────────────────┘

Stagehand 集成

Browserbase MCP Server 构建在 Stagehand 框架之上，Stagehand 是一个 AI 驱动的浏览器自动化框架，特点包括：

  • 混合交互模式：支持代码和自然语言混合编程
  • Computer Use 模型：集成 OpenAI 和 Anthropic 的计算机使用模型
  • 智能元素定位：使用 AI 理解页面结构，无需手动编写选择器
  • 动作预览和缓存：优化性能，减少重复操作

支持的 LLM 模型

提供商 模型 默认 适用场景
Google gemini-2.0-flash ✅ 快速、经济的自动化任务
OpenAI gpt-4o ❌ 复杂推理和高精度提取
Anthropic claude-3-5-sonnet ❌ 详细分析和内容理解
自定义 其他 ❌ 通过 API 密钥配置

传输协议

  • STDIO - 标准输入输出（用于 Claude Desktop）
  • SHTTP - Server-Sent Events over HTTP（推荐用于生产环境）

与其他 MCP 服务器对比

特性 Browserbase MCP Playwright MCP Puppeteer MCP Web Scraper MCP
自然语言控制 ✅ 原生支持 ❌ 需要代码 ❌ 需要代码 ⚠️ 有限支持
云端浏览器 ✅ Browserbase ❌ 本地 ❌ 本地 ❌ 本地
反检测能力 ⭐⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐ ⭐⭐
会话管理 ✅ 持久化 ⚠️ 有限 ⚠️ 有限 ❌ 无
多模型支持 ✅ 3+ ❌ 无 ❌ 无 ❌ 无
代理网络 ✅ 内置 ❌ 需配置 ❌ 需配置 ❌ 无
学习曲线 简单 中等 中等 简单
适用场景 AI驱动自动化 代码驱动测试 代码驱动爬虫 简单爬取

最佳实践

1. 选择合适的 LLM 模型

1
2
3
4
5
6
7
8
# 快速任务（推荐）
--modelName google/gemini-2.0-flash

# 复杂推理任务
--modelName openai/gpt-4o

# 内容理解和分析
--modelName anthropic/claude-3-5-sonnet

2. 优化隐身模式

1
2
3
4
5
6
7
8
# 标准网站
npx @browserbasehq/mcp-server-browserbase

# 中等反爬虫
npx @browserbasehq/mcp-server-browserbase --proxies

# 高级反爬虫
npx @browserbasehq/mcp-server-browserbase --proxies --advancedStealth

3. 会话复用策略

1
2
3
4
5
6
7
8
9
10
11
// 首次创建会话（会自动生成 contextId）
// 配置: --persist true --keepAlive

// 后续复用会话
// 配置: --contextId ctx_abc123 --persist true

// 优势：
// - 保持登录状态
// - 保留 Cookie 和本地存储
// - 加快后续操作速度
// - 减少 API 调用成本

4. 错误处理

1
2
3
4
5
6
7
8
9
10
11
12
13
// 好的做法：使用 observe 确认元素存在
await stagehand_observe({
  instruction: "find the submit button"
});

await stagehand_act({
  action: "click the submit button"
});

// 不好的做法：直接操作可能不存在的元素
await stagehand_act({
  action: "click the submit button"  // 可能失败
});

5. 数据提取 Schema 设计

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
// 好的 Schema 设计
{
  "type": "object",
  "properties": {
    "title": {
      "type": "string",
      "description": "Product title - main heading text"
    },
    "price": {
      "type": "number",
      "description": "Current price in USD without currency symbol"
    },
    "inStock": {
      "type": "boolean",
      "description": "Whether the product is currently available"
    },
    "reviews": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "rating": { "type": "number" },
          "comment": { "type": "string" }
        }
      },
      "description": "List of customer reviews"
    }
  },
  "required": ["title", "price"]
}

常见问题

Q: 如何获取 Browserbase API 密钥？

访问 Browserbase 官网：

  1. 注册账号
  2. 创建项目（获得 PROJECT_ID）
  3. 生成 API 密钥（获得 API_KEY）
  4. 配置到环境变量中

Q: 支持哪些浏览器？

Browserbase MCP Server 通过 Playwright 支持：

  • Chromium (推荐，默认)
  • Firefox
  • WebKit

云端浏览器由 Browserbase 托管和管理。

Q: 如何处理验证码？

1
2
3
4
5
6
7
8
# 方法1：使用 Vision 模型（GPT-4o 或 Claude）
--modelName openai/gpt-4o

# 方法2：保持会话，避免重复验证
--contextId ctx_123 --keepAlive

# 方法3：人工介入
# 暂停自动化，手动完成验证，然后继续

Q: 性能如何？

  • 导航速度: 2-5秒（取决于网页复杂度）
  • 操作延迟: 0.5-2秒（自然语言解析 + 执行）
  • 提取速度: 1-3秒（取决于数据量和 Schema 复杂度）
  • 并发支持: 多个独立浏览器会话

Q: 如何调试？

1
2
3
4
5
6
7
8
9
10
11
# 1. 启用控制台日志
# 访问 console://logs 资源查看浏览器日志

# 2. 捕获截图
# 使用 screenshot:// 资源查看当前页面状态

# 3. 使用 observe 工具
# 检查页面元素是否正确识别

# 4. 查看 Browserbase Dashboard
# 访问 Browserbase 控制台查看会话记录和调试信息

Q: 成本如何计算？

主要成本来源：

  1. Browserbase 服务费：按浏览器会话时间计费
  2. LLM API 费用：按 token 使用量计费

优化建议：

  • 使用 --keepAlive 复用会话
  • 选择 Gemini 模型降低 API 成本
  • 批量处理任务减少会话数

Q: 是否支持无头模式？

Browserbase 默认运行无头浏览器。如需查看浏览器界面，可以：

  1. 访问 Browserbase Dashboard 查看会话录像
  2. 使用 screenshot:// 资源查看快照
  3. 下载会话录像进行调试

评分详情

维度 评分 说明
功能性 4.9/5.0 自然语言控制、多模型支持，功能强大
文档质量 4.7/5.0 文档清晰，示例丰富，但可以更详细
社区活跃度 4.8/5.0 GitHub 活跃，Browserbase 官方维护
维护状态 4.9/5.0 持续更新，快速响应问题
代码质量 4.7/5.0 TypeScript 编写，代码规范
综合评分 4.8/5.0 顶级的 AI 浏览器自动化方案

总结

Browserbase MCP Server 是目前最先进的 AI 驱动浏览器自动化解决方案之一。它完美结合了 Stagehand 的智能自动化能力、Browserbase 的云端浏览器基础设施，以及 MCP 协议的标准化接口，为开发者提供了前所未有的便利性。

推荐指数: ⭐⭐⭐⭐⭐ (5/5)

适合你的情况：

  • ✅ 需要智能网页交互和自动化
  • ✅ 爬取需要复杂操作的动态网站
  • ✅ 构建 AI 驱动的测试系统
  • ✅ 需要高级反检测能力
  • ✅ 处理大规模自动化任务

不适合的情况：

  • ❌ 简单的静态页面爬取（过度工程化）
  • ❌ 极低成本预算（需要 Browserbase 和 LLM API）
  • ❌ 需要完全离线运行
  • ❌ 只需要简单的 HTTP 请求

相关资源

更新时间: 2025-10-14
数据来源: GitHub, 质量评分: 4.8/5.0

© 2026 Generative AI Discovery All Rights Reserved.
Theme by hiero