base on 🖥️ Run AI Agent in your browser. <img src="./assets/web-ui.png" alt="Browser Use Web UI" width="full"/> <br/> [](https://github.com/browser-use/web-ui/stargazers) [](https://link.browser-use.com/discord) [](https://docs.browser-use.com) [](https://x.com/warmshao) This project builds upon the foundation of the [browser-use](https://github.com/browser-use/browser-use), which is designed to make websites accessible for AI agents. We would like to officially thank [WarmShao](https://github.com/warmshao) for his contribution to this project. **WebUI:** is built on Gradio and supports most of `browser-use` functionalities. This UI is designed to be user-friendly and enables easy interaction with the browser agent. **Expanded LLM Support:** We've integrated support for various Large Language Models (LLMs), including: Google, OpenAI, Azure OpenAI, Anthropic, DeepSeek, Ollama etc. And we plan to add support for even more models in the future. **Custom Browser Support:** You can use your own browser with our tool, eliminating the need to re-login to sites or deal with other authentication challenges. This feature also supports high-definition screen recording. **Persistent Browser Sessions:** You can choose to keep the browser window open between AI tasks, allowing you to see the complete history and state of AI interactions. <video src="https://github.com/user-attachments/assets/56bc7080-f2e3-4367-af22-6bf2245ff6cb" controls="controls">Your browser does not support playing this video!</video> ## Installation Guide ### Option 1: Local Installation Read the [quickstart guide](https://docs.browser-use.com/quickstart#prepare-the-environment) or follow the steps below to get started. #### Step 1: Clone the Repository ```bash git clone https://github.com/browser-use/web-ui.git cd web-ui ``` #### Step 2: Set Up Python Environment We recommend using [uv](https://docs.astral.sh/uv/) for managing the Python environment. Using uv (recommended): ```bash uv venv --python 3.11 ``` Activate the virtual environment: - Windows (Command Prompt): ```cmd .venv\Scripts\activate ``` - Windows (PowerShell): ```powershell .\.venv\Scripts\Activate.ps1 ``` - macOS/Linux: ```bash source .venv/bin/activate ``` #### Step 3: Install Dependencies Install Python packages: ```bash uv pip install -r requirements.txt ``` Install Browsers in playwright. ```bash playwright install --with-deps ``` Or you can install specific browsers by running: ```bash playwright install chromium --with-deps ``` #### Step 4: Configure Environment 1. Create a copy of the example environment file: - Windows (Command Prompt): ```bash copy .env.example .env ``` - macOS/Linux/Windows (PowerShell): ```bash cp .env.example .env ``` 2. Open `.env` in your preferred text editor and add your API keys and other settings #### Step 5: Enjoy the web-ui 1. **Run the WebUI:** ```bash python webui.py --ip 127.0.0.1 --port 7788 ``` 2. **Access the WebUI:** Open your web browser and navigate to `http://127.0.0.1:7788`. 3. **Using Your Own Browser(Optional):** - Set `BROWSER_PATH` to the executable path of your browser and `BROWSER_USER_DATA` to the user data directory of your browser. Leave `BROWSER_USER_DATA` empty if you want to use local user data. - Windows ```env BROWSER_PATH="C:\Program Files\Google\Chrome\Application\chrome.exe" BROWSER_USER_DATA="C:\Users\YourUsername\AppData\Local\Google\Chrome\User Data" ``` > Note: Replace `YourUsername` with your actual Windows username for Windows systems. - Mac ```env BROWSER_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" BROWSER_USER_DATA="/Users/YourUsername/Library/Application Support/Google/Chrome" ``` - Close all Chrome windows - Open the WebUI in a non-Chrome browser, such as Firefox or Edge. This is important because the persistent browser context will use the Chrome data when running the agent. - Check the "Use Own Browser" option within the Browser Settings. ### Option 2: Docker Installation #### Prerequisites - Docker and Docker Compose installed - [Docker Desktop](https://www.docker.com/products/docker-desktop/) (For Windows/macOS) - [Docker Engine](https://docs.docker.com/engine/install/) and [Docker Compose](https://docs.docker.com/compose/install/) (For Linux) #### Step 1: Clone the Repository ```bash git clone https://github.com/browser-use/web-ui.git cd web-ui ``` #### Step 2: Configure Environment 1. Create a copy of the example environment file: - Windows (Command Prompt): ```bash copy .env.example .env ``` - macOS/Linux/Windows (PowerShell): ```bash cp .env.example .env ``` 2. Open `.env` in your preferred text editor and add your API keys and other settings #### Step 3: Docker Build and Run ```bash docker compose up --build ``` For ARM64 systems (e.g., Apple Silicon Macs), please run follow command: ```bash TARGETPLATFORM=linux/arm64 docker compose up --build ``` #### Step 4: Enjoy the web-ui and vnc - Web-UI: Open `http://localhost:7788` in your browser - VNC Viewer (for watching browser interactions): Open `http://localhost:6080/vnc.html` - Default VNC password: "youvncpassword" - Can be changed by setting `VNC_PASSWORD` in your `.env` file ## Changelog - [x] **2025/01/26:** Thanks to @vvincent1234. Now browser-use-webui can combine with DeepSeek-r1 to engage in deep thinking! - [x] **2025/01/10:** Thanks to @casistack. Now we have Docker Setup option and also Support keep browser open between tasks.[Video tutorial demo](https://github.com/browser-use/web-ui/issues/1#issuecomment-2582511750). - [x] **2025/01/06:** Thanks to @richard-devbot. A New and Well-Designed WebUI is released. [Video tutorial demo](https://github.com/warmshao/browser-use-webui/issues/1#issuecomment-2573393113). ", Assign "at most 3 tags" to the expected json: {"id":"13320","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"