[AI]browser-use + web-ui 大模型实现自动操作浏览器
[AI]browser-use + web-ui 大模型实现自动操作浏览器
介绍
官方地址：https://github.com/browser-use/web-ui
- browser-use主要作用是将 AI Agent 与浏览器链接起来从而实现由 AI 驱动的浏览器自动化。
- 今天会给大家介绍如何通过browser-use web-ui来搭建并操作browser-use。
browser-use web-ui功能点：
- 提供了全新的网页界面，简单好用，方便操作。
- 支持更多大语言模型，比如 Gemini、OpenAI、Azure 、国产大模型 DeepSeek、通义千问等。
- 支持用自己的浏览器，不用再反复登录，还能录屏。
- 定制了更智能的 Agent，通过优化后的提示让浏览器使用更高效。
browser-use与web-ui关系：
想象 Browser Use 是一个“网页翻译官”：当 AI 需要操作网页时（比如自动订票），传统方法是让 AI“看截图”找按钮，但截图就像一张复杂照片，AI 需要花时间辨认。
- Browser Use 的解决方案是：把网页变成一份“元素清单”，比如“第 1 个是登录按钮，第 8 个是搜索框……”。AI 只需根据清单编号，快速找到对应位置并点击，就像按菜单点菜一样简单。
- Web-UI 则是这个翻译官的“操作面板”：普通用户不用写代码，直接在网页上选择任务（如“帮我搜机票”），选好 AI 模型（比如 ChatGPT），点击运行就能看到浏览器自动执行所有步骤，还能录屏回放操作过程。
环境搭建
python版本必须在 3.11 以上。
- 我这里主要演示Mac如何搭建，windows也是类似的操作。
1. 安装uv
# 官方推荐使用uv管理
brew install uv
2. 拉取项目安装依赖
# 从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
3. 配置浏览器及大模型参数
这里也可以使用本地通过ollama配置的大模型，比如Deepseek r1-14b
- Mac本地通过ollama部署大模型
# 拷贝示例配置文件
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
配置模型类型：
1. 使用内置浏览器
-
配置浏览器参数：
-
下发指令执行任务：
输入指令，然后点击运行
- 查看浏览器效果：
在主界面，上方的设置导航中选择 Agent Settings，如果你本地部署的大模型不支持视觉识别，可以把这个使用视觉【Use Vision】取消勾选，不然后续让 AI 执行任务时会报错。
- 我这里支持，因此我勾选后，浏览器页面出现如下：
该项目原理就是将浏览器页面上所有的元素都标记下来（打上编号），然后把元素编号以及元素代表的含义，告诉AI，由AI来判断用户需求需要操作哪些元素，然后调用API去操作对应元素。
- 控制台成功输出结果：
2. 使用本地浏览器
即：使用我们在.env配置的本地浏览器
注意：使用本地Chrome浏览器时，需要把自己本地Chrome浏览器关闭，由AI去打开。
-
打开本地浏览器开关
-
比如我们这里输入自己的要求
-
大模型已经识别到了我们的需求，并开始操作浏览器元素：
-
最后页面效果：
-
查看控制台日志，也正常拆解并完成了任务
可以看到效果还是挺不错的，只要模型好，这里可玩性还是挺高的。比如：针对页面操作实现自动化测试等
3. 深度搜索模式
提出需求，最后会根据我们的需求，输出一个文档，适合做旅游规划，周报日报等。
- 会默认进行三次的深度查找，最后把查找到的结果输出一个md文档
-
这里让模型帮我们做一个旅游规划
-
模型会查询网上内容
-
最后会给我们一个可下载的Markdown文档
Tips
1. 浏览器免登录
我们可以通过使用自己的浏览器，然后配置上对应的cookie信息，实现免登录
- 浏览器插件安装edit cookies（或其他cookie管理插件）
- 导出cookie信息
- web-ui.py文件中添加cookie信息
- 重新运行项目，同时使用自己本地的浏览器，就可以看到我们浏览器访问某些页面时是登录状态了
2. 项目原理
- 根据用户输出，拆分任务（规划任务：完成这个任务需要哪几步）
-
将任务拆分为具体的动作，比如通过百度打开咪咕视频，浏览器需要在搜索栏输入百度网址，然后输入框输入咪咕视频，并点击搜索
-
分析完后，操作页面元素，执行对应动作，搜索框输入文字，点击对应按钮等
-
for循环调用执行器，直到任务最终完成
