File size: 6,394 Bytes
eebcef7
 
 
 
19ea30a
eebcef7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19ea30a
eebcef7
19ea30a
eebcef7
19ea30a
eebcef7
19ea30a
eebcef7
 
 
 
 
 
 
 
 
 
 
 
 
 
19ea30a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
eebcef7
 
 
 
 
 
 
19ea30a
eebcef7
 
 
 
 
19ea30a
 
eebcef7
 
 
 
 
 
 
 
19ea30a
eebcef7
19ea30a
eebcef7
 
 
19ea30a
eebcef7
19ea30a
eebcef7
 
19ea30a
 
eebcef7
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
---

title: web-ui
app_file: webui.py
sdk: gradio
sdk_version: 5.27.0
---

<img src="./assets/web-ui.png" alt="Browser Use Web UI" width="full"/>

<br/>

[![GitHub stars](https://img.shields.io/github/stars/browser-use/web-ui?style=social)](https://github.com/browser-use/web-ui/stargazers)
[![Discord](https://img.shields.io/discord/1303749220842340412?color=7289DA&label=Discord&logo=discord&logoColor=white)](https://link.browser-use.com/discord)
[![Documentation](https://img.shields.io/badge/Documentation-📕-blue)](https://docs.browser-use.com)
[![WarmShao](https://img.shields.io/twitter/follow/warmshao?style=social)](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).