[](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 a 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: Gemini, 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. ## Installation Guide Read the [quickstart guide](https://docs.browser-use.com/quickstart#prepare-the-environment) or follow the steps below to get started. > Python 3.11 or higher is required. First, we recommend using [uv](https://docs.astral.sh/uv/) to setup the Python environment. ```bash uv venv --python 3.11 ``` and activate it with: ```bash source .venv/bin/activate ``` Install the dependencies: ```bash uv pip install -r requirements.txt ``` Then install playwright: ```bash playwright install ``` ## Usage 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:** - 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. ### Options: ### `--theme` - **Type**: `str` - **Default**: `Ocean` - **Description**: Specifies the theme for the user interface. - **Options**: The available themes are defined in the `theme_map` dictionary. Below are the options you can choose from: - **Default**: The standard theme with a balanced design. - **Soft**: A gentle, muted color scheme for a relaxed viewing experience. - **Monochrome**: A grayscale theme with minimal color for simplicity and focus. - **Glass**: A sleek, semi-transparent design for a modern appearance. - **Origin**: A classic, retro-inspired theme for a nostalgic feel. - **Citrus**: A vibrant, citrus-inspired palette with bright and fresh colors. - **Ocean** (default): A blue, ocean-inspired theme providing a calming effect. **Example**: ```bash python webui.py --ip 127.0.0.1 --port 7788 --theme Glass ``` ### `--dark-mode` - **Type**: `boolean` - **Default**: Disabled - **Description**: Enables dark mode for the user interface. This is a simple toggle; including the flag activates dark mode, while omitting it keeps the interface in light mode. - **Options**: - **Enabled (`--dark-mode`)**: Activates dark mode, switching the interface to a dark color scheme for better visibility in low-light environments. - **Disabled (default)**: Keeps the interface in the default light mode. **Example**: ```bash python webui.py --ip 127.0.0.1 --port 7788 --dark-mode ``` ## (Optional) Configure Environment Variables Copy `.env.example` to `.env` and set your environment variables, including API keys for the LLM. With ```bash cp .env.example .env ``` **If using your own browser:** - Set `CHROME_PATH` to the executable path of your browser and `CHROME_USER_DATA` to the user data directory of your browser. You can just copy examples down below to your `.env` file. ### Windows ```env CHROME_PATH="C:\Program Files\Google\Chrome\Application\chrome.exe" CHROME_USER_DATA="C:\Users\YourUsername\AppData\Local\Google\Chrome\User Data" ``` > Note: Replace `YourUsername` with your actual Windows username for Windows systems. ### Mac ```env CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" CHROME_USER_DATA="~/Library/Application Support/Google/Chrome/Profile 1" ``` ## Changelog - [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).