browser-use：AI 驱动的浏览器自动化神器——源码解析

随着前几篇文章的介绍，信任大家已经对 browser-use 有了初步的认识，本篇将深入的从源码的角度，来详细的探讨 browser-use的架构与核心实现逻辑。

一、项目信息

• 项目 github 地址：https://kkgithub.com/browser-use/browser-use
• 项目文档地址：https://docs.browser-use.com/introduction
• web-ui 地址：https://kkgithub.com/browser-use/web-ui

二、核心功能

browser-use 通过将 AI 大模型与浏览器自动化技术相结合，使得用户可以通过自然语言来控制浏览器执行各种自动化操作，如导航、点击、输入文本等，其核心功能如下：

• WebUI 界面：基于 Gradio 提供图形化操作界面，支持实时查看浏览器交互和屏幕录制功能。
• AI 决策能力：通过 LangChain 框架兼容多种 LLM（如 GPT-4、Claude、Deepseek 等），利用模型生成操作指令并处理复杂逻辑。
• 浏览器自动化：支持网页导航、表单填写、数据抓取等操作，结合 Playwright 实现高效的浏览器控制。
• ️ 多标签页管理：自动切换和管理多个浏览器标签页，提升多任务处理效率。
• 跨平台与自定义：支持本地或 Docker 部署，允许用户使用自己的浏览器实例（如 Chrome），保留登录状态和历史记录。

三、项目组件及相互关系

Agent：核心协调者，负责协调所有组件的工作，是整个流程的中心；

Controller： 动作执行者，负责执行各种浏览器操作，是 Agent 和 Browser 之间的桥梁；

Browser： 操作对象，负责实际的浏览器操作，与网页进行交互；

DomService： DOM 处理者，负责提取和处理 DOM 元素，为 Browser 提供支持；

MessageManager： 消息管理者，负责管理与 LLM 的消息交互；

LLM：决策者，负责根据当前状态决定下一步操作；

ProductTelemetry：记录者，负责记录各种事件，用于分析和改善；

下图是各组件关系（实线箭头表明主动调用关系，虚线箭头表明返回/被动关系。Agent作为核心协调者，管理各组件间的交互）：

四、项目代码结构

browser-use 的代码结构如下：

browser-use/
├── browser_use/           # 主要代码目录
│   ├── agent/             			# AI 代理相关代码
│   ├── browser/           	 # 浏览器控制相关代码
│   ├── controller/        	# 控制器和动作注册相关代码
│   ├── dom/               		  # DOM 操作和解析相关代码
│   └── telemetry/         # 遥测和数据收集相关代码
├── docs/                          # 文档
├── examples/              	# 使用示例
├── static/                				# 静态资源
├── tests/                 				# 测试代码
└── eval/                  				# 评估代码

五、组件功能

5.1 agent 组件

agent 组件是 Browser-Use 项目的核心组件，负责协调 LLM（大型语言模型）、浏览器和控制器之间的交互，实现 AI 代理控制浏览器的功能。

其主要功能如下：

1. 任务规划与执行：根据用户提供的任务描述，规划并执行一系列浏览器操作。
2. 状态管理：维护代理的状态信息，包括执行步骤、历史记录等。
3. 消息管理：管理与 LLM 的消息交互，包括系统提示、用户消息和模型响应。
4. 错误处理：处理执行过程中的各种错误，并提供重试机制。
5. 历史记录：记录代理执行的每一步操作及其结果，便于分析和调试。
6. GIF 生成：可选功能，将代理操作过程记录为 GIF 动画。

5.2 controller 组件

controller 组件负责注册、管理和执行各种浏览器操作动作。它充当了 agent 包和 browser 包之间的桥梁，将 LLM 生成的指令转换为具体的浏览器操作。

其主要功能如下：

1. 动作注册：提供装饰器机制，允许开发者注册自定义动作。
2. 动作执行：执行已注册的动作，处理参数验证和错误处理。
3. 动作管理：维护已注册动作的列表，提供动作描述和协助信息。
4. 参数验证：使用 Pydantic 模型验证动作参数，确保参数类型和格式正确。
5. 默认动作提供：内置了一系列常用的浏览器操作，如导航、点击、输入文本等。
6. 异步支持：支持同步和异步动作，自动将同步动作包装为异步

