見出し画像

【徹底解説】Browser-Use WebUIの設定方法、使い方をまるっと解説!

はじめに

ローカル環境のブラウザを自動操作できる「browser-use」は、最近、Xで注目を集めており、多くの方にとって新鮮かつ便利なツールです。

ところが、通常のbrowser-useはコマンドライン操作がメインのため、設定や操作に慣れない方にはハードルが高い面がありました。

そこで今回紹介する「Browser-use WebUI」は、画面上で設定を行えるユーザーインターフェースを備え、従来よりも簡単にブラウザの自動操作を試せるようになっています。

本記事では、Browser-use WebUIがどのような仕組みで動き、何が便利になったのかを解説します。


Browser-use WebUIとは

Browser-use WebUIは、ブラウザ自動操作を行う「browser-use」ライブラリに、画面上で使いやすいユーザーインターフェース(UI)を加えたツールです。

従来のbrowser-useではコマンドライン操作が中心でしたが、このWebUI版では、以下のように操作性が高まっています。

  • グラフィカルな操作画面
    ブラウザ上のパネルからタスク内容を指定し、クリックやフォーム入力などを自動化しやすくなりました。

  • 複数の大規模言語モデル(LLM)のサポート
    OpenAI、Azure OpenAI、Anthropic、Geminiなど、多様なモデルを切り替えながら試せます。

  • 独自ブラウザの利用
    ログイン状態を維持したChromeなど、自分のブラウザ環境をそのまま使えます。

  • 視覚処理機能(オプション)
    画面内の要素認識や画像解析もサポートし、より柔軟な自動操作が可能です。

Browser-use WebUIの設定方法

1. 事前に用意するもの

①Python 3.11 以上

  • まだインストールしていない場合は、Python公式サイトからインストーラをダウンロードしてください。

  • macOSの方はHomebrew (brew install python) などを活用すると便利です。

Homebrewを用いたPythonインストールの方法は下記の記事で記載しています。
HomebrewからのPythonインストール方法が分からないという方は合わせてご覧ください。

②ターミナル(コマンドプロンプト)

macOSなら「ターミナル」、Windowsなら「コマンドプロンプト」や「PowerShell」を使用します。

③インターネット接続

  • GitHubリポジトリのダウンロードや依存パッケージのインストールに必要です。

2. uvのインストール

uvは、仮想環境の作成とライブラリのインストールを簡略化するツールです。
すでにインストール済みの場合は、このステップは不要です。

pip3 install uv
  • macOSで複数バージョンの Python が混在している場合は、python3 -m pip install uvなどを試してください。

  • Windowsでも、同様にpip install uvでインストールできます(Python 3.11 が利用可能であることを事前にご確認ください)。

インストールが完了したら、下記コマンドなどでバージョンを確認しても良いでしょう。

uv --version

3. プロジェクト用のフォルダを作る

  1. フォルダを作成
    たとえばデスクトップ上に「browser-use-web-ui設定用フォルダ」という名前のフォルダを用意します。

  2. フォルダに移動

下記のコマンドで、作成したフォルダに移動します。

cd /Users/[User名]/Desktop/browser-use-web-ui設定用フォルダ

ここにブラウザ自動操作ツール一式を配置していきます。

ポイント: このフォルダの中にすべての関連ファイルや設定ファイルをまとめることで、後から迷わず管理しやすくなります。

4. リポジトリのクローン/ダウンロード

GitHubリポジトリを取得

  • Gitが使える場合:

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

最後の . は「現在のフォルダにクローンする」ことを示しています。

※Zipファイルをダウンロードした場合:
ダウンロードしたZipを解凍して、中身をすべて「browser-use-web-ui設定用フォルダ」に移してください。

配置を確認
ls (macOS/Linux) or dir (Windows) コマンドで中身を確認し、
webui.py や requirements.txt, .env.example などがあるかをチェックします。

5. 仮想環境を「uv」で作成

仮想環境の作成

uv venv --python 3.11

--python 3.11 は、Python3.11を使う指定です。実行後、このフォルダ内に .venv という仮想環境用のフォルダが作成されます。

仮想環境のアクティベート

source .venv/bin/activate

Windowsの場合は .venv\Scripts\activate を実行します。

6. 依存パッケージのインストール

requirements.txt のインストール

uv pip install -r requirements.txt

uv pip と記述することで、現在アクティベート中の仮想環境へ直接インストールできます。

「uvを使わない」場合は pip install -r requirements.txt としても構いません。

Playwrightのインストール

playwright install

ブラウザを自動操作するための必要なドライバを一括でセットアップします。

7. .env ファイルの作成と編集

Browser-use WebUIで独自のブラウザプロファイルやAPIキーを使う場合は、環境変数を設定するために.envファイルを利用します。

.envファイルを作成

.env.exampleをコピーして .envという名前のファイルを作ります。

cp .env.example .env

VSCodeやCursorで確認すると、.envファイルが作成されています。

エディタで .env を編集

CHROME_PATHやCHROME_USER_DATAなど、使用したいブラウザの実行ファイルパスとユーザープロファイルのパスを入力します。
APIキーが必要な場合(OpenAIなど)はここで設定してください。

例(macOSの場合)

CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" 
CHROME_USER_DATA="~/Library/Application Support/Google/Chrome/Profile 1" 
OPENAI_API_KEY="sk-XXXXXXXX"

8. Web UIの起動

ターミナルで webui.pyを実行

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

URLにアクセス
ターミナル上に Running on http://127.0.0.1:7788 と表示されたら、Webブラウザで同じURLへアクセスします。

ポイント:Chrome以外のブラウザ(FirefoxやSafariなど)でアクセスすると、後述の「Use Own Browser」機能が有効にしやすくなります。 Chromeを使っている方は、Use Own Browserをオフにして試す場合はChromeでもOKです。

URLにアクセスすると、WebUIが表示されます。

ここから先は

1,928字 / 28画像

AGIラボ

¥2,980 / 月
このメンバーシップの詳細

この記事が参加している募集