Windows11に「browser-use-ui」をインストール(１からステップバイステップ）

この記事では、Windows 11環境でbrowser-use-uiをインストールするための手順をステップバイステップで解説します。
当初、ChatGPTにインストール手順を聞けば一発だろうとたかを括っていたのですが、意外にハマったところが多く、結果色々ハマったポイントを修正したインストール手順を解説します。

正直、chatGPTの出現でこんな解説記事はお役御免と思っていましたが、相当久しぶりに書きます😅

前提

以下の条件の環境スタートです

• Windows 11がインストールされているPC
• インターネット接続環境
• Google Chrome ブラウザがインストールされている

最近、PCを新しい機種に入れ替えたばかりなので、開発環境的なものが何もインストールされていません。そのため、本当にサラの状態からインストールしました。

2.必要なツールのインストール

Browser-useのインストールの為の前提になるツールのインストールを行います。この辺の前提がうまくchatGPTに伝わっていなかったのか、ハマったポイントが多々ありました🤣

2.1 Gitのインストール

Gitとは、ソフトウェア開発におけるバージョン管理システムの一つです。ファイルの変更履歴を記録し、複数人での開発を効率的に行えるようにするツールです。この手順でGitをインストールする理由は、browser-use-uiのソースコードをGitリポジトリからダウンロード（クローン）するためです。

1.Git公式サイトにアクセスします

2.”Download”をクリックしてWindows用のインストーラーをダウンロードします

3.インストーラーを起動し、画面の指示に従ってインストールします

4.インストール後、Powershellにて以下のコマンドでGitが正しくインストールされているか確認します

git --version

2.2 Pythonのインストール

browser-useはPythonで構築されているので、当然ながらpythonのインストールが必要です

1.Pythonインストールサイトにアクセスします

私は、以下のインストールサイトにアクセスしました。

2.最新版のPythonをダウンロードします

3.インストーラーを起動し、”Add Python to PATH”にチェックを入れてインストールします

4.インストール後、Powershellにて以下のコマンドでPythonが正しくインストールされている

python --version

2.3 Node.jsのインストール

Node.jsは、JavaScriptをサーバーサイドで実行するためのランタイム環境です。これにより、フロントエンド開発やバックエンド開発の両方に対応できます。また、Node.jsにはnpm（Node Package Manager）が付属しており、必要なライブラリやツールを簡単にインストールできます。この手順では、browser-use-uiが依存するパッケージをインストールするためにNode.jsを使用します。

1.Node.js公式サイトにアクセスします

2.推奨版（LTS）をダウンロードします

3.インストーラーを起動し、画面の指示に従ってインストールします

4.インストール後、以下のコマンドでNode.jsとnpmが正しくインストールされているか確認します

node --version
npm --version

2025/1/18時点では以下のようなバージョンになります。

3. 設定に必要な情報の取得

3.1 OpenAI APIキーの取得

LLMは選択できるのですが、一番オーソドックスなOpenAIのAPIキーを取得しておきます

1.OpenAI公式サイトにアクセスし、アカウントを作成します

2.ログイン後、ダッシュボードにアクセスします

3.”API Keys”セクションで”Create new secret key”をクリックします

4.発行されたキーを安全な場所に保存します（メモ帳等で一旦ローカルに保存)

3.2 Chromeのパスの確認

Browser Useとして利用するブラウザとしては、Chromeを使う想定で、Chromeのインストール先を確認します

1.Windowsの検索バーに”Google Chrome”と入力します

2.Chromeのショートカットを右クリックし、”ファイルの場所を開く”を選択します

3.表示されたショートカットを右クリックし、”プロパティ”を選択します

4.”リンク先”フィールドにChromeの実行可能ファイルへのパスが表示されます

例: C:\Program Files\Google\Chrome\Application\chrome.exe

5.このパスをOpenAIのAPIキーと同じくローカルのメモに保存します

5. browser-use-uiのインストール

5.1 インストールフォルダの作成

エクスプローラー等で、インストールするフォルダを作成します
あるいは、Powershellを管理者権限で、開き以下のコマンドを実行します(buw2というフォルダを作成)

mkdir buw2

このあと、Powershellで作成したフォルダに移動します

cd buw2

5.2 リポジトリのクローン

以下のコマンドを実行してbrowser-use-uiリポジトリをクローンします。

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

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

5.3 配置ファイルの確認

dir コマンドで中身を確認し、
webui.py や requirements.txt, .env.example などがあるかをチェックします。

5.4 仮想環境を「uv」で作成

1.仮想環境用フォルダ作成

以下の例は「venv」というフォルダを作成しています

mkdir venv

2.仮想環境の構築

上記の仮想環境用フォルダに仮想環境を作成します

python -m venv venv

3.仮想環境のアクティブ化

.\venv\Scripts\activate

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

uv pip install -r requirements.txt

ちなみに、私の環境ではuvをコマンドとして認識せず、以下の方法で実行しました

python -m uv pip install -r requirements.txt

5.playwrightのインストール

playwright install

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

5.5 envファイルを作成

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

cp .env.example .env

作成されたファイルをエディタで開き、3で保存しておいたOpenAIキーやChromeのパスを記載します。
（””等で囲む必要はありません）

6. browser-use-uiの立ち上げ

ここまででインストールが終了したはずです。
以下は、立ち上げの手順です

6.1 PowerShellを立ち上げて、仮想環境をアクティブ化

Powershellを立上げて、インストールしたフォルダに移動したら4.3の手順を行います。

6.2 Web UIを起動

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

これで立ち上がります

6.3 URLにアクセスします

ターミナル上に Running on http://127.0.0.1:7788 と表示されたら、Webブラウザで同じURLへアクセスします。
ここでは、Chrome以外のブラウザでアクセスしたほうがスムーズです（私はEdgeを利用しました）

とりあえず、「Run Agent」というタブを選択して、Task Descriptionの内容を確認し、実行してみましょう。

6.4 Web UI 停止

PowershellにてCtrl+Cで停止。
仮想環境の停止は、deactivate
Powershellの終了は exit
です

参考サイト

以下のサイトはとても参考になりました。ベースMacでのインストールでしたが、Windowsについての解説も詳しいです。
ただ、ちょこちょこWindowsでハマったポイントを修正したのが上記記事です