【AIがブラウザを操作】Browser Use の Web UI を使ってみる　〜結局あきらめたDockerでの構築の作業履歴を添えて〜

2025年1月16日 07:30

こんにちは、スクーティーという会社の代表のかけやと申します。

弊社は生成AIを強みとするベトナムオフショア開発・ラボ型開発や、生成AIコンサルティングなどのサービスを提供しており、最近はありがたいことに生成AIと連携したシステム開発のご依頼を数多く頂いています。

最近、AI エージェントがウェブサイトを操作できるようにする「Browser Use」というライブラリが注目されていますね。このツールは、まるで魔法のように、AI が私たちの代わりにウェブサイトを自由自在に操作できるようにしてくれるんです。例えば、「Google フライトでバリ島からオマーンへの一番安い片道航空券を探してきて」と AI にお願いするだけで、AI が自動的にブラウザを操作して、最安値のフライト情報を探してきてくれるようになります。これって、すごく便利だと思いませんか？

さらに、「Browser Use WebUI」という、この Browser Use をもっと簡単に使えるようにする、グラフィカルなユーザーインターフェースも公開されています。これを使えば、プログラミングの知識がなくても、誰でも簡単に AI にブラウザ操作をさせることができるんです。まるで、自分専用の AI 秘書を雇ったような気分になれますね！

この記事では、早速Browser Use WebUIをローカル環境に構築して使ってみたので、その結果をお伝えします。Dockerでの構築に苦戦した経緯と、最終的にローカル環境で構築するまでの手順を詳細に解説し、その過程で得られた知見を共有します。皆様、私の屍の上を越えていってくだされば幸いです。

Browser Use とは

Browser Use の概要

Browser Use は、AI エージェントが人間のようにウェブブラウザを操作できるように設計された、Python ライブラリです。

これまでのブラウザ操作の自動化といえば、決められた操作をプログラムする、というのが一般的でした。しかし、Browser Use を使えば、まるで人間が操作しているかのように、AI がウェブサイトを閲覧し、情報を取得し、必要な操作を行ってくれるのです。

Browser Use でできること (例):

ウェブサイトの閲覧、検索、クリック、入力などの操作
ログインが必要なサイトへのアクセス
フォームへの自動入力と送信
複数のウェブサイトを連携させた複雑なタスクの実行

Browser Use の特徴:

様々な大規模言語モデル (LLM) と連携可能 (OpenAI の GPT-4o、Anthropic の Claude 3 など)
ヘッドレスブラウザを使用し、バックグラウンドで動作可能
柔軟性と拡張性が高く、特定のウェブサイトに特化した操作の自動化も可能

Browser Use は、AI とブラウザ操作の連携を容易にし、AI の可能性を大きく広げる、非常に強力なツールと言えるでしょう。

Browser Use の WebUI とは

Browser Use WebUI は、Browser Use をより簡単に操作するための、グラフィカルなユーザーインターフェース (WebUI) を提供するプロジェクトです。

WebUI は、Gradio というライブラリを使って構築されており、直感的でわかりやすいデザインになっています。
そのため、プログラミングの知識がない人でも、簡単に Browser Use の機能を試すことができます。

Browser Use WebUI の特徴:

Gradio を使用した、使いやすい Web インターフェース
コードを書かずに、AI エージェントにブラウザ操作を指示可能
様々な LLM との連携をサポート
ユーザーのブラウザをそのまま利用可能 (再ログインや認証が不要)
高画質な画面録画で AI の操作履歴を確認可能
AI タスク間でブラウザウィンドウを開いたままにできる

Browser Use WebUI は、Browser Use の機能を最大限に引き出し、より身近にするための強力なツールです。

Browser Use WebUI の構築手順

※しばらくは僕の試行錯誤が書かれているだけなので、構築方法だけサクッと知りたい方は、「ローカルPCに構築」までスクロールしてしまってください！

Docker での構築（うまくいかなかった）

当初、私は Docker を使用して Browser Use WebUI の環境を構築しようと試みました。しかし、（おそらく）M2 チップを搭載した Mac 特有の問題と思われる、 apt-get update 時の GPG 署名検証エラーに悩まされました。以下に、試行錯誤の過程を時系列で示します。

