brower-use框架

转载学习：AI操作网页：browser-use和AI大模型互动解析

开源的 AI 驱动的浏览器自动化框架browser-use：https://github.com/browser-use/browser-use

browser-use框架的核心功能

1. 自动化浏览器任务
   • 支持复杂操作：购物结账、LinkedIn数据同步、简历投递、文档生成等。
   • 开源框架，通过AI代理实现网页操作自动化，如将杂货商品添加到购物车并完成结账等。

技术实现解析

高效的大模型交互设计

• SystemMessage：定义AI角色与规则，使用Markdown结构化提示（如输入格式、响应规则）。
• HumanMessage：动态传递任务指令、历史记录（标记[Task history memory]）、当前页面状态（URL、交互元素等）。
• AIMessage：输出严格遵循JSON格式，包含状态评估（evaluation_previous_goal）、记忆（memory）、下一步目标（next_goal）及操作序列（action）。
• ToolMessage：调用浏览器操作工具（如点击、输入），记录执行结果。

关键交互技巧

• 结构化输出控制：通过LangChain的with_structured_output强制AI返回预设JSON结构。
• 动态任务拆分：将复杂任务分解为原子操作（如“打开网址→输入密码→点击登录”）。
• 多模态输入支持：结合文本描述与页面截图（标注交互元素索引），提升操作准确性。
• 状态跟踪：memory字段记录进度（如“已完成2/5步骤”），避免任务中断。

可复用的交互设计Tips

1. Markdown结构化提示：提升系统指令可读性。
2. 输入标准化：在SystemMessage中定义特殊数据结构（如交互元素[index]<button>Submit</button>）。
3. 记忆管理：通过current_state.memory让AI自主记录关键信息。
4. 消息分段：用标记分隔历史记录与实时状态（如[Current state starts here]）。
5. 示例引导：用AIMessage展示预期输出格式。
6. 工具链集成：ToolMessage实现外部操作（如浏览器控制）。
7. 输出强约束：利用LangChain严格限制AI响应结构。

识别页面内容

结构化文本描述

• 交互元素标记：页面元素被转化为带索引的标记格式

  [index]<type>text</type>
  

  （如

  [10]<button>账号登录</button>
  

  ），其中：

  • index：唯一数字标识符（如10）
  • type：HTML元素类型（如按钮、输入框）
  • text：元素描述文本

• 非交互元素标注：无索引标记（如 []Non-interactive text）仅提供上下文信息。

• 页面边界标识：通过 [Start of page] 和 [End of page] 明确页面内容范围。

视觉辅助（截图+标注）

• 图像输入：提供页面截图，并在图片中直接标注元素索引（如将索引号显示在元素右上角）。
• 多模态支持：视觉信息帮助大模型理解页面布局，尤其对复杂组件（如嵌套表单）识别更精准。

动态状态反馈

• 当前页面信息：实时提供
  • URL地址
  • 打开的标签页列表
  • 可视区域内所有交互元素列表
  • 当前步骤进度（如 Current step: 2/100）

历史记忆与上下文

• 任务历史标记：通过

  [Your task history memory starts here]
  

  和

  [Task history memory ends]
  

  分隔历史记录，确保大模型跟踪操作流程。

  

• 记忆字段：在输出中设计 memory 字段，要求大模型主动记录进度（如“已完成3/10个步骤”）。

严格的输出约束

• JSON结构化输出：强制大模型返回固定格式的JSON，包含

  {
    "current_state": {
      "evaluation_previous_goal": "状态分析",
      "memory": "进度记忆",
      "next_goal": "下一步目标"
    },
    "action": [{"操作类型": {"参数": "值"}}] // 如点击、输入文本
  }
  

• LangChain工具支持：使用 with_structured_output 方法强制输出符合预定结构。

关键优势

• 非多模态兼容：仅凭文本描述即可完成任务（无截图时仍可操作）。
• 防误操作机制：仅允许通过索引号操作标记为交互的元素，避免误触非交互内容。
• 容错设计：当元素缺失时，提示大模型尝试替代方案（如后退、新标签页搜索）。

示例：在登录页面中，大模型通过索引定位到 [5]<input>账户名（用户名框）、[6]<input>密码（密码框）、[10]<button>账号登录（提交按钮），并生成操作序列：输入文本→输入密码→点击登录。

这种结合结构化描述、视觉辅助和严格输出控制的方法，使大模型能高效准确地识别并操作网页组件。

总结

browser-use通过精细的提示工程和多角色消息协作（System/Human/AI/ToolMessage），实现了复杂网页任务的自动化。其核心是将自然语言指令转化为可执行的浏览器操作序列，并通过状态跟踪、结构化输出确保任务可靠性。提出的7条交互设计原则（如Markdown提示、动态记忆管理）可泛化至其他AI代理场景。