1. 项目概述当AI学会“动手”操作浏览器最近在AI圈子里一个话题讨论得挺热我们能不能让AI不只是“动嘴皮子”回答问题而是真正“动手”去完成一些具体的、需要操作电脑的任务比如让它自动帮你整理浏览器书签、填写在线表格、甚至完成一些简单的网页数据抓取和整理。听起来像是科幻电影里的场景但现在通过结合opencode和browser-use这两个工具我们真的可以开始尝试了。简单来说这个项目就是一次“AI单智能体”的实战演练。opencode是一个强大的AI智能体开发框架它让AI具备了执行代码、调用工具的能力而browser-use则是一个专门为AI设计的浏览器自动化库它把复杂的网页操作点击、输入、滚动封装成了AI能理解的简单指令。把它们俩组合在一起就等于给AI装上了一双能在浏览器里“干活”的手。我花了些时间把这两个工具搭起来跑了一遍过程有顺利也有踩坑。这篇文章我就以一个实践者的角度来复盘这次“和AI一起搞事情”的全过程。无论你是对AI应用开发感兴趣的开发者还是想了解如何让AI自动化处理日常网页任务的产品经理甚至是好奇AI现在到底能做什么的普通用户都能从这篇实操记录里看到当前技术能做到的边界、实现的细节以及那些只有亲手做过才会知道的注意事项。2. 核心思路与工具选型为什么是opencode browser-use在决定用opencode和browser-use之前我也考察过其他方案。市面上让AI操作浏览器的思路大致分两种一种是给AI一个非常详细的、步骤化的操作说明书比如用Playwright或Selenium写好的脚本AI只是按部就班执行另一种是让AI完全自主决策通过自然语言指令去理解网页并操作。前者灵活度差后者对AI的认知和规划能力要求极高容易出错。opencode和browser-use的组合找到了一条不错的中间路径。2.1 opencode为AI赋予“执行力”的框架opencode的核心思想是“将自然语言指令转化为可执行的动作”。它本身不是一个AI模型而是一个框架和一套规范。你可以把它理解为一个“AI智能体的操作系统”或者“工具调用中介”。它的工作流程通常是这样的你给opencode一个任务描述比如“帮我在GitHub上搜索关于机器学习的最新项目”opencode会利用其背后连接的大语言模型比如GPT-4、Claude等来理解这个任务并将其分解成一系列具体的、可执行的步骤。这些步骤可能包括“打开浏览器导航到github.com”“在搜索框输入‘machine learning’”“点击‘Search’按钮”“解析第一页的项目列表并返回标题和链接”。关键在于opencode定义了一套标准的“技能(Skills)”接口。一个“技能”就是一个AI可以调用的函数。browser-use库提供的浏览器操作能力就是以“技能”的形式注册到opencode中的。这样当AI规划出“点击某个按钮”的步骤时它实际上是在调用browser-use提供的click技能。选择opencode的理由很充分标准化与生态它正在尝试建立AI智能体工具调用的标准类似agents.md这类规范文件试图描述的东西这意味着未来会有更多工具兼容它可扩展性强。与模型解耦你可以根据任务复杂度、成本等因素灵活选择背后的大语言模型而不需要重写核心逻辑。聚焦规划与控制opencode主要负责任务分解、步骤规划和状态管理把具体的“脏活累活”交给像browser-use这样的专业工具架构清晰。2.2 browser-useAI操作浏览器的“手”如果说opencode是大脑那browser-use就是那双灵巧的手。它是一个Python库基于真实的浏览器通过Playwright驱动来工作。它的设计目标就是“让AI能像人一样看到和操作网页”。browser-use有几个对AI特别友好的设计简化的操作API它提供了click,type,scroll,wait_for_element等高层级指令AI不需要关心底层DOM选择器如何编写只需要描述目标如“点击那个蓝色的‘提交’按钮”。网页内容理解它能将当前页面的HTML结构、文本内容、可交互元素链接、按钮、输入框等信息以一种结构化、简洁的方式提取出来并传递给AI。这相当于给AI提供了“视觉”输入让它知道页面上有什么。自动等待与重试网页加载有快有慢browser-use内置了智能等待和元素查找重试机制提高了自动化脚本的鲁棒性。这个组合的优势在于opencode负责高层次的意图理解和任务规划browser-use负责低层次、稳定可靠的浏览器交互。两者通过清晰的接口连接使得构建一个能处理复杂网页任务的AI智能体变得可行。注意这里要澄清一个常见误解。opencode的安装报错“无法将‘opencode’项识别为 cmdlet、函数、脚本文件或可运行程序的名称”通常发生在Windows PowerShell环境下误以为opencode是一个全局命令。实际上opencode更多时候是一个需要导入的Python包或一个开发框架并非直接敲击的命令行工具。正确的使用方式是在Python脚本中import相关模块。3. 环境搭建与核心配置详解理论讲清楚了接下来就是动手搭建。这个过程是后续一切工作的基础配置不当会导致各种稀奇古怪的问题。3.1 基础环境准备我选择在Ubuntu 22.04 LTS系统上进行Windows和macOS的步骤大同小异主要区别在包管理工具和浏览器驱动安装上。首先确保你的Python版本在3.8以上。创建一个独立的虚拟环境是绝对的好习惯能避免包依赖冲突。# 创建项目目录并进入 mkdir ai-browser-agent cd ai-browser-agent # 创建Python虚拟环境 python3 -m venv venv # 激活虚拟环境 (Linux/macOS) source venv/bin/activate # 激活虚拟环境 (Windows PowerShell) # .\venv\Scripts\Activate.ps13.2 安装关键依赖核心就是安装opencode和browser-use。由于它们都处于活跃开发阶段直接从GitHub仓库安装最新版本往往是更好的选择。# 安装 browser-use pip install “browser-use[playwright]” # 安装 playwright的浏览器内核Chromium, Firefox, WebKit playwright install chromium # 安装 opencode。注意opename可能指代不同的具体包这里假设我们安装其核心SDK # 一种常见方式是安装 opencode 或 opencode-sdk但需根据其官方文档确认。 # 例如如果它在PyPI上可能是 # pip install opencode # 但更可能的是需要从源码安装因为生态尚未完全稳定。 # 这里我们模拟从git仓库安装一个假设的opencode核心库 # pip install githttps://github.com/opencode/opencode.git这里是一个巨大的实操坑点opencode作为一个概念或一套规范其具体的实现库名称可能五花八门。你可能遇到的是opencode-sdk,opencode-agent, 甚至是某个公司内部封装的版本。务必查阅你手头资料或项目指引中明确的安装指令。网络热词中提到的opencode go、opencode desktop可能是不同的发行版或客户端。本文基于其作为Python框架的核心逻辑进行阐述。3.3 配置AI模型与API密钥opencode需要连接一个大语言模型来理解任务和做规划。这里以OpenAI的GPT模型为例。获取API密钥前往OpenAI平台创建API Key。设置环境变量这是推荐的安全做法避免将密钥硬编码在代码中。# 在终端中设置临时 export OPENAI_API_KEY‘你的-api-key-here’ # 或者在项目根目录创建 .env 文件写入 # OPENAI_API_KEY你的-api-key-here然后在Python代码中可以使用os.getenv来读取。3.4 编写第一个“Hello World”智能体我们来创建一个最简单的智能体验证环境是否工作。这个智能体的任务是让AI打开浏览器访问百度首页并在搜索框输入“Hello AI”。首先我们需要创建一个browser-use的“环境”Environment并将其技能注册到opencode的智能体中。import asyncio import os from browser_use import Agent, Browser, BrowserConfig, ActionResult from browser_use.browser.browser import BrowserContext # 假设我们使用一个兼容opencode理念的Agent类这里用browser-use自带的Agent做示例 # 实际opencode框架可能提供自己的Agent类需要导入。 async def main(): # 1. 初始化浏览器配置 browser_config BrowserConfig( headlessFalse, # 设为True则不显示浏览器窗口后台运行 disable_securityTrue, # 绕过一些安全限制慎用于生产环境 ) # 2. 创建浏览器实例和上下文 browser Browser() context: BrowserContext await browser.new_context(browser_config) # 3. 创建AI智能体并传入浏览器上下文作为其可用的“工具” # 这里假设Agent能自动识别context中的技能 agent Agent( task“打开百度首页(https://www.baidu.com)在搜索框里输入‘Hello AI’但不要点击搜索。”, browser_contextcontext, llm_config{ # 配置使用的LLM ‘provider’: ‘openai’, ‘model’: ‘gpt-4-turbo-preview’, ‘api_key’: os.getenv(‘OPENAI_API_KEY’), } ) # 4. 运行智能体 print(“AI智能体开始执行任务...”) try: result: ActionResult await agent.run() print(f“任务完成最终状态{result.status}”) print(f“AI执行的历史记录{result.history}”) except Exception as e: print(f“任务执行出错{e}”) finally: # 5. 清理资源 await context.close() await browser.close() if __name__ ‘__main__’: asyncio.run(main())关键配置解析与避坑指南headless模式开发调试时务必设为False这样你能亲眼看到AI每一步操作便于排查问题。上线或批量运行时可以改为True以节省资源。disable_security这个选项能解决很多因浏览器安全策略如跨域、弹窗拦截导致的操作失败。但它降低了浏览器安全性仅建议在可控的测试环境中使用。LLM模型选择gpt-4-turbo-preview在复杂任务规划和理解上远优于gpt-3.5-turbo。对于网页操作这种需要多步骤推理的任务建议使用能力更强的模型虽然成本更高但成功率提升显著。异步编程browser-use和许多AI SDK都基于异步I/Oasyncio。你的主函数必须是async并用asyncio.run()调用。同步环境下直接await会报错。资源清理一定要在finally块中关闭browser_context和browser否则Playwright驱动的浏览器进程可能会残留在后台消耗内存。运行这段代码你应该能看到一个浏览器窗口自动打开加载百度并在搜索框中输入“Hello AI”。如果成功了恭喜你你的AI已经迈出了“动手”的第一步。4. 实战任务拆解让AI自动完成GitHub仓库搜索与摘要为了展示opencodebrowser-use的真正潜力我们设计一个更复杂的实战任务“请搜索GitHub上最近一周内与‘AI agent’相关的、Star数超过100的Python项目并列出前5个项目的名称、链接和简要描述。”这个任务包含了导航、输入、交互点击搜索、可能翻页、信息提取、条件判断和结果整理等多个环节非常适合检验我们智能体的能力。4.1 任务规划与技能分解首先我们作为设计者要在心里帮AI或者说帮我们自己把任务分解成browser-use能执行的原子操作导航打开https://github.com。定位与输入找到搜索框输入查询词。这里有个技巧GitHub搜索支持高级语法。我们的查询词可以构造为ai agent language:python stars:100 pushed:2024-05-20(假设当前日期是2024-05-27)。执行搜索点击搜索按钮或按回车。等待与解析等待结果页面加载完成然后解析页面结构提取仓库列表。信息提取从每个仓库条目中提取名称含链接、描述。可能还需要处理分页但任务只要前5个第一页通常就够了。结果格式化将提取的信息整理成结构化的数据如列表字典。browser-use提供了相应的技能来支持这些操作。但AI需要知道在什么时候调用什么技能以及用什么参数。这就是opencode或我们编写的控制逻辑要解决的问题。4.2 实现代码与关键逻辑我们不能完全依赖AI从零开始规划所有细节尤其是涉及精确搜索语法和复杂页面解析时。更好的模式是“人机协作”我们编写主干逻辑和关键步骤让AI去处理其中需要灵活判断的部分比如元素定位、内容理解。以下是实现这个任务的增强版代码import asyncio import os from datetime import datetime, timedelta from browser_use import Agent, Browser, BrowserConfig, ActionResult from browser_use.browser.browser import BrowserContext from browser_use.browser.actions import ClickAction, TypeAction, WaitAction async def github_search_agent(): browser_config BrowserConfig(headlessFalse, disable_securityTrue) browser Browser() context: BrowserContext await browser.new_context(browser_config) # 计算一周前的日期 one_week_ago (datetime.now() - timedelta(days7)).strftime(‘%Y-%m-%d’) # 构建高级搜索查询 search_query f“ai agent language:python stars:100 pushed:{one_week_ago}” # 我们创建一个更具体的任务指令 task_description f“”” 请执行以下GitHub搜索任务 1. 访问 https://github.com。 2. 在页面顶部的搜索框内输入以下精确查询词{search_query} 3. 执行搜索可以按回车或点击搜索按钮。 4. 等待搜索结果页面完全加载。 5. 从结果中提取最靠前的5个仓库的信息。对于每个仓库我需要 - 仓库名称带链接 - 仓库的简要描述 请将最终结果以清晰的列表格式返回。 “”” agent Agent( tasktask_description, browser_contextcontext, llm_config{ ‘provider’: ‘openai’, ‘model’: ‘gpt-4-turbo-preview’, ‘api_key’: os.getenv(‘OPENAI_API_KEY’), }, # 可以设置超时和最大步骤数防止AI陷入死循环 max_steps20, timeout120, ) print(f“AI智能体开始执行任务搜索词{search_query}”) try: result: ActionResult await agent.run() if result.status ‘success’: print(“\n 任务成功AI返回的结果如下”) # 打印AI在最后一步给出的总结性输出 # 注意实际结果可能在result.history的最后几条消息里或者result.final_output中 # 这里需要根据Agent类的实际设计来提取。 # 假设result有一个summary或final_answer属性 final_answer getattr(result, ‘final_answer’, result.history[-1][‘content’] if result.history else ‘No output’) print(final_answer) else: print(f“任务未完全成功状态{result.status}”) print(“执行历史”) for step in result.history[-10:]: # 打印最后10步 print(f“ {step}”) except Exception as e: print(f“任务执行过程发生异常{e}”) finally: await context.close() await browser.close() if __name__ ‘__main__’: asyncio.run(github_search_agent())4.3 执行过程观察与调试技巧运行这个脚本你会观察到AI执行任务的整个过程。这本身就是一个非常有趣的调试和学习环节页面导航AI会先让浏览器打开GitHub主页。元素定位AI会“观察”页面识别出搜索框。它可能通过分析页面文本“Search GitHub”或者查找input标签来完成。输入与执行AI将我们构造好的复杂搜索词输入进去并触发搜索。这里可能会遇到第一个坑搜索框可能是一个需要先点击才能激活的组件。好的AI如GPT-4会先执行一个click动作再执行type。结果解析这是最具挑战的部分。GitHub搜索结果页的HTML结构相对复杂。AI需要理解整个列表区域并从中识别出每个独立的仓库条目article标签或具有特定class的div然后进一步提取里面的链接和描述文本。实操心得与提升成功率的技巧提供更明确的上下文可以在task_description中加入对页面结构的提示。例如“搜索结果通常在一个包含很多article标签或 class 为repo-list的容器里。每个仓库条目通常包含一个h3标签内的链接作为仓库名和一个p标签作为描述。”分步验证对于复杂任务不要指望AI一次成功。可以先让AI完成“打开GitHub并搜索”验证搜索是否正确。成功后再增加“提取第一条结果”的子任务逐步迭代。利用browser-use的观察状态browser-use会向AI模型发送当前页面的简化DOM和文本快照。如果AI总是找不到正确元素可能是这个快照信息不够或太杂乱。可以考虑在创建BrowserConfig时调整viewport_size或等待特定元素出现后再让AI行动确保页面稳定。手动干预与技能扩展有时AI的解析逻辑就是写不好。这时我们可以选择“混合模式”。即用browser-use的底层Playwright能力自己写一段精确的CSS选择器代码来提取数据然后将这个函数封装成一个新的“技能”注册给AI调用。这体现了opencode框架的扩展性优势。5. 常见问题、排查技巧与进阶思考在实际操作中你一定会遇到各种问题。下面是我在实战中遇到的一些典型情况及其解决方法。5.1 AI行为异常或陷入循环现象AI反复执行同一个操作如不断点击同一个按钮或者执行的动作完全偏离目标。排查检查headlessFalse首先确保浏览器窗口可见观察AI具体在做什么。很多时候问题一目了然。审查任务指令你的task描述是否足够清晰、无歧义避免使用“那个”、“这个”等指代不清的词。多用明确的标识如“带有‘Search’文字的按钮”、“顶部导航栏”。查看AI的“思考”过程一些Agent实现会输出“思考链”Chain-of-Thought。如果能看到就能发现AI在哪里理解错了。可以在初始化Agent时设置verboseTrue或查看result.history中的中间消息。降低任务复杂度将一个大任务拆分成多个小任务逐个让AI完成并验证。解决优化提示词这是最有效的方法。在指令中明确步骤、预期目标和页面特征。切换LLM模型如果使用gpt-3.5-turbo效果不佳果断升级到gpt-4系列。设置限制使用max_steps和timeout参数防止无限循环浪费资源。5.2 页面元素找不到或操作失败现象AI报告找不到元素或者点击/输入没有效果。排查页面加载时机AI动作太快页面还没加载完。在关键操作前让AI执行一个wait_for_navigation或wait_for_element的技能。iframe或Shadow DOM目标元素可能嵌套在iframe或Shadow DOM内部。browser-use和基础Playwright需要特殊处理才能访问这些元素。这通常是高级话题可能需要手动编写代码切换上下文。动态内容页面是JavaScript重度驱动的单页应用SPA内容动态加载。AI看到的页面快照可能不是最终状态。需要增加等待时间或者等待特定的网络请求完成。解决显式等待在任务描述中强调“等待页面完全加载”、“直到看到XX元素再操作”。使用更稳定的选择器虽然AI自动定位但我们可以在提示词中建议它使用更稳定的属性如>
1. 项目概述当AI学会“动手”操作浏览器最近在AI圈子里一个话题讨论得挺热我们能不能让AI不只是“动嘴皮子”回答问题而是真正“动手”去完成一些具体的、需要操作电脑的任务比如让它自动帮你整理浏览器书签、填写在线表格、甚至完成一些简单的网页数据抓取和整理。听起来像是科幻电影里的场景但现在通过结合opencode和browser-use这两个工具我们真的可以开始尝试了。简单来说这个项目就是一次“AI单智能体”的实战演练。opencode是一个强大的AI智能体开发框架它让AI具备了执行代码、调用工具的能力而browser-use则是一个专门为AI设计的浏览器自动化库它把复杂的网页操作点击、输入、滚动封装成了AI能理解的简单指令。把它们俩组合在一起就等于给AI装上了一双能在浏览器里“干活”的手。我花了些时间把这两个工具搭起来跑了一遍过程有顺利也有踩坑。这篇文章我就以一个实践者的角度来复盘这次“和AI一起搞事情”的全过程。无论你是对AI应用开发感兴趣的开发者还是想了解如何让AI自动化处理日常网页任务的产品经理甚至是好奇AI现在到底能做什么的普通用户都能从这篇实操记录里看到当前技术能做到的边界、实现的细节以及那些只有亲手做过才会知道的注意事项。2. 核心思路与工具选型为什么是opencode browser-use在决定用opencode和browser-use之前我也考察过其他方案。市面上让AI操作浏览器的思路大致分两种一种是给AI一个非常详细的、步骤化的操作说明书比如用Playwright或Selenium写好的脚本AI只是按部就班执行另一种是让AI完全自主决策通过自然语言指令去理解网页并操作。前者灵活度差后者对AI的认知和规划能力要求极高容易出错。opencode和browser-use的组合找到了一条不错的中间路径。2.1 opencode为AI赋予“执行力”的框架opencode的核心思想是“将自然语言指令转化为可执行的动作”。它本身不是一个AI模型而是一个框架和一套规范。你可以把它理解为一个“AI智能体的操作系统”或者“工具调用中介”。它的工作流程通常是这样的你给opencode一个任务描述比如“帮我在GitHub上搜索关于机器学习的最新项目”opencode会利用其背后连接的大语言模型比如GPT-4、Claude等来理解这个任务并将其分解成一系列具体的、可执行的步骤。这些步骤可能包括“打开浏览器导航到github.com”“在搜索框输入‘machine learning’”“点击‘Search’按钮”“解析第一页的项目列表并返回标题和链接”。关键在于opencode定义了一套标准的“技能(Skills)”接口。一个“技能”就是一个AI可以调用的函数。browser-use库提供的浏览器操作能力就是以“技能”的形式注册到opencode中的。这样当AI规划出“点击某个按钮”的步骤时它实际上是在调用browser-use提供的click技能。选择opencode的理由很充分标准化与生态它正在尝试建立AI智能体工具调用的标准类似agents.md这类规范文件试图描述的东西这意味着未来会有更多工具兼容它可扩展性强。与模型解耦你可以根据任务复杂度、成本等因素灵活选择背后的大语言模型而不需要重写核心逻辑。聚焦规划与控制opencode主要负责任务分解、步骤规划和状态管理把具体的“脏活累活”交给像browser-use这样的专业工具架构清晰。2.2 browser-useAI操作浏览器的“手”如果说opencode是大脑那browser-use就是那双灵巧的手。它是一个Python库基于真实的浏览器通过Playwright驱动来工作。它的设计目标就是“让AI能像人一样看到和操作网页”。browser-use有几个对AI特别友好的设计简化的操作API它提供了click,type,scroll,wait_for_element等高层级指令AI不需要关心底层DOM选择器如何编写只需要描述目标如“点击那个蓝色的‘提交’按钮”。网页内容理解它能将当前页面的HTML结构、文本内容、可交互元素链接、按钮、输入框等信息以一种结构化、简洁的方式提取出来并传递给AI。这相当于给AI提供了“视觉”输入让它知道页面上有什么。自动等待与重试网页加载有快有慢browser-use内置了智能等待和元素查找重试机制提高了自动化脚本的鲁棒性。这个组合的优势在于opencode负责高层次的意图理解和任务规划browser-use负责低层次、稳定可靠的浏览器交互。两者通过清晰的接口连接使得构建一个能处理复杂网页任务的AI智能体变得可行。注意这里要澄清一个常见误解。opencode的安装报错“无法将‘opencode’项识别为 cmdlet、函数、脚本文件或可运行程序的名称”通常发生在Windows PowerShell环境下误以为opencode是一个全局命令。实际上opencode更多时候是一个需要导入的Python包或一个开发框架并非直接敲击的命令行工具。正确的使用方式是在Python脚本中import相关模块。3. 环境搭建与核心配置详解理论讲清楚了接下来就是动手搭建。这个过程是后续一切工作的基础配置不当会导致各种稀奇古怪的问题。3.1 基础环境准备我选择在Ubuntu 22.04 LTS系统上进行Windows和macOS的步骤大同小异主要区别在包管理工具和浏览器驱动安装上。首先确保你的Python版本在3.8以上。创建一个独立的虚拟环境是绝对的好习惯能避免包依赖冲突。# 创建项目目录并进入 mkdir ai-browser-agent cd ai-browser-agent # 创建Python虚拟环境 python3 -m venv venv # 激活虚拟环境 (Linux/macOS) source venv/bin/activate # 激活虚拟环境 (Windows PowerShell) # .\venv\Scripts\Activate.ps13.2 安装关键依赖核心就是安装opencode和browser-use。由于它们都处于活跃开发阶段直接从GitHub仓库安装最新版本往往是更好的选择。# 安装 browser-use pip install “browser-use[playwright]” # 安装 playwright的浏览器内核Chromium, Firefox, WebKit playwright install chromium # 安装 opencode。注意opename可能指代不同的具体包这里假设我们安装其核心SDK # 一种常见方式是安装 opencode 或 opencode-sdk但需根据其官方文档确认。 # 例如如果它在PyPI上可能是 # pip install opencode # 但更可能的是需要从源码安装因为生态尚未完全稳定。 # 这里我们模拟从git仓库安装一个假设的opencode核心库 # pip install githttps://github.com/opencode/opencode.git这里是一个巨大的实操坑点opencode作为一个概念或一套规范其具体的实现库名称可能五花八门。你可能遇到的是opencode-sdk,opencode-agent, 甚至是某个公司内部封装的版本。务必查阅你手头资料或项目指引中明确的安装指令。网络热词中提到的opencode go、opencode desktop可能是不同的发行版或客户端。本文基于其作为Python框架的核心逻辑进行阐述。3.3 配置AI模型与API密钥opencode需要连接一个大语言模型来理解任务和做规划。这里以OpenAI的GPT模型为例。获取API密钥前往OpenAI平台创建API Key。设置环境变量这是推荐的安全做法避免将密钥硬编码在代码中。# 在终端中设置临时 export OPENAI_API_KEY‘你的-api-key-here’ # 或者在项目根目录创建 .env 文件写入 # OPENAI_API_KEY你的-api-key-here然后在Python代码中可以使用os.getenv来读取。3.4 编写第一个“Hello World”智能体我们来创建一个最简单的智能体验证环境是否工作。这个智能体的任务是让AI打开浏览器访问百度首页并在搜索框输入“Hello AI”。首先我们需要创建一个browser-use的“环境”Environment并将其技能注册到opencode的智能体中。import asyncio import os from browser_use import Agent, Browser, BrowserConfig, ActionResult from browser_use.browser.browser import BrowserContext # 假设我们使用一个兼容opencode理念的Agent类这里用browser-use自带的Agent做示例 # 实际opencode框架可能提供自己的Agent类需要导入。 async def main(): # 1. 初始化浏览器配置 browser_config BrowserConfig( headlessFalse, # 设为True则不显示浏览器窗口后台运行 disable_securityTrue, # 绕过一些安全限制慎用于生产环境 ) # 2. 创建浏览器实例和上下文 browser Browser() context: BrowserContext await browser.new_context(browser_config) # 3. 创建AI智能体并传入浏览器上下文作为其可用的“工具” # 这里假设Agent能自动识别context中的技能 agent Agent( task“打开百度首页(https://www.baidu.com)在搜索框里输入‘Hello AI’但不要点击搜索。”, browser_contextcontext, llm_config{ # 配置使用的LLM ‘provider’: ‘openai’, ‘model’: ‘gpt-4-turbo-preview’, ‘api_key’: os.getenv(‘OPENAI_API_KEY’), } ) # 4. 运行智能体 print(“AI智能体开始执行任务...”) try: result: ActionResult await agent.run() print(f“任务完成最终状态{result.status}”) print(f“AI执行的历史记录{result.history}”) except Exception as e: print(f“任务执行出错{e}”) finally: # 5. 清理资源 await context.close() await browser.close() if __name__ ‘__main__’: asyncio.run(main())关键配置解析与避坑指南headless模式开发调试时务必设为False这样你能亲眼看到AI每一步操作便于排查问题。上线或批量运行时可以改为True以节省资源。disable_security这个选项能解决很多因浏览器安全策略如跨域、弹窗拦截导致的操作失败。但它降低了浏览器安全性仅建议在可控的测试环境中使用。LLM模型选择gpt-4-turbo-preview在复杂任务规划和理解上远优于gpt-3.5-turbo。对于网页操作这种需要多步骤推理的任务建议使用能力更强的模型虽然成本更高但成功率提升显著。异步编程browser-use和许多AI SDK都基于异步I/Oasyncio。你的主函数必须是async并用asyncio.run()调用。同步环境下直接await会报错。资源清理一定要在finally块中关闭browser_context和browser否则Playwright驱动的浏览器进程可能会残留在后台消耗内存。运行这段代码你应该能看到一个浏览器窗口自动打开加载百度并在搜索框中输入“Hello AI”。如果成功了恭喜你你的AI已经迈出了“动手”的第一步。4. 实战任务拆解让AI自动完成GitHub仓库搜索与摘要为了展示opencodebrowser-use的真正潜力我们设计一个更复杂的实战任务“请搜索GitHub上最近一周内与‘AI agent’相关的、Star数超过100的Python项目并列出前5个项目的名称、链接和简要描述。”这个任务包含了导航、输入、交互点击搜索、可能翻页、信息提取、条件判断和结果整理等多个环节非常适合检验我们智能体的能力。4.1 任务规划与技能分解首先我们作为设计者要在心里帮AI或者说帮我们自己把任务分解成browser-use能执行的原子操作导航打开https://github.com。定位与输入找到搜索框输入查询词。这里有个技巧GitHub搜索支持高级语法。我们的查询词可以构造为ai agent language:python stars:100 pushed:2024-05-20(假设当前日期是2024-05-27)。执行搜索点击搜索按钮或按回车。等待与解析等待结果页面加载完成然后解析页面结构提取仓库列表。信息提取从每个仓库条目中提取名称含链接、描述。可能还需要处理分页但任务只要前5个第一页通常就够了。结果格式化将提取的信息整理成结构化的数据如列表字典。browser-use提供了相应的技能来支持这些操作。但AI需要知道在什么时候调用什么技能以及用什么参数。这就是opencode或我们编写的控制逻辑要解决的问题。4.2 实现代码与关键逻辑我们不能完全依赖AI从零开始规划所有细节尤其是涉及精确搜索语法和复杂页面解析时。更好的模式是“人机协作”我们编写主干逻辑和关键步骤让AI去处理其中需要灵活判断的部分比如元素定位、内容理解。以下是实现这个任务的增强版代码import asyncio import os from datetime import datetime, timedelta from browser_use import Agent, Browser, BrowserConfig, ActionResult from browser_use.browser.browser import BrowserContext from browser_use.browser.actions import ClickAction, TypeAction, WaitAction async def github_search_agent(): browser_config BrowserConfig(headlessFalse, disable_securityTrue) browser Browser() context: BrowserContext await browser.new_context(browser_config) # 计算一周前的日期 one_week_ago (datetime.now() - timedelta(days7)).strftime(‘%Y-%m-%d’) # 构建高级搜索查询 search_query f“ai agent language:python stars:100 pushed:{one_week_ago}” # 我们创建一个更具体的任务指令 task_description f“”” 请执行以下GitHub搜索任务 1. 访问 https://github.com。 2. 在页面顶部的搜索框内输入以下精确查询词{search_query} 3. 执行搜索可以按回车或点击搜索按钮。 4. 等待搜索结果页面完全加载。 5. 从结果中提取最靠前的5个仓库的信息。对于每个仓库我需要 - 仓库名称带链接 - 仓库的简要描述 请将最终结果以清晰的列表格式返回。 “”” agent Agent( tasktask_description, browser_contextcontext, llm_config{ ‘provider’: ‘openai’, ‘model’: ‘gpt-4-turbo-preview’, ‘api_key’: os.getenv(‘OPENAI_API_KEY’), }, # 可以设置超时和最大步骤数防止AI陷入死循环 max_steps20, timeout120, ) print(f“AI智能体开始执行任务搜索词{search_query}”) try: result: ActionResult await agent.run() if result.status ‘success’: print(“\n 任务成功AI返回的结果如下”) # 打印AI在最后一步给出的总结性输出 # 注意实际结果可能在result.history的最后几条消息里或者result.final_output中 # 这里需要根据Agent类的实际设计来提取。 # 假设result有一个summary或final_answer属性 final_answer getattr(result, ‘final_answer’, result.history[-1][‘content’] if result.history else ‘No output’) print(final_answer) else: print(f“任务未完全成功状态{result.status}”) print(“执行历史”) for step in result.history[-10:]: # 打印最后10步 print(f“ {step}”) except Exception as e: print(f“任务执行过程发生异常{e}”) finally: await context.close() await browser.close() if __name__ ‘__main__’: asyncio.run(github_search_agent())4.3 执行过程观察与调试技巧运行这个脚本你会观察到AI执行任务的整个过程。这本身就是一个非常有趣的调试和学习环节页面导航AI会先让浏览器打开GitHub主页。元素定位AI会“观察”页面识别出搜索框。它可能通过分析页面文本“Search GitHub”或者查找input标签来完成。输入与执行AI将我们构造好的复杂搜索词输入进去并触发搜索。这里可能会遇到第一个坑搜索框可能是一个需要先点击才能激活的组件。好的AI如GPT-4会先执行一个click动作再执行type。结果解析这是最具挑战的部分。GitHub搜索结果页的HTML结构相对复杂。AI需要理解整个列表区域并从中识别出每个独立的仓库条目article标签或具有特定class的div然后进一步提取里面的链接和描述文本。实操心得与提升成功率的技巧提供更明确的上下文可以在task_description中加入对页面结构的提示。例如“搜索结果通常在一个包含很多article标签或 class 为repo-list的容器里。每个仓库条目通常包含一个h3标签内的链接作为仓库名和一个p标签作为描述。”分步验证对于复杂任务不要指望AI一次成功。可以先让AI完成“打开GitHub并搜索”验证搜索是否正确。成功后再增加“提取第一条结果”的子任务逐步迭代。利用browser-use的观察状态browser-use会向AI模型发送当前页面的简化DOM和文本快照。如果AI总是找不到正确元素可能是这个快照信息不够或太杂乱。可以考虑在创建BrowserConfig时调整viewport_size或等待特定元素出现后再让AI行动确保页面稳定。手动干预与技能扩展有时AI的解析逻辑就是写不好。这时我们可以选择“混合模式”。即用browser-use的底层Playwright能力自己写一段精确的CSS选择器代码来提取数据然后将这个函数封装成一个新的“技能”注册给AI调用。这体现了opencode框架的扩展性优势。5. 常见问题、排查技巧与进阶思考在实际操作中你一定会遇到各种问题。下面是我在实战中遇到的一些典型情况及其解决方法。5.1 AI行为异常或陷入循环现象AI反复执行同一个操作如不断点击同一个按钮或者执行的动作完全偏离目标。排查检查headlessFalse首先确保浏览器窗口可见观察AI具体在做什么。很多时候问题一目了然。审查任务指令你的task描述是否足够清晰、无歧义避免使用“那个”、“这个”等指代不清的词。多用明确的标识如“带有‘Search’文字的按钮”、“顶部导航栏”。查看AI的“思考”过程一些Agent实现会输出“思考链”Chain-of-Thought。如果能看到就能发现AI在哪里理解错了。可以在初始化Agent时设置verboseTrue或查看result.history中的中间消息。降低任务复杂度将一个大任务拆分成多个小任务逐个让AI完成并验证。解决优化提示词这是最有效的方法。在指令中明确步骤、预期目标和页面特征。切换LLM模型如果使用gpt-3.5-turbo效果不佳果断升级到gpt-4系列。设置限制使用max_steps和timeout参数防止无限循环浪费资源。5.2 页面元素找不到或操作失败现象AI报告找不到元素或者点击/输入没有效果。排查页面加载时机AI动作太快页面还没加载完。在关键操作前让AI执行一个wait_for_navigation或wait_for_element的技能。iframe或Shadow DOM目标元素可能嵌套在iframe或Shadow DOM内部。browser-use和基础Playwright需要特殊处理才能访问这些元素。这通常是高级话题可能需要手动编写代码切换上下文。动态内容页面是JavaScript重度驱动的单页应用SPA内容动态加载。AI看到的页面快照可能不是最终状态。需要增加等待时间或者等待特定的网络请求完成。解决显式等待在任务描述中强调“等待页面完全加载”、“直到看到XX元素再操作”。使用更稳定的选择器虽然AI自动定位但我们可以在提示词中建议它使用更稳定的属性如>
)