5.3 browser 组件

browser 组件负责浏览器的初始化、配置和控制。它封装了 Playwright 库的功能，提供了更高级的浏览器操作接口。

其主要功能如下：

1. 浏览器初始化与配置：负责初始化浏览器实例，并根据配置设置浏览器参数。
2. 浏览器上下文管理：创建和管理浏览器上下文，支持多标签页操作。
3. 页面导航与交互：提供页面导航、元素交互等功能。
4. 状态管理：维护浏览器状态，包括当前 URL、标题、标签页信息等。
5. DOM 操作：通过与 DOM 包的集成，提供 DOM 元素的查找、操作功能。
6. 错误处理：处理浏览器操作过程中的各种错误。

5.4 dom 组件

dom 组件负责处理和表明浏览器的文档对象模型(Document Object Model)。

其主要功能如下：

1. DOM树构建与管理：通过DomService类，从浏览器页面中提取DOM结构并构建成树形结构。
2. 可点击元素识别：识别和管理页面中的可点击元素，支持用户交互。
3. DOM历史记录处理：通过HistoryTreeProcessor服务，处理DOM元素的历史记录，支持元素的跟踪和比较。
4. 视口信息管理：跟踪元素在视口中的位置和可见性。

5.5 telemetry 组件

telemetry 组件是 Browser-Use 项目的辅助组件，负责收集和发送匿名使用数据，协助开发者了解项目的使用情况和性能表现。

其主要功能如下：

1. 匿名数据收集：收集用户的匿名使用数据，如代理运行情况、步骤执行、注册的功能等。
2. 事件跟踪：定义和跟踪各种遥测事件，如代理启动、步骤执行、代理结束等。
3. 数据发送：将收集的数据发送到 PostHog 分析平台。
4. 用户隐私保护：提供禁用遥测功能的选项，尊重用户隐私。
5. 用户标识管理：生成和管理匿名用户标识符，用于关联同一用户的数据。

六、执行流程

6.1 初始化阶段

初始化阶段建立了代理运行所需的所有组件和环境，主要包括以下步骤：

• 用户创建代理：用户提供任务描述、语言模型和浏览器实例，创建 Agent 对象
• 初始化消息管理器：Agent 初始化 MessageManager，设置系统提示和任务消息
• 初始化控制器：Agent 初始化 Controller，注册各种浏览器操作
• 记录遥测事件：Agent 通过 ProductTelemetry 记录代理启动事件
• 完成初始化：Agent 向用户返回初始化完成的信息

6.2 执行循环阶段

执行循环阶段是整个流程的核心，代理会重复执行以下步骤，直到任务完成或达到最大步骤数。主要包括以下步骤：

1. 获取浏览器状态：

Agent 从 Browser 获取当前状态

Browser 通过 DomService 获取 DOM 元素和可点击元素

Browser 返回浏览器状态给 Agent

2. 准备 LLM 输入：

Agent 将浏览器状态添加到 MessageManager

Agent 从 MessageManager 获取完整的消息列表

3. 获取下一步操作：

Agent 将消息发送给 LLM

LLM 返回 AgentOutput，包含思考过程和要执行的动作

Agent 将模型输出添加到 MessageManager

4. 执行动作：

Agent 通过 Controller 执行动作

Controller 根据动作类型调用 Browser 的不同方法：

导航操作：导航到指定 URL

点击操作：点击页面上的元素

输入操作：在元素中输入文本

完成操作：标记任务完成

Controller 返回 ActionResult 给 Agent

5. 记录和更新状态：

Agent 通过 ProductTelemetry 记录步骤执行事件

Agent 更新自身状态，包括成功/失败状态

这个循环体现了 Browser-Use 项目的核心功能：通过 LLM 理解当前浏览器状态，决定下一步操作，并通过控制器执行操作，实现自动化浏览器任务。

6.3 结束阶段

当任务完成或达到最大步骤数时，代理会执行以下步骤来结束整个事件循环：

1. 记录结束事件：Agent 通过 ProductTelemetry 记录代理结束事件。
2. 返回历史记录：Agent 向用户返回 AgentHistoryList，包含所有步骤的详细信息。
3. 可选生成 GIF：如果启用了 GIF 生成功能，Agent 会处理历史记录和截图，生成一个展示整个过程的 GIF 文件。