本検証は、使用しているPC環境やBrowser Useのバージョンによって現象や結果は大きく変わってくるはずですので、あくまでも参考までに。本記事執筆時点で、Browser Useは活発に更新されているOSSになります。

一応言い訳をさせていただくと、私の本職は会社経営でありエンジニアではありませんので、本職の方が見れば簡単に解決できるような問題かもしれませんし、私の作業ログも全く素っ頓狂なことをやっている可能性は大いにあります。

私のPC環境とBrowser Use のバージョン

OS: macOS Sonoma 14.4.1
チップ: Apple M2 (arm64 アーキテクチャ)
Docker Desktop: v4.37.2
browser-use: 0.1.18

まず、Browser Use WebUI の公式リポジトリで提供されている Dockerfile をベースに、以下の修正を加えました。

最終的なDockerfile

FROM --platform=linux/amd64 ubuntu:22.04

# タイムゾーン、wget, gpg, curl, python3.11 関連をまとめてインストール
ENV DEBIAN_FRONTEND=noninteractive

# 古い鍵の削除と apt のキャッシュクリア
RUN rm /etc/apt/trusted.gpg.d/* && \
    apt-get clean

# 時刻同期 (apt-get update の前に移動)
RUN apt-get update && apt-get install -y ntpdate && ntpdate ntp.ubuntu.com

# パッケージリストの更新
RUN apt-get update -o Acquire::Retries=3

# 必要なパッケージのインストール
RUN apt-get install -y tzdata wget gnupg curl python3.11 python3.11-venv python3.11-dev

# ca-certificates の再インストールとアップデート
RUN apt-get update && \
    apt-get install -y --reinstall ca-certificates && \
    update-ca-certificates

# httpsを使用
RUN sed -i 's/http:/https:/g' /etc/apt/sources.list

# Google Chrome リポジトリの追加 (別の方法で公開鍵をインポート)
RUN curl -sSL https://dl.google.com/linux/linux_signing_key.pub | gpg --dearmor -o /usr/share/keyrings/google-archive.gpg
RUN echo "deb [arch=amd64 signed-by=/usr/share/keyrings/google-archive.gpg] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list

# リポジトリファイルの内容を確認
RUN cat /etc/apt/sources.list.d/google-chrome.list

# パッケージリストの更新 (Google Chrome リポジトリ追加後)
RUN apt-get update -o Acquire::Retries=3

# パッケージリストの内容を確認 (デバッグ用)
RUN ls -l /var/lib/apt/lists/

# apt のキャッシュをクリア
RUN apt-get clean

# インストール可能なパッケージリストを確認 (デバッグ用)
RUN apt-cache policy google-chrome-stable

# 5秒間待機 (追加)
RUN sleep 5

# Python 3.11 仮想環境を作成
RUN python3.11 -m venv /opt/venv
# パスを通す
ENV PATH="/opt/venv/bin:$PATH"

# browser-use のインストール
RUN pip install --no-cache-dir git+https://github.com/browser-use/browser-use.git
RUN python3 -m playwright install

RUN apt-get install -o Debug::pkgProblemResolver=yes -y \
    unzip \
    xvfb \
    libxss1 \
    libnss3 \
    libnspr4 \
    libasound2 \
    libatk1.0-0 \
    libatk-bridge2.0-0 \
    libcups2 \
    libdbus-1-3 \
    libdrm2 \
    libgbm1 \
    libgtk-3-0 \
    libxcomposite1 \
    libxdamage1 \
    libxfixes3 \
    libxrandr2 \
    xdg-utils \
    fonts-liberation \
    dbus \
    xauth \
    xvfb \
    x11vnc \
    tigervnc-tools \
    supervisor \
    net-tools \
    procps \
    git \
    python3-numpy \
    python3-pip

RUN apt-get install -o Debug::pkgProblemResolver=yes -y google-chrome-stable

# 不要なファイルの削除
RUN rm -rf /var/lib/apt/lists/*

# Set up working directory
WORKDIR /app

# Copy requirements and install Python dependencies
COPY requirements.txt .
# browser-use>=0.1.18 の行を削除 (browser-use は上記でインストール済み)
RUN sed -i '/browser-use/d' requirements.txt
RUN pip install --no-cache-dir -r requirements.txt

# Install Playwright and browsers with system dependencies
ENV PLAYWRIGHT_BROWSERS_PATH=/ms-playwright
RUN playwright install --with-deps chromium
RUN playwright install-deps

# Copy the application code
COPY . .

# Set up supervisor configuration
RUN mkdir -p /var/log/supervisor
COPY supervisord.conf /etc/supervisor/conf.d/supervisord.conf

EXPOSE 7788 6080 5900

CMD ["/usr/bin/supervisord", "-c", "/etc/supervisor/conf.d/supervisord.conf"]

元々のDockerfile

FROM python:3.11-slim

# Install system dependencies
RUN apt-get update && apt-get install -y \
    wget \
    gnupg \
    curl \
    unzip \
    xvfb \
    libgconf-2-4 \
    libxss1 \
    libnss3 \
    libnspr4 \
    libasound2 \
    libatk1.0-0 \
    libatk-bridge2.0-0 \
    libcups2 \
    libdbus-1-3 \
    libdrm2 \
    libgbm1 \
    libgtk-3-0 \
    libxcomposite1 \
    libxdamage1 \
    libxfixes3 \
    libxrandr2 \
    xdg-utils \
    fonts-liberation \
    dbus \
    xauth \
    xvfb \
    x11vnc \
    tigervnc-tools \
    supervisor \
    net-tools \
    procps \
    git \
    python3-numpy \
    && rm -rf /var/lib/apt/lists/*

# Install noVNC
RUN git clone https://github.com/novnc/noVNC.git /opt/novnc \
    && git clone https://github.com/novnc/websockify /opt/novnc/utils/websockify \
    && ln -s /opt/novnc/vnc.html /opt/novnc/index.html

# Install Chrome
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
    && echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list \
    && apt-get update \
    && apt-get install -y google-chrome-stable \
    && rm -rf /var/lib/apt/lists/*

# Set up working directory
WORKDIR /app

# Copy requirements and install Python dependencies
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

# Install Playwright and browsers with system dependencies
ENV PLAYWRIGHT_BROWSERS_PATH=/ms-playwright
RUN playwright install --with-deps chromium
RUN playwright install-deps

# Copy the application code
COPY . .

# Set environment variables
ENV PYTHONUNBUFFERED=1
ENV BROWSER_USE_LOGGING_LEVEL=info
ENV CHROME_PATH=/usr/bin/google-chrome
ENV ANONYMIZED_TELEMETRY=false
ENV DISPLAY=:99
ENV RESOLUTION=1920x1080x24
ENV VNC_PASSWORD=vncpassword

# Set up supervisor configuration
RUN mkdir -p /var/log/supervisor
COPY supervisord.conf /etc/supervisor/conf.d/supervisord.conf

EXPOSE 7788 6080 5900

CMD ["/usr/bin/supervisord", "-c", "/etc/supervisor/conf.d/supervisord.conf"]

最終的なdocker-compose.yml

version: "3.9"
services:
  browser-use-webui:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "7788:7788"  # Gradio default port
      - "6080:6080"  # noVNC web interface
      - "5900:5900"  # VNC port
      - "9222:9222"  # Chrome remote debugging port
    environment:
      - OPENAI_ENDPOINT=${OPENAI_ENDPOINT:-https://api.openai.com/v1}
      - OPENAI_API_KEY=${OPENAI_API_KEY:-}
      - ANTHROPIC_API_KEY=${ANTHROPIC_API_KEY:-}
      - GOOGLE_API_KEY=${GOOGLE_API_KEY:-}
      - AZURE_OPENAI_ENDPOINT=${AZURE_OPENAI_ENDPOINT:-}
      - AZURE_OPENAI_API_KEY=${AZURE_OPENAI_API_KEY:-}
      - DEEPSEEK_ENDPOINT=${DEEPSEEK_ENDPOINT:-https://api.deepseek.com}
      - DEEPSEEK_API_KEY=${DEEPSEEK_API_KEY:-}
      - BROWSER_USE_LOGGING_LEVEL=${BROWSER_USE_LOGGING_LEVEL:-info}
      - ANONYMIZED_TELEMETRY=false
      - CHROME_PATH=/usr/bin/google-chrome
      - CHROME_USER_DATA=/app/data/chrome_data
      - CHROME_PERSISTENT_SESSION=${CHROME_PERSISTENT_SESSION:-false}
      - DISPLAY=:99
      - PLAYWRIGHT_BROWSERS_PATH=/ms-playwright
      - RESOLUTION=${RESOLUTION:-1920x1080x24}
      - RESOLUTION_WIDTH=${RESOLUTION_WIDTH:-1920}
      - RESOLUTION_HEIGHT=${RESOLUTION_HEIGHT:-1080}
      - VNC_PASSWORD=${VNC_PASSWORD:-vncpassword}
      - PERSISTENT_BROWSER_PORT=9222
      - PERSISTENT_BROWSER_HOST=localhost
      - CHROME_DEBUGGING_PORT=9222
      - CHROME_DEBUGGING_HOST=localhost
    volumes:
      - ./data:/app/data
      - ./data/chrome_data:/app/data/chrome_data
      - /tmp/.X11-unix:/tmp/.X11-unix
    restart: unless-stopped
    shm_size: '2gb'
    cap_add:
      - SYS_ADMIN
    security_opt:
      - seccomp=unconfined
    tmpfs:
      - /tmp
    healthcheck:
      test: ["CMD", "nc", "-z", "localhost", "5900"]
      interval: 10s
      timeout: 5s
      retries: 3

元々のdocker-compose.yml

services:
  browser-use-webui:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "7788:7788"  # Gradio default port
      - "6080:6080"  # noVNC web interface
      - "5900:5900"  # VNC port
      - "9222:9222"  # Chrome remote debugging port
    environment:
      - OPENAI_ENDPOINT=${OPENAI_ENDPOINT:-https://api.openai.com/v1}
      - OPENAI_API_KEY=${OPENAI_API_KEY:-}
      - ANTHROPIC_API_KEY=${ANTHROPIC_API_KEY:-}
      - GOOGLE_API_KEY=${GOOGLE_API_KEY:-}
      - AZURE_OPENAI_ENDPOINT=${AZURE_OPENAI_ENDPOINT:-}
      - AZURE_OPENAI_API_KEY=${AZURE_OPENAI_API_KEY:-}
      - DEEPSEEK_ENDPOINT=${DEEPSEEK_ENDPOINT:-https://api.deepseek.com}
      - DEEPSEEK_API_KEY=${DEEPSEEK_API_KEY:-}
      - BROWSER_USE_LOGGING_LEVEL=${BROWSER_USE_LOGGING_LEVEL:-info}
      - ANONYMIZED_TELEMETRY=false
      - CHROME_PATH=/usr/bin/google-chrome
      - CHROME_USER_DATA=/app/data/chrome_data
      - CHROME_PERSISTENT_SESSION=${CHROME_PERSISTENT_SESSION:-false}
      - DISPLAY=:99
      - PLAYWRIGHT_BROWSERS_PATH=/ms-playwright
      - RESOLUTION=${RESOLUTION:-1920x1080x24}
      - RESOLUTION_WIDTH=${RESOLUTION_WIDTH:-1920}
      - RESOLUTION_HEIGHT=${RESOLUTION_HEIGHT:-1080}
      - VNC_PASSWORD=${VNC_PASSWORD:-vncpassword}
      - PERSISTENT_BROWSER_PORT=9222
      - PERSISTENT_BROWSER_HOST=localhost
      - CHROME_DEBUGGING_PORT=9222
      - CHROME_DEBUGGING_HOST=localhost
    volumes:
      - ./data:/app/data
      - ./data/chrome_data:/app/data/chrome_data
      - /tmp/.X11-unix:/tmp/.X11-unix
    restart: unless-stopped
    shm_size: '2gb'
    cap_add:
      - SYS_ADMIN
    security_opt:
      - seccomp=unconfined
    tmpfs:
      - /tmp
    healthcheck:
      test: ["CMD", "nc", "-z", "localhost", "5900"]
      interval: 10s
      timeout: 5s
      retries: 3

試したこと:

--platform=linux/amd64 の指定: M2 Mac は arm64 アーキテクチャですが、 google-chrome-stable は amd64 用に提供されているため、 FROM 命令で --platform=linux/amd64 を指定し、 amd64 用の Ubuntu イメージをベースにするようにしました。ただし、 --platform=linux/amd64 を指定すると、Rosetta 2 を使用して amd64 用の命令をエミュレートする必要があり、これが問題の原因の一つとなっていました。
時刻同期: コンテナ内の時刻がずれていると証明書の有効期限エラーが発生する可能性があるため、 ntpdate をインストールして時刻を同期しました。しかし、この時点では apt-get update が失敗するため、ntpdate のインストール自体ができませんでした。
apt-get clean の実行: 古いキャッシュが原因で問題が発生することを防ぐために、 apt-get clean を実行しました。しかし、キャッシュをクリアしても、根本的な問題は解決しませんでした。
apt-get update のリトライ: 一時的なネットワークの問題に対処するために、 apt-get update に -o Acquire::Retries=3 オプションを追加しました。しかし、リトライを試みても、署名検証エラーは解消されませんでした。
ca-certificates の再インストールとアップデート: 証明書関連の問題を解決するために、ca-certificates を再インストールし、 update-ca-certificates を実行しました。しかし、 apt-get update が失敗するため、ca-certificates の再インストールもできませんでした。
https への変更: セキュリティを強化するために、sed -i 's/http:/https:/g' /etc/apt/sources.list でリポジトリの URL を https に変更しました。しかし、証明書の問題が解決していないため、https に変更すると、さらにエラーが発生しやすくなりました。
古い鍵の削除: rm /etc/apt/trusted.gpg.d/* で古い鍵を削除しました。しかし、このコマンドは Ubuntu の公式リポジトリの鍵まで削除してしまうため、逆効果でした。
ubuntu-keyring の再インストール: apt-get install -y --reinstall ubuntu-keyring で ubuntu-keyring を再インストールしました。しかし、apt-get update が失敗するため、ubuntu-keyring の再インストールもできませんでした。
security.ubuntu.com を archive.ubuntu.com に変更 (非推奨): 一時的な対策として、セキュリティ上のリスクを承知の上で、security.ubuntu.com を archive.ubuntu.com に変更しました。しかし、この変更でも問題は解決しませんでした。
apt-get update の前に ca-certificates をインストール: 証明書の問題を回避するために、apt-get update の前に ca-certificates をインストールするようにしました。しかし、apt-get update が失敗するため、ca-certificates のインストールもできませんでした。
browser-use を requirements.txt から削除し、pip install git+https://github.com/browser-use/browser-use.git で直接インストール: browser-use>=0.1.18 が PyPI に存在しない、またはバージョン指定に問題がある可能性があったためです。
--no-check-certificate オプションの使用 (非推奨): wget に --no-check-certificate オプションを追加して、証明書の検証を無視することを試みました。しかし、このオプションは GPG 鍵のダウンロードには影響しないため、問題は解決しませんでした。
--allow-unauthenticated オプションの使用 (非推奨): apt-get install に --allow-unauthenticated オプションを追加して、署名が検証できないパッケージのインストールを許可することを試みました。しかし、apt-get update が失敗するため、ca-certificates のインストール自体ができませんでした。

Docker環境構築時の課題の切り分けと結論

最終的に、以下のような 最小限の Dockerfile を用意し、「とにかく apt-get update & apt-get install -y ca-certificates を試す」構成となりました。

FROM ubuntu:22.04RUN apt-get update && apt-get install -y ca-certificates

実行したコマンド一覧

docker compose build --no-cache
- Docker Compose の設定（docker-compose.yml）を使ってイメージをビルド。
- 途中でエラー（E: The repository 'http://archive.ubuntu.com/ubuntu jammy InRelease' is not signed.）が発生。
docker build --no-cache -t test-image .
- 直接 Dockerfile のあるディレクトリで docker build を行い、同様に apt-get update でエラー。
docker run -it ubuntu:22.04 bash
- シンプルに公式 Ubuntu イメージを起動し、手動で apt-get update を試す。
- これでも同様に “At least one invalid signature was encountered.” というエラーが出る場合が確認された。
docker run -it -e HTTP_PROXY= -e HTTPS_PROXY= ... ubuntu:22.04 bash
- 環境変数でプロキシを無効にして同様にテストしたが、エラーは継続。

これらのコマンドを繰り返し試した結果、いずれも apt-get update で「署名エラー (invalid signature)」が発生し、ビルドやインストールが中断する状況に陥っています。

発生したエラー内容

Dockerfile をビルドした際、またはコンテナ内で手動で apt-get update した際に、以下のようなエラーが出ます（例）:

Err:1 http://archive.ubuntu.com/ubuntu jammy InRelease
At least one invalid signature was encountered.
W: GPG error: http://archive.ubuntu.com/ubuntu jammy InRelease: At least one invalid signature was encountered.
E: The repository 'http://archive.ubuntu.com/ubuntu jammy InRelease' is not signed.
…

要約すると:

apt-get update が 「リポジトリの GPG 署名が無効」 と判断して失敗し、
結果として E: The repository 'http://archive.ubuntu.com/ubuntu jammy InRelease' is not signed. というエラーが返されているものを推察されます。

エラーの背景・考えられる原因

Docker Desktop が内部でプロキシ / 中継を使用している か、または macOS や社内ネットワークでリポジトリ通信が書き換えられている ため、公式 Ubuntu リポジトリから受け取ったパッケージリストを「改ざんされている」と判断している可能性が高いという結論に至りました。ここから先の解決方法が見つからなかったため、別の方法でローカル環境構築することにしました。
実際、docker info を見ると HTTP Proxy: http.docker.internal:3128 が表示されるケースがあり、環境変数をオフにしても Docker Desktop 内部の設定が残存していることが疑われる。
結果として、“At least one invalid signature was encountered.” という署名検証エラーにより apt-get update が完走しない状態となっている。

ローカル PC に構築

Docker での環境構築に手間取ったため、最終的には Mac PC 上に直接 Python 環境を構築し、Browser Use WebUI を動作させることにしました。

１．STEPuv のインストール

まず、Python のパッケージ管理ツールである uv をインストールします。以下のコマンドをターミナルで実行してください。

curl -LsSf https://astral.sh/uv/install.sh | sh

２．Python 仮想環境の作成とアクティベート

次に、Python 3.11 の仮想環境を作成し、アクティベートします。

uv venv --python 3.11
source .venv/bin/activate

３．リポジトリのクローン

Browser Use WebUI のリポジトリをクローンします。

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

４．依存関係のインストール

必要なパッケージをインストールします。

uv pip install -r requirements.txt
uv pip install python-dotenv gradio

５．Playwright のインストール

次に、Playwright とそのブラウザをインストールします。

playwright install

６．環境変数の設定

.env.example を .env にコピーし、必要な環境変数を設定します。特に、OPENAI_API_KEY など使用したい言語モデルの API キーを設定してください。

cp .env.example .env

.env ファイルを編集し、以下のように設定します。

CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
CHROME_USER_DATA="~/Library/Application Support/Google/Chrome/Default"

ANONYMIZED_TELEMETRY=false

OPENAI_API_KEY=ご自身のOpenAI APIキーをここに入力
ANTHROPIC_API_KEY=ご自身のAnthropic APIキーをここに入力
GOOGLE_API_KEY=ご自身のGoogle APIキーをここに入力

７．WebUI の起動

以下のコマンドで WebUI を起動します。

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

以下のメッセージがコンソールに出力され、Browser UseのWebUIが起動する。

INFO     [browser_use] BrowserUse logging setup complete with level info
INFO     [root] Anonymized telemetry enabled. See https://github.com/gregpr07/browser-use for more information.
* Running on local URL:  http://127.0.0.1:7788

To create a public link, set `share=True` in `launch()`.

上記状態で、以下のURLにブラウザでアクセスするとBrowser Useの画面が開きます。

http://127.0.0.1:7788

Browser Use の WebUI を使ってみる

上記URLへアクセスすると、以下のような画面が開きます。Browser UseのWebUIにはいくつかの設定画面があります。が、まあまあ分かりづらく、何のための設定なのかよくわからないものもいくつかありましたが、説明を記載しておきます。

エージェント設定（Agent Settings）

Agent Type

マニュアルには直接 “org” や “custom” というパラメータは記載されていませんが、Agent を生成するときにこれらの要素を切り替えることで「標準的な挙動 (org)」または「拡張機能を備えた独自挙動 (custom)」のようなエージェントを実装できるという意味合いだと思われますが、違いがよくわかりませんでした。
org: マニュアルにあるデフォルト設定 (controller=base Controller、標準の system prompt など) で動作するエージェントをイメージ。
custom: コード側で controller や system_prompt_class を差し替え、拡張ロジックを備えたエージェントを指すと考えられます。

Max Run Steps

実行中、エージェントが繰り返し行う思考ステップ (Action-Observation-Thought のサイクル) の最大数
これを超えるとエージェントは強制終了し、「無限ループ」や「不必要に長い実行」を防ぎます。

Max Actions per Step

マニュアルには明示的に “max_actions_per_step” の例はありませんが、1 回のステップ内で許容するアクション数 (たとえばブラウザ操作やツール呼び出しなど) を制限する目的だと考えられます。

Enable visual processing capabilities (Use Vision)

エージェントが “視覚的情報” を扱えるようにするかを選択します。ウェブページのスクリーンショットや画像など“ビジュアル要素”を解析できるモードを ON にする設定。
オンにするとより高度なウェブ操作 (画像/スクショ解析) が可能だが、トークン使用量が増える
オフにすると、テキストベースのみでブラウザ操作を行うため、ビジュアル要素は無視
選択するLLMによってはVision機能がないものもあるので、その場合はOffにしないとエラーがでると思われます。

Enable Tool Calls in content (Use Tool Calls in Content)

「エージェントが生成するテキスト内でツール呼び出しを行えるかどうか」を制御するための設定と推測されます。ただし、この設定もマニュアルには明記されていません。
チェックが ON → テキスト内に書かれたツール呼び出しコマンドを自動解釈 & 実行
チェックが OFF → ツール呼び出しはエージェント内部の制御ルーチンのみ、テキスト上の特殊キーワードは無視

LLM設定（LLM Configuration）

Browser Use の WebUI : Agent Configuration画面

LLM Provider / Model Name

使用する言語モデルとそのプロバイダーを選択します。例えば、OpenAI / o1等です。

Temperature

言語モデルの出力のランダムさ（数が少ないほど指示に忠実）
本システムの用途としては言語モデルに創造性を発揮してもらう必要はないと思うので「0」でいいと思います。

Base URL / API Key

使用する言語モデルのAPIを接続するための情報を入力します。
環境構築時に作成した.envファイルに記載済みであれば入力は不要です。

ブラウザ設定（Browser Settings）

Browser Use の WebUI : Browser Settings画面

Use your existing browser instance (Use Own Browser)

すでに起動している外部ブラウザ (Chrome DevTools ProtocolやWebSocket経由など) を使用するかどうかを選ぶ設定。
自分の環境で起動したChromeを使いたい場合や、外部のブラウザサービスに接続したい場合にオンにする。

Keep Browser Open between Tasks (Keep Browser Open)

複数のエージェント実行を連続して行う際に、処理終了後もブラウザを閉じずに保持し続けるかを決める。
処理終了後に自動でブラウザを閉じる代わりに、継続的にブラウザインスタンスを使い回したいときにオンにする。

Run browser without GUI (Headless Mode)

画面表示なし（ヘッドレス）でブラウザを起動するかどうかを指定。
ヘッドレスだと見た目のウィンドウは出ないが、一部サイトはヘッドレスを検出して制限する可能性もある。

Disable browser security features (Disable Security)

ブラウザのセキュリティ機能（クロスサイト保護など）を無効化する。
クロスサイトiFrameなどで便利だが、不審サイト閲覧時のリスクが高くなるので注意。

Enable saving browser recordings (Enable Recording)

ブラウザ操作の録画やスクリーンキャプチャを保存する機能をオンにするかどうか。
オンにすると動画ファイルやスクリーンショットが指定フォルダに出力される。

Window Width / Window Height (Browser window width/height)

ブラウザの表示領域の幅や高さをピクセル単位で設定。
サイトレイアウト検証や特定UI操作に合わせるのに利用。

Recording Path (Path to save browser recordings)

ブラウザ録画ファイルを保存するディレクトリを指定する。
オンのとき、このパスに動画やキャプチャが保存される。

Trace Path (Path to save Agent traces)

エージェントやブラウザの操作ログ（トレースファイル）を保存するディレクトリを指定。
操作の詳細ログをzipなどで出力するため、デバッグや解析用に使う。

Agent History Save Path (Specify the directory where agent history should be saved.)

エージェントの実行履歴（アクション結果、エラー、訪問URLなど）を保存するディレクトリ。

エージェント実行（Run Agent）

一通り設定が終わったら、最後のこの画面に、どのような操作をブラウザ上でやってほしいかをプロンプトの形で入力し、「Run Agent」ボタンを押します。するとAgentが動作するためのタブ、あるいはウィンドウが開き、Agentがブラウザを操作してくれます。

Browser Useの動作確認

以下のプロンプトを入力して実行してみました。
弊社のコーポレートサイトにアクセス、お問い合わせページへ遷移し、適当な内容で問い合わせを送信するというケースです。

1. go to https://www.scuti.jp
2. click the link to the contact form
3. enter the below info, then submit the form.

- Company: Scuti Inc.
- Name: Kakeya Tomohide
- Email: kakeya@scuti.asia
- Tel: 09000000000
- Purpose: I want to get a quote to develop the system
- Contents of requests: This is a test

- Make sure to check if you can find some checkbox for reCAPTCHA or agreement to the term of use or something
- If you can find the message "please do NOT submit for the purpose of the sales", you can stop the process without submitting.
- If you can NOT find the text box or text area to enter above info by text, you can check checkboxes or choose a radio button of the most similar option to the above info instead of entering the text.
- If you can NOT find even the checkbox or radio button, you can choose the most similar option to the above info in the pulldown list instead of entering the text or choosing an option.
- If you get an error 2 times, you MUST stop the process.

実行結果が以下になります。等倍速でしばらくキャプチャしているので、結構長いです。

結果として、今回のようなお問い合わせを送るという簡単なケースでもうまくいきませんでした。
ものすごく限定的なプロンプトを書けばうまくいったかもしれませんが、例えば以下の点がうまく動作しませんでした。

「入力内容がプロンプトにない場合、それに近しいチェックボックス、ラジオボタン、プルダウンリストがあればそれを選ぶ」という、若干汎用性をもたせた指示が動作せず、結局入力欄を見つけられなかった。
なぜか、利用規約に同意するためのチェックボックスをLLMが見つけられなかった。
申し込みボタンを押すという操作ができなかった。「Submit」と指示しているから？「●●ボタンをクリックしてね」くらいの限定的な指示でないといけないのかも。
何回もリトライしているからかもしれませんが、1処理に結構時間がかかる。ヘッドレスだと速いかも？

ということで、E2Eテストとかに使えるかなと思ったのですが、まだ精度は実用的なものではなさそうでした。

また、使い方がまだよくわかってないのですが、エージェントの処理を止める「Stop」ボタンを押しても「Stopping...」になったまま止まらないことが結構ありました。その場合は、以下のコマンドで7788番ポートを使用しているプロセスを調べ、そのプロセスを殺すという強引な方法で対処しました汗

$ lsof -i :7788

## 上記コマンドの出力で、PID欄に記載されているIDを指定
$ kill <PID>

最後に

最後までお読みいただき、ありがとうございます！
ぜひ　スキ　と　フォロー　をお願いします！

弊社では、LLM（大規模言語モデル）やアーキテクチャの選定、技術検証、生成AIを使用したプロトタイピングやシステム開発、お客様社内での啓蒙活動等を対応させていただく「生成AIコンサルティング」サービスを提供しています。

また、業務利用できるChatGPTのような仕組みである「セキュアGAI」や、生成AIとOCRを組み合わせた「AI文書読み取りサービス」といったAIソリューションも提供しています。

ぜひお気軽にお問い合わせください！

この記事は私が経営する株式会社スクーティーのコーポレートブログの下記記事を焼き直したものです。