Open Browser

基于 TypeScript 的 AI 自主网页浏览框架。

---

让 AI Agent 拥有浏览器。它可以自动点击、输入、导航并提取数据——在任何网站上自主完成任务。该框架基于 Playwright 构建，并对 OpenAI、Anthropic 和 Google 模型提供一流的支持。

自 v1.0 版本起已可用于生产环境。 欢迎贡献代码。

为什么选择 Open Browser？

• 自主 Agent：通过自然语言描述任务，AI Agent 即可导航网页并完成任务——无需手动编写脚本即可实现点击、输入、滚动和数据提取。
• 多模型支持：通过 Vercel AI SDK 开箱即用，支持 OpenAI、Anthropic 和 Google 模型——只需一个 flag 即可轻松切换模型。
• 交互式 REPL：进入实时浏览器会话并交互式发出指令——非常适合调试、原型设计和探索。
• 沙箱环境执行：在资源受限的环境中运行 Agent，支持 CPU/内存监控、超时设置和域名限制。
• 生产就绪：提供停滞检测、成本追踪、会话管理、重放录制和全面的错误处理。
• 开源：采用 MIT 协议，完全可扩展，支持自定义 API Key。

快速开始

# 安装依赖
bun install

# 配置 API keys
cp .env.example .env
# 在 .env 文件中填入你的 API keys

# 运行 Agent
bun run open-browser run "Find the top story on Hacker News and summarize it"

# 或者以交互模式打开浏览器
bun run open-browser interactive

架构

Open Browser 是一个包含三个包的 monorepo（单体仓库）：

包名	描述
open-browser	核心库 —— Agent 逻辑、浏览器控制、DOM 分析、LLM 集成
@open-browser/cli	用于运行 Agent 和浏览器指令的命令行界面 (CLI)
@open-browser/sandbox	带有资源限制和监控的沙箱执行环境

CLI 指令

运行 AI Agent

open-browser run <task> [options]

描述你想要执行的任务，Agent 会处理剩下的工作。

# 搜索并提取信息
open-browser run "Find the price of the MacBook Pro on apple.com"

# 填写表单
open-browser run "Sign up for the newsletter on example.com with test@email.com"

# 多步骤工作流
open-browser run "Go to GitHub, find the open-browser repo, and star it"

选项	描述
-m, --model <name>	使用的模型 (默认: gpt-4o)
-p, --provider <name>	服务商: openai, anthropic, google
--headless / --no-headless	显示或隐藏浏览器窗口
--max-steps <number>	Agent 最大步骤数 (默认: 25)
-v, --verbose	显示详细步骤信息
--no-cost	隐藏成本追踪

浏览器指令

open-browser open <url>               # 打开 URL
open-browser click <selector>         # 点击元素
open-browser type <selector> <text>   # 在输入框中输入
open-browser screenshot [output]     # 截屏
open-browser eval <script>           # 在页面执行 JavaScript
open-browser extract <query>         # 以 markdown 格式提取内容
open-browser state                   # 显示当前 URL、标题和标签页
open-browser sessions                # 列出活动的浏览器会话

交互式 REPL

open-browser interactive

进入一个实时的 browser> 提示符，拥有完全控制权：

browser> open https://news.ycombinator.com
browser> extract "top 5 stories with titles and points"
browser> click .morelink
browser> screenshot front-page.png
browser> help

作为库使用

import { Agent, createViewport, createModel } from 'open-browser'

const viewport = await createViewport({ headless: true })
const model = createModel('openai', 'gpt-4o')

const agent = new Agent({
  viewport,
  model,
  task: 'Go to example.com and extract the main heading',
  settings: {
    stepLimit: 50,
    enableScreenshots: true,
  },
})

const result = await agent.run()
console.log(result)

沙箱执行

在资源限制和监控下运行 Agent：

import { Sandbox } from '@open-browser/sandbox'

const sandbox = new Sandbox({
  timeout: 300_000, // 5 分钟超时
  maxMemoryMB: 512, // 内存限制
  allowedDomains: ['example.com'],
  stepLimit: 100,
  captureOutput: true,
})

const result = await sandbox.run({
  task: 'Complete the checkout form',
  model: languageModel,
})

console.log(result.metrics) // 步骤、访问的 URL、CPU 时间

配置

环境变量

# LLM 服务商 Keys (至少需要一个)
OPENAI_API_KEY=sk-...
ANTHROPIC_API_KEY=sk-...
GOOGLE_GENERATIVE_AI_API_KEY=...