Browser USE AI

1

[[~[~[image:https://github.com/browser-use/web-ui/raw/main/assets/web-ui.png~|~|alt="Browser Use Web UI" width="full"~]~]>>url:https://github.com/browser-use/web-ui/blob/main/assets/web-ui.png]]

2

3

4

[[~[~[image:https://camo.githubusercontent.com/39903d1681e88c34cf6c4b39b787ac788e843d81ed85238ad9aa86ba7563d6df/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f73746172732f62726f777365722d7573652f7765622d75693f7374796c653d736f6369616c~|~|alt="GitHub stars"~]~]>>url:https://github.com/browser-use/web-ui/stargazers]] [[~[~[image:https://camo.githubusercontent.com/3d2c750e6207adb7f3fe4b1ed35677bc0b7a12e67bbd3d5e6678a1de6df4c217/68747470733a2f2f696d672e736869656c64732e696f2f646973636f72642f313330333734393232303834323334303431323f636f6c6f723d373238394441266c6162656c3d446973636f7264266c6f676f3d646973636f7264266c6f676f436f6c6f723d7768697465~|~|alt="Discord"~]~]>>url:https://link.browser-use.com/discord]] [[~[~[image:https://camo.githubusercontent.com/7f6d88507e659f89eb75356e49b3e34237a3118de06ec289f5b8614eef0db6ce/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f446f63756d656e746174696f6e2d2546302539462539332539352d626c7565~|~|alt="Documentation"~]~]>>url:https://docs.browser-use.com]] [[~[~[image:https://camo.githubusercontent.com/0570a31892a1cb9f5399dbbe8f3c282ed739c853dd40789c734224fab64e2c71/68747470733a2f2f696d672e736869656c64732e696f2f747769747465722f666f6c6c6f772f7761726d7368616f3f7374796c653d736f6369616c~|~|alt="WarmShao"~]~]>>url:https://x.com/warmshao]]

5

6

This project builds upon the foundation of the [[browser-use>>url:https://github.com/browser-use/browser-use]], which is designed to make websites accessible for AI agents.

7

8

We would like to officially thank [[WarmShao>>url:https://github.com/warmshao]] for his contribution to this project.

9

10

**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.

11

12

**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.

13

14

**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.

15

16

**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.

bu-webui-demo.mp4

== Installation Guide ==

24

25

26

=== Prerequisites ===

27

28

29

* Python 3.11 or higher

30

* Git (for cloning the repository)

31

32

=== Option 1: Local Installation ===

33

34

35

Read the [[quickstart guide>>url:https://docs.browser-use.com/quickstart#prepare-the-environment]] or follow the steps below to get started.

36

37

==== Step 1: Clone the Repository ====

38

39

40

{{{git clone https://github.com/browser-use/web-ui.git

41

cd web-ui}}}

42

43

==== Step 2: Set Up Python Environment ====

44

45

46

We recommend using [[uv>>url:https://docs.astral.sh/uv/]] for managing the Python environment.

47

48

Using uv (recommended):

49

50

{{{uv venv --python 3.11}}}

51

52

Activate the virtual environment:

53

54

* Windows (Command Prompt):

55

56

{{{.venv\Scripts\activate}}}

57

58

* Windows (PowerShell):

59

60

{{{.\.venv\Scripts\Activate.ps1}}}

* macOS/Linux:

{{{source .venv/bin/activate}}}

65

66

==== Step 3: Install Dependencies ====

67

68

69

Install Python packages:

70

71

{{{uv pip install -r requirements.txt}}}

72

73

Install Browsers in Playwright: You can install specific browsers by running:

74

75

{{{playwright install --with-deps chromium}}}

76

77

To install all browsers:

78

79

{{{playwright install}}}

80

81

==== Step 4: Configure Environment ====

82

83

84

1. Create a copy of the example environment file:

85

86

* Windows (Command Prompt):

87

88

{{{copy .env.example .env}}}

89

90

* macOS/Linux/Windows (PowerShell):

91

92

{{{cp .env.example .env}}}

93

94

1. Open .env in your preferred text editor and add your API keys and other settings

95

96

=== Option 2: Docker Installation ===

97

98

99

==== Prerequisites ====

100

101

102

* Docker and Docker Compose installed

103

** [[Docker Desktop>>url:https://www.docker.com/products/docker-desktop/]] (For Windows/macOS)

104

** [[Docker Engine>>url:https://docs.docker.com/engine/install/]] and [[Docker Compose>>url:https://docs.docker.com/compose/install/]] (For Linux)

105

106

==== Installation Steps ====

107

108

109

1. Clone the repository:

110

111

{{{git clone https://github.com/browser-use/web-ui.git

112

cd web-ui}}}

113

114

1. Create and configure environment file:

115

116

* Windows (Command Prompt):

117

118

{{{copy .env.example .env}}}

119

120

* macOS/Linux/Windows (PowerShell):

121

122

{{{cp .env.example .env}}}

123

124

Edit .env with your preferred text editor and add your API keys

1. Run with Docker:

{{{# Build and start the container with default settings (browser closes after AI tasks)

129

docker compose up --build}}}

130

131

{{{# Or run with persistent browser (browser stays open between AI tasks)

132

CHROME_PERSISTENT_SESSION=true docker compose up --build}}}

133

134

1. Access the Application:

135

136

* Web Interface: Open http:~/~/localhost:7788 in your browser

137

* VNC Viewer (for watching browser interactions): Open http:~/~/localhost:6080/vnc.html

138

** Default VNC password: "youvncpassword"

139

** Can be changed by setting VNC_PASSWORD in your .env file

== Usage ==

=== Local Setup ===

* **Run the WebUI:** After completing the installation steps above, start the application:

148

149

{{{python webui.py --ip 127.0.0.1 --port 7788}}}

150

*

151

* WebUI options:

152

** ~-~-ip: The IP address to bind the WebUI to. Default is 127.0.0.1.

153

** ~-~-port: The port to bind the WebUI to. Default is 7788.

154

** ~-~-theme: The theme for the user interface. Default is Ocean.

155

*** **Default**: The standard theme with a balanced design.

156

*** **Soft**: A gentle, muted color scheme for a relaxed viewing experience.

157

*** **Monochrome**: A grayscale theme with minimal color for simplicity and focus.

158

*** **Glass**: A sleek, semi-transparent design for a modern appearance.

159

*** **Origin**: A classic, retro-inspired theme for a nostalgic feel.

160

*** **Citrus**: A vibrant, citrus-inspired palette with bright and fresh colors.

161

*** **Ocean** (default): A blue, ocean-inspired theme providing a calming effect.

162

** ~-~-dark-mode: Enables dark mode for the user interface.

163

* **Access the WebUI:** Open your web browser and navigate to http:~/~/127.0.0.1:7788.

164

* **Using Your Own Browser(Optional):**

165

** Set CHROME_PATH to the executable path of your browser and CHROME_USER_DATA to the user data directory of your browser. Leave CHROME_USER_DATA empty if you want to use local user data.

166

*** Windows

167

168

{{{ CHROME_PATH="C:\Program Files\Google\Chrome\Application\chrome.exe"

169

CHROME_USER_DATA="C:\Users\YourUsername\AppData\Local\Google\Chrome\User Data"}}}

170

* (((

171

>Note: Replace YourUsername with your actual Windows username for Windows systems.

)))

* Mac

{{{ CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"

176

CHROME_USER_DATA="/Users/YourUsername/Library/Application Support/Google/Chrome"}}}

177

178

1.

179

1*. Close all Chrome windows

180

1*. 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.

181

1*. Check the "Use Own Browser" option within the Browser Settings.

182

1. **Keep Browser Open(Optional):**

183

1*. Set CHROME_PERSISTENT_SESSION=true in the .env file.

=== Docker Setup ===