browser-use + web-ui 大模型实现自动操作浏览器
browser-use web-ui 是基于 AI Agent 的浏览器自动化工具,提供可视化界面与大模型集成。教程涵盖 uv 环境搭建、项目依赖安装、Chrome 及大模型 API(DeepSeek/Ollama)配置方法。演示了内置浏览器与本地浏览器两种操作模式,支持深度搜索生成文档。通过 Cookie 配置可实现免登录,核心原理为网页元素编号后由 AI 决策执行动作,适用于自动化测试及任务规划。

browser-use web-ui 是基于 AI Agent 的浏览器自动化工具,提供可视化界面与大模型集成。教程涵盖 uv 环境搭建、项目依赖安装、Chrome 及大模型 API(DeepSeek/Ollama)配置方法。演示了内置浏览器与本地浏览器两种操作模式,支持深度搜索生成文档。通过 Cookie 配置可实现免登录,核心原理为网页元素编号后由 AI 决策执行动作,适用于自动化测试及任务规划。

browser-use 主要作用是将 AI Agent 与浏览器连接起来,从而实现由 AI 驱动的浏览器自动化。
browser-use web-ui 功能点:
browser-use 与 web-ui 关系:
想象 Browser Use 是一个'网页翻译官':当 AI 需要操作网页时(比如自动订票),传统方法是让 AI'看截图'找按钮,但截图就像一张复杂照片,AI 需要花时间辨认。Browser Use 的解决方案是:把网页变成一份'元素清单',比如'第 1 个是登录按钮,第 8 个是搜索框……'。AI 只需根据清单编号,快速找到对应位置并点击,就像按菜单点菜一样简单。Web-UI 则是这个翻译官的'操作面板':普通用户不用写代码,直接在网页上选择任务(如'帮我搜机票'),选好 AI 模型(比如 ChatGPT),点击运行就能看到浏览器自动执行所有步骤,还能录屏回放操作过程。
python 版本必须在 3.11 以上。这里主要演示 Mac 如何搭建,Windows 也是类似的操作。
# 官方推荐使用 uv 管理
brew install uv
# 从 github 拉取项目
git clone https://github.com/browser-use/web-ui.git
cd web-ui
# 搭建该项目的 python 虚拟环境,这里 python 环境使用 3.11
uv venv --python 3.11
# 初始化虚拟环境配置
source .venv/bin/activate
# 安装 python 依赖
uv pip install -r requirements.txt
## 安装浏览器依赖,大家根据自己情况选择即可
# 仅安装 Chrome 依赖
playwright install --with-deps chromium
# 安装所有浏览器依赖
playwright install
这里也可以使用本地通过 ollama 配置的大模型,比如 Deepseek r1-14b
# 拷贝示例配置文件
copy .env.example .env
# 1. 配置浏览器位置:CHROME_PATH。这里以 chrome 为例
CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
# 2. 配置浏览器用户数据
CHROME_USER_DATA="/Users/你自己的用户名/Library/Application Support/Google/Chrome"
# 3. 配置大模型 API 参数【我这里使用 Deepseek】
DEEPSEEK_ENDPOINT=https://api.deepseek.com
DEEPSEEK_API_KEY=xxxx # 这里也可以使用本地通过 ollama 配置的大模型
OLLAMA_ENDPOINT=http://localhost:11434
# 运行项目
python webui.py --ip 127.0.0.1 --port 7788
配置模型类型:
配置浏览器参数:
输入指令,然后点击运行
在主界面,上方的设置导航中选择 Agent Settings,如果你本地部署的大模型不支持视觉识别,可以把这个使用视觉【Use Vision】取消勾选,不然后续让 AI 执行任务时会报错。我这里支持,因此我勾选后,浏览器页面出现如下:
该项目原理就是将浏览器页面上所有的元素都标记下来(打上编号),然后把元素编号以及元素代表的含义,告诉 AI,由 AI 来判断用户需求需要操作哪些元素,然后调用 API 去操作对应元素。
控制台成功输出结果:
即:使用我们在.env 配置的本地浏览器 注意:使用本地 Chrome 浏览器时,需要把自己本地 Chrome 浏览器关闭,由 AI 去打开。
查看控制台日志,也正常拆解并完成了任务
最后页面效果:
大模型已经识别到了我们的需求,并开始操作浏览器元素:
比如我们这里输入自己的要求
打开本地浏览器开关
可以看到效果还是挺不错的,只要模型好,这里可玩性还是挺高的。比如:针对页面操作实现自动化测试等
提出需求,最后会根据我们的需求,输出一个文档,适合做旅游规划,周报日报等。会默认进行三次的深度查找,最后把查找到的结果输出一个 md 文档
最后会给我们一个可下载的 Markdown 文档
模型会查询网上内容
这里让模型帮我们做一个旅游规划
我们可以通过使用自己的浏览器,然后配置上对应的 cookie 信息,实现免登录浏览器插件安装 edit cookies(或其他 cookie 管理插件)导出 cookie 信息重新运行项目,同时使用自己本地的浏览器,就可以看到我们浏览器访问某些页面时是登录状态了
web-ui.py 文件中添加 cookie 信息
for 循环调用执行器,直到任务最终完成
分析完后,操作页面元素,执行对应动作,搜索框输入文字,点击对应按钮等
将任务拆分为具体的动作,比如通过百度打开咪咕视频,浏览器需要在搜索栏输入百度网址,然后输入框输入咪咕视频,并点击搜索

微信公众号「极客日志」,在微信中扫描左侧二维码关注。展示文案:极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online
基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具,curl 转代码在线工具,online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online
将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online