Browser Use WebUI 完整部署与实战指南：在浏览器中运行你的 AI Agent

人工智能AI 应用交互助手浏览器控制【免费下载链接】web-ui️ Run AI Agent in your browser.项目地址https://gitcode.com/GitHub_Trending/web/web-ui点击查看免费下载导读本文以README.md为主体结合本仓库的源码、配置文件与测试系统讲解Browser Use WebUI的本地安装、Docker 部署、LLM 接入、自有浏览器复用、持久化会话与 Gradio 界面各标签页的使用方法。读完本文你将能够从零搭建一套可运行的浏览器 Agent Web 界面并把 OpenAI、Anthropic、Google、DeepSeek、Ollama 等多种模型接入其中实现用自然语言指令让 AI 操作浏览器的完整闭环。一、项目定位为浏览器 AI Agent 打造的 Gradio WebUIBrowser Use WebUI 构建在开源浏览器 Agent 框架browser-use之上其核心目标是把让 AI Agent 操作浏览器的能力包装成一个开箱即用的图形界面而非命令行工具。仓库对自身的定位可以归纳为四点WebUI 界面基于 Gradio 构建覆盖browser-use的大部分功能界面友好可轻松与浏览器 Agent 交互。界面默认深色主题由 src/webui/interface.py 中的create_ui()函数负责组装内置 8 套 Gradio 主题Default、Soft、Monochrome、Glass、Origin、Citrus、Ocean、Base默认使用Ocean。扩展的 LLM 支持集成了 Google、OpenAI、Azure OpenAI、Anthropic、DeepSeek、Ollama 等多个模型提供方并计划持续扩充。自定义浏览器支持可以复用你自己日常使用的浏览器避免重复登录站点或反复处理认证挑战同时支持高清屏幕录制。持久化浏览器会话可选择在 AI 任务之间保持浏览器窗口打开让你能看到 AI 交互的完整历史与状态。从 requirements.txt 可以看到项目以browser-use0.1.48为核心依赖并配套gradio5.27.0、langgraph、langchain-mistralai、langchain-ibm、MainContentExtractor、json-repair等组件用于支撑 Agent 调度、多模型接入与网页内容提取。二、本地安装Local Installation2.1 克隆仓库git clone https://gitcode.com/GitHub_Trending/web/web-ui.git cd web-ui2.2 创建 Python 环境项目推荐使用uv管理 Python 环境要求 Python 3.11uv venv --python 3.11激活虚拟环境WindowsCommand Prompt.venv\Scripts\activateWindowsPowerShell.\.venv\Scripts\Activate.ps1macOS / Linuxsource .venv/bin/activate2.3 安装依赖与浏览器安装 Python 依赖uv pip install -r requirements.txt随后安装 Playwright 浏览器及系统依赖playwright install --with-deps也可以只安装 Chromiumplaywright install chromium --with-deps说明requirements.txt中锁定了browser-use0.1.48Agent 的浏览器控制能力页面导航、元素点击、表单填写、截图识别等均由该版本框架提供本文后续对浏览器参数的分析均以此版本为准。2.4 配置环境变量创建环境变量文件二选一WindowsCommand Promptcopy .env.example .envmacOS / Linux / WindowsPowerShellcp .env.example .env然后用文本编辑器打开.env填入 API Key 与各项设置详见下文第四节。仓库根目录已提供完整模板 .env.example其中包含了所有支持提供方的端点与密钥位、默认 LLM、遥测开关、日志级别、浏览器与显示相关变量。2.5 启动 WebUIpython webui.py --ip 127.0.0.1 --port 7788启动后用浏览器访问http://127.0.0.1:7788即可进入界面。webui.py 是入口文件它先通过dotenv加载.env再解析三个命令行参数参数默认值说明--ip127.0.0.1WebUI 绑定的 IP 地址--port7788监听端口--themeOcean界面主题可选值来自theme_map的 8 套主题键名对应源码webui.pyparser.add_argument(--ip, typestr, default127.0.0.1, helpIP address to bind to) parser.add_argument(--port, typeint, default7788, helpPort to listen on) parser.add_argument(--theme, typestr, defaultOcean, choicestheme_map.keys(), helpTheme to use for the UI) ... demo create_ui(theme_nameargs.theme) demo.queue().launch(server_nameargs.ip, server_portargs.port)三、使用你自己的浏览器可选强烈推荐复用个人浏览器最大的好处是免去在 AI 会话中反复登录、绕过各类认证的麻烦同时项目支持高清屏幕录制。配置方法如下。3.1 设置浏览器路径与用户数据目录在.env中设置BROWSER_PATH浏览器可执行文件路径与BROWSER_USER_DATA浏览器用户数据目录。若希望使用本地默认用户数据可留空BROWSER_USER_DATA。Windows 示例BROWSER_PATHC:\Program Files\Google\Chrome\Application\chrome.exe BROWSER_USER_DATAC:\Users\YourUsername\AppData\Local\Google\Chrome\User Data注意请将YourUsername替换为实际的 Windows 用户名。Mac 示例BROWSER_PATH/Applications/Google Chrome.app/Contents/MacOS/Google Chrome BROWSER_USER_DATA/Users/YourUsername/Library/Application Support/Google/Chrome3.2 启用步骤关闭所有 Chrome 窗口使用非 Chrome 浏览器如 Firefox、Edge打开 WebUI——这一点很重要因为运行 Agent 时持久化浏览器上下文会使用 Chrome 的用户数据在Browser Settings浏览器设置标签页勾选Use Own Browser。3.3 源码层面的行为说明从源码看使用自有浏览器并非简单的通道切换而是把用户的浏览器数据目录透传给 Playwright 启动参数在 src/webui/components/browser_use_agent_tab.py 的run_agent_task()中当use_own_browser为真时会读取环境变量BROWSER_PATH作为二进制路径并在BROWSER_USER_DATA非空时追加--user-data-dir路径到extra_browser_args反之不使用自有浏览器时browser_binary_path会被置为None交由内置浏览器逻辑处理。这些参数最终通过 src/browser/custom_browser.py 的_setup_builtin_browser()组装进 Chrome 启动命令。该实现还做了两项额外处理若本机 9222 调试端口已被占用会自动移除--remote-debugging-port参数避免端口冲突非 headless 模式下会按配置的窗口宽高与系统窗口边框偏移计算--window-size/--window-position保证截图区域准确。浏览器配置项还包括Headless Mode无头模式配合界面中的浏览器实时画面、Disable Security关闭浏览器安全限制、Window Width/Window Height默认 1280×1100以及CDP URL/WSS URL远程调试连接这些都在 browser_settings_tab.py 中定义。其中任意一项发生变化时会触发close_browser()关闭现有浏览器与上下文以新配置重建。四、Docker 安装与部署4.1 前置条件已安装 Docker 与 Docker ComposeWindows/macOS 使用 Docker DesktopLinux 安装 Docker Engine 与 Docker Compose 插件。4.2 配置环境变量与本地安装相同先执行WindowsCommand Promptcopy .env.example .envmacOS / Linux / WindowsPowerShellcp .env.example .env然后在.env中填入 API Keys 及其他设置。4.3 构建并启动docker compose up --buildARM64 架构系统如 Apple Silicon Mac请使用TARGETPLATFORMlinux/arm64 docker compose up --build4.4 访问 WebUI 与 VNCWeb-UI浏览器打开http://localhost:7788VNC Viewer观看浏览器交互过程打开http://localhost:6080/vnc.html默认 VNC 密码youvncpassword可通过.env中的VNC_PASSWORD修改4.5 源码视角容器里发生了什么docker-compose.yml 定义了browser-use-webui服务映射了四个端口7788WebUI、6080noVNC 网页版 VNC 客户端、5901VNC 服务端口、9222浏览器远程调试端口并通过环境变量把.env中的全部 LLM 端点/密钥、BROWSER_PATH、KEEP_BROWSER_OPEN、RESOLUTION、VNC_PASSWORD等注入容器。Dockerfile 基于python:3.11-slim-bookworm安装了 Xvfb虚拟显示、x11vnc、noVNC、supervisor 与 ChromiumPLAYWRIGHT_BROWSERS_PATH/ms-browsers并把 Playwright 浏览器下载在构建期完成。supervisord.conf 则编排了容器内的多进程Xvfb 虚拟屏幕分辨率来自RESOLUTION、VNC 密码初始化与 x11vnc 服务、noVNC 代理、以及python webui.py --ip 0.0.0.0 --port 7788的 WebUI 主进程。这也是为什么容器内 WebUI 监听 0.0.0.0宿主机通过端口映射即可访问。五、环境变量全量解析以下变量均可在.env中配置模板见 .env.exampleDocker 场景下 docker-compose.yml 会原样透传5.1 LLM 服务配置变量默认端点说明OPENAI_ENDPOINT/OPENAI_API_KEYhttps://api.openai.com/v1OpenAIANTHROPIC_ENDPOINT/ANTHROPIC_API_KEYhttps://api.anthropic.comAnthropicGOOGLE_API_KEY—Google GeminiAZURE_OPENAI_ENDPOINT/AZURE_OPENAI_API_KEY/AZURE_OPENAI_API_VERSION版本默认2025-01-01-previewAzure OpenAIDEEPSEEK_ENDPOINT/DEEPSEEK_API_KEYhttps://api.deepseek.comDeepSeekMISTRAL_ENDPOINT/MISTRAL_API_KEYhttps://api.mistral.ai/v1MistralOLLAMA_ENDPOINThttp://localhost:11434本地 OllamaALIBABA_ENDPOINT/ALIBABA_API_KEYhttps://dashscope.aliyuncs.com/compatible-mode/v1阿里云百炼通义千问MODELSCOPE_ENDPOINT/MODELSCOPE_API_KEYhttps://api-inference.modelscope.cn/v1ModelScopeMOONSHOT_ENDPOINT/MOONSHOT_API_KEYhttps://api.moonshot.cn/v1Kimi月之暗面UNBOUND_ENDPOINT/UNBOUND_API_KEYhttps://api.getunbound.aiUnbound AISiliconFLOW_ENDPOINT/SiliconFLOW_API_KEYhttps://api.siliconflow.cn/v1/硅基流动IBM_ENDPOINT/IBM_API_KEY/IBM_PROJECT_IDhttps://us-south.ml.cloud.ibm.comIBM watsonxGROK_ENDPOINT/GROK_API_KEYhttps://api.x.ai/v1xAI GrokDEFAULT_LLMopenai界面启动时默认选中的 LLM 提供方5.2 应用与日志变量默认值说明ANONYMIZED_TELEMETRYfalse设为false关闭匿名遥测BROWSER_USE_LOGGING_LEVELinfo可选result、debug、infodebug输出详细日志result仅输出结果5.3 浏览器与显示变量默认值说明BROWSER_PATH空自有浏览器可执行文件路径BROWSER_USER_DATA空自有浏览器用户数据目录BROWSER_DEBUGGING_PORT9222Chrome 远程调试端口BROWSER_DEBUGGING_HOSTlocalhost远程调试主机KEEP_BROWSER_OPENtrue是否在 AI 任务之间保持浏览器打开USE_OWN_BROWSERfalse是否使用自有浏览器BROWSER_CDP空CDP 连接地址如http://localhost:9222RESOLUTION1920x1080x24虚拟显示分辨率宽x高x色深RESOLUTION_WIDTH/RESOLUTION_HEIGHT1920/1080分辨率宽高VNC_PASSWORDyouvncpasswordVNC 访问密码六、WebUI 界面结构五个标签页interface.py 中定义了完整的界面布局共五个标签页⚙️ Agent SettingsAgent 设置配置模型与运行参数 Browser Settings浏览器设置配置浏览器与录制/下载路径 Run Agent运行 Agent任务输入、聊天交互、控制按钮与任务输出 Agent MarketplaceAgent 市场内嵌 Deep Research 等基于 Browser-Use 构建的 Agent仓库中对应 deep_research_agent_tab.py 与 deep_research_agent.py Load Save Config配置导入导出把整套界面设置保存为 JSON 或从 JSON 恢复。6.1 Agent Settings模型与运行参数该标签页agent_settings_tab.py提供的核心参数如下Override / Extend system prompt覆盖或追加系统提示词可自定义 Agent 行为MCP server json上传 MCP 服务器配置.json上传后界面会展示解析出的配置内容底层通过 custom_controller.py 的setup_mcp_client()建立 MCP 客户端并把每个 MCP 工具注册为mcp.server.tool形式的新动作扩展 Agent 的工具集LLM Provider / LLM Model Name模型提供方与模型名模型下拉列表来自 src/utils/config.py 的model_names字典如 OpenAI 的gpt-4o、DeepSeek 的deepseek-chat/deepseek-reasoner、Google 的gemini-2.x系列、Ollama 的qwen2.5:*/deepseek-r1:*、硅基流动的 DeepSeek/Qwen 系列等也支持手动输入自定义模型名LLM Temperature0.0~2.0 滑动条默认 0.6控制模型输出随机性Use Vision默认开启把高亮截图输入 LLM使其具备看页面的能力Ollama Context Length选择 Ollama 时可见默认 16000控制模型上下文长度越小越快Base URL / API Key可覆盖.env中的端点与密钥API Key 留空时自动回落到.envPlanner LLM 系列参数可选的规划器模型独立于主模型用于 Deep Research 类任务规划Max Run Steps默认 100Agent 最大执行步数1~1000Max Number of Actions默认 10每步最多执行的动作数Max Input Tokens默认 128000输入 Token 上限Tool Calling Method默认auto可选function_calling、json_mode、raw、tools、None。模型接入的源码佐证src/utils/llm_provider.py 的get_llm_model()根据 provider 分发到不同的 LangChain 模型类——如 OpenAI/DeepSeek/Alibaba/Moonshot/Unbound/SiliconFlow 等走ChatOpenAIOpenAI 兼容端点Azure 走AzureChatOpenAIGoogle 走ChatGoogleGenerativeAIOllama 走ChatOllamaIBM 走ChatWatsonx。其中 DeepSeek 的deepseek-reasoner与 Ollama 的deepseek-r1会使用项目自定义的DeepSeekR1ChatOpenAI/DeepSeekR1ChatOllama包装类以透传模型返回的reasoning_content思维链从而实现类似 DeepSeek-R1 的深度思考能力。6.2 Browser Settings浏览器与录制该标签页browser_settings_tab.py覆盖Browser Binary Path / Browser User Data Dir自有浏览器路径与用户数据目录Use Own Browser默认读取USE_OWN_BROWSERKeep Browser Open默认读取KEEP_BROWSER_OPENtrue即任务间保持浏览器打开Headless Mode无头模式开启后Run Agent 页的Browser Live View会以流式截图展示浏览器实时画面Disable Security关闭浏览器安全限制Window Width / Height默认 1280×1100CDP URL / WSS URL通过 Chrome DevTools Protocol 或 WebSocket 连接已有浏览器实例Recording Path / Trace Path浏览器录制视频与 Agent Trace 的保存目录Agent History Save Path默认./tmp/agent_historyAgent 历史JSON GIF保存目录Save Directory for browser downloads默认./tmp/downloads浏览器下载文件保存目录。6.3 Run Agent任务执行流程该标签页browser_use_agent_tab.py是核心交互区包含Agent Interaction 聊天区实时展示任务状态与每一步的截图 Agent 决策 JSONYour Task or Response 输入框输入任务当 Agent 主动求助遇到验证码、需要人工判断、需要凭据等时此框会变成人工应答输入控制按钮▶️ Submit Task、⏹️ Stop、⏸️ Pause/Resume、️ Clear任务输出区Agent History JSON完整执行历史按任务 UUID 存为tmp/agent_history/uuid/uuid.json与Task Recording GIF任务过程 GIF。其执行流程run_agent_task()可概括为读取任务 → 汇总 Agent/Browser 两页设置 → 初始化 LLM含可选的 Planner LLM→ 初始化CustomController注册ask_for_assistant、upload_file等自定义动作并按需接入 MCP 工具→ 创建/复用CustomBrowser与CustomBrowserContext→ 初始化或复用BrowserUseAgent→ 以异步任务运行并轮询推送界面更新 → 结束后保存历史与 GIF、按KEEP_BROWSER_OPEN决定是否关闭浏览器。几个值得注意的实现细节人工求助机制CustomController中注册了ask_for_assistant动作描述文本明确要求 Agent 在遇到无凭据、需主观判断、复杂验证码等确定阻塞时向人类求助WebUI 通过asyncio.Eventbu_response_event阻塞等待用户在输入框给出回复最长等待 3600 秒超时则告知 Agent 继续尝试其他方式。对应源码见 custom_controller.py 与_ask_assistant_callback。暂停/停止/清空Pause/Resume调用agent.pause()/agent.resume()Stop置agent.state.stopped TrueClear会先停止任务、关闭 MCP 客户端、清空聊天历史与浏览器视图。Agent 复用当KEEP_BROWSER_OPENtrue时同一浏览器、上下文与 Agent 实例会在多个任务间复用add_new_task()只追加新任务而不重建整个链路这正是持久化浏览器会话的底层实现相关状态由 webui_manager.py 的WebuiManager统一持有bu_agent、bu_browser、bu_browser_context、bu_chat_history等。6.4 Load Save Config配置持久化该标签页load_save_config_tab.py提供两个按钮Save UI Settings把当前界面所有可交互控件的值除按钮与文件组件外保存为tmp/webui_settings/时间戳.jsonLoad Config从 JSON 恢复全部控件状态并在状态框显示加载结果。底层的save_config()/load_config()实现在 webui_manager.py加载时会跳过 Chatbot 等特殊组件并对planner_llm_provider做分段更新以触发下拉回调联动。七、常见场景速查7.1 只想快速体验uv venv --python 3.11 source .venv/bin/activate uv pip install -r requirements.txt playwright install chromium --with-deps cp .env.example .env # 编辑 .env 填入任一 LLM 的 API Key python webui.py --ip 127.0.0.1 --port 77887.2 想要 AI 使用你登录过的 Chrome.env中设置BROWSER_PATH与BROWSER_USER_DATA完全关闭所有 Chrome 进程用 Firefox/Edge 打开 WebUI在 Browser Settings 勾选 Use Own Browser 后提交任务。7.3 想要跨任务保持浏览器与登录状态确保.env中KEEP_BROWSER_OPENtrue默认值任务结束后浏览器窗口不关闭Agent 状态、已登录会话与页面上下文均保留到下一个任务。7.4 想要在无头服务器上观看 Agent 操作使用 Docker 部署通过http://localhost:6080/vnc.html打开 noVNC 观看实时画面或在本地开启 Headless Mode在 Run Agent 页的 Browser Live View 查看流式截图。八、版本演进Changelog仓库README.md记录的演进历史如下2025/01/26支持与 DeepSeek-R1 组合实现深度思考配合deepseek-reasoner/deepseek-r1模型与思维链透传能力2025/01/10新增 Docker 部署方案并支持任务之间保持浏览器打开2025/01/06发布全新设计的 WebUI。九、写在最后本文从官方 README 出发结合仓库源码把 Browser Use WebUI 的安装、配置、部署与使用链路完整展开本地与 Docker 两种部署方式、13 个 LLM 提供方的接入方式、自有浏览器复用与持久化会话的实现原理、以及 Gradio 界面五大标签页背后的代码逻辑。若需深入某一部分建议直接阅读以下关键文件入口与界面webui.py、src/webui/interface.py配置模板.env.example、docker-compose.yml、Dockerfile、supervisord.conf模型接入src/utils/config.py、src/utils/llm_provider.py浏览器适配src/browser/custom_browser.py、src/browser/custom_context.pyAgent 与控制器src/agent/browser_use/browser_use_agent.py、src/controller/custom_controller.py界面各页实现src/webui/components/ 目录与 src/webui/webui_manager.py按文中步骤操作即可在一台有 Python 3.11 或 Docker 的机器上把让 AI Agent 在浏览器里干活这件事真正跑起来。赞分享人工智能AI 应用交互助手浏览器控制【免费下载链接】web-ui️ Run AI Agent in your browser.项目地址https://gitcode.com/GitHub_Trending/web/web-ui点击查看免费下载相关推荐Browser-Use WebUI实战让AI成为你的浏览器自动化助手Browser Use WebUI实战让AI成为你的浏览器自动化助手 你是否曾经在浏览器中重复进行着枯燥的数据收集工作是否希望有个智能助手能帮你自动填写表单人工智能AI 应用交互助手浏览器控制OpenChamber Web 版部署与使用指南在浏览器中运行 OpenCode AI AgentOpenChamber Web 版部署与使用指南在浏览器中运行 OpenCode AI Agent OpenChamber 的 openchamber/weAI Agent人工智能代码智能体交互助手终极指南如何通过Browser-Use WebUI实现AI Agent自动化浏览器操作终极指南如何通过Browser Use WebUI实现AI Agent自动化浏览器操作 想要让AI Agent像人类一样操作浏览器吗Browser Use人工智能AI 应用交互助手浏览器控制上一篇VasSonic组件化实践业务与框架解耦方案下一篇DZNEmptyDataSet与搜索引擎搜索策略为空时的设计创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考