[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功能点：

1. 提供了全新的网页界面，简单好用，方便操作。
2. 支持更多大语言模型，比如 Gemini、OpenAI、Azure 、国产大模型 DeepSeek、通义千问等。
3. 支持用自己的浏览器，不用再反复登录，还能录屏。
4. 定制了更智能的 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.gitcd web-ui# 搭建该项目的python虚拟环境，这里python环境使用3.11uv 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.comDEEPSEEK_API_KEY=xxxx# 这里也可以使用本地通过ollama配置的大模型OLLAMA_ENDPOINT=http://localhost:11434

使用

# 运行项目python webui.py --ip 127.0.0.1 --port 7788

配置模型类型：

1. 使用内置浏览器

1. 配置浏览器参数：
   

2. 下发指令执行任务：

输入指令，然后点击运行

3. 查看浏览器效果：

在主界面，上方的设置导航中选择 Agent Settings，如果你本地部署的大模型不支持视觉识别，可以把这个使用视觉【Use Vision】取消勾选，不然后续让 AI 执行任务时会报错。

• 我这里支持，因此我勾选后，浏览器页面出现如下：

该项目原理就是将浏览器页面上所有的元素都标记下来（打上编号），然后把元素编号以及元素代表的含义，告诉AI，由AI来判断用户需求需要操作哪些元素，然后调用API去操作对应元素。

5. 控制台成功输出结果：
   

2. 使用本地浏览器

即：使用我们在.env配置的本地浏览器
注意：使用本地Chrome浏览器时，需要把自己本地Chrome浏览器关闭，由AI去打开。

1. 打开本地浏览器开关
   

2. 比如我们这里输入自己的要求
   

3. 大模型已经识别到了我们的需求，并开始操作浏览器元素：
   

4. 最后页面效果：
   

5. 查看控制台日志，也正常拆解并完成了任务
   
   

可以看到效果还是挺不错的，只要模型好，这里可玩性还是挺高的。比如：针对页面操作实现自动化测试等

3. 深度搜索模式

提出需求，最后会根据我们的需求，输出一个文档，适合做旅游规划，周报日报等。

• 会默认进行三次的深度查找，最后把查找到的结果输出一个md文档

1. 这里让模型帮我们做一个旅游规划
   

2. 模型会查询网上内容
   

3. 最后会给我们一个可下载的Markdown文档
   

Tips

1. 浏览器免登录

我们可以通过使用自己的浏览器，然后配置上对应的cookie信息，实现免登录

1. 浏览器插件安装edit cookies（或其他cookie管理插件）
2. 导出cookie信息
3. web-ui.py文件中添加cookie信息
   
4. 重新运行项目，同时使用自己本地的浏览器，就可以看到我们浏览器访问某些页面时是登录状态了

2. 项目原理

1. 根据用户输出，拆分任务（规划任务：完成这个任务需要哪几步）

2. 将任务拆分为具体的动作，比如通过百度打开咪咕视频，浏览器需要在搜索栏输入百度网址，然后输入框输入咪咕视频，并点击搜索
   

3. 分析完后，操作页面元素，执行对应动作，搜索框输入文字，点击对应按钮等
   

4. for循环调用执行器，直到任务最终完成