当前位置：首页 > ai >正文

[AI]browser-use + web-ui 大模型实现自动操作浏览器

ai 2025/5/4 5:10:33

[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信息

重新运行项目，同时使用自己本地的浏览器，就可以看到我们浏览器访问某些页面时是登录状态了