AIが勝手にブラウザを動かす？「Browser-Use」でWeb操作を自動化するAIエージェントの衝撃

こんにちは、ぴこぴこです！今回は、最近エンジニア界隈でめちゃくちゃ話題になっているオープンソースのAIエージェント用ライブラリ「Browser-Use」を実際に動かしてみたので、そのインプレッションと簡単な導入ハンズオンをお届けします。

これまでのWebスクレイピングや自動化ツール（Seleniumなど）は、「このボタンをクリックして、このフォームに値を入力する」といった細かい手順を人間がコードで指定しなければなりませんでした。しかし、この「Browser-Use」を使えば、「ブラウザを開いて、格安航空券の最安値を検索してスプレッドシートにまとめて」と自然言語で指示するだけで、AIが状況を自分で判断しながらブラウザを勝手に操作してタスクを完遂してくれます。

ロボットがパソコン画面を見つめるイメージ 出典: Farhad Irani / Pexels

「Browser-Use」とは？

Browser-Useは、LLM（大規模言語モデル）をWebブラウザと接続し、自律的にWebブラウジングを行わせるためのPythonライブラリです。

内部的にはブラウザ自動制御ツールであるPlaywrightをベースにしており、AIが「今画面に何が表示されているか（HTML構造とスクリーンショット）」を読み取り、「次にどのボタンを押すべきか、どこに文字を入力すべきか」を判断して実行するループを繰り返します。

対応するLLMも幅広く、OpenAIのGPT-4oはもちろん、AnthropicのClaude 3.5 Sonnetや、Ollama経由のローカルLLM（Llama 3など）とも連携可能です。

動作の仕組み：AIはどうやって画面を認識しているのか？

AIが人間と同じようにブラウザを操作できる秘密は、Browser-Useが実装している「DOM（Document Object Model）のシリアライズ機能」にあります。

通常、WebページのHTMLソースコードは膨大で、そのままLLMに入力するとトークン（文字数制限）をあっという間に消費してしまいます。Browser-Useは、ブラウザ内の表示要素を整理し、「リンクや入力フォームなど、インタラクション可能な要素」だけにフィルタリングした上で、それぞれの要素に「[1]」「[2]」といったインデックス番号を割り振ります。

LLMにはこの簡略化されたテキスト情報と、現在の画面のスクリーンショットが渡されます。LLMはそれを見て、以下のように判断します。

「目的のフライト情報を検索するため、インデックス番号[12]のテキストボックスに『東京』と入力し、次に[15]の検索ボタンをクリックする」

この動作を実行後、再び次の画面のDOM情報とスクリーンショットがLLMに送られ、タスクが完了するまで「認識 → 判断 → 実行」のサイクル（Agent Loop）が回り続けます。途中で予期せぬポップアップ広告やログイン画面が出現しても、AIが自律的に「閉じるボタン」を探してクリックしたり、指示されたログイン情報を入力したりしてリカバリーしてくれます。

クイックスタート：3分でAIにブラウザを操作させる

それでは、実際にローカル環境でBrowser-Useを動かしてみましょう！Python 3.11以上の環境が必要です。

1. ライブラリのインストール

ターミナルを開き、以下のコマンドでBrowser-UseとPlaywrightをインストールします。

pip install browser-use
playwright install

2. 環境変数の設定

今回はOpenAIのAPIを使用します。APIキーを環境変数に設定してください。

# Windows (PowerShell) の場合
$env:OPENAI_API_KEY="your-api-key-here"

# macOS/Linux の場合
export OPENAI_API_KEY="your-api-key-here"

3. スクリプトの作成と実行

以下のPythonコードを agent_test.py として保存します。

import asyncio
from browser_use import Agent
from langchain_openai import ChatOpenAI

async def main():
    # 使用するLLMの初期化（GPT-4oを指定）
    llm = ChatOpenAI(model="gpt-4o")
    
    # エージェントの初期化（タスク内容を自然言語で記述）
    agent = Agent(
        task="Googleで『AIエージェント 最新動向』と検索し、最初に出てきた記事のタイトルとURLを教えてください。",
        llm=llm,
    )
    
    # 実行
    result = await agent.run()
    print("【実行結果】")
    print(result)

if __name__ == "__main__":
    asyncio.run(main())

スクリプトを実行すると、自動的にブラウザ（Chromium）が立ち上がり、Googleの検索窓に文字が入力され、結果が表示される様子がリアルタイムで確認できます！

python agent_test.py

プログラムのコードが動くディスプレイ画面 出典: Daniil Komov / Pexels

実際に動かしてみてわかったポイント

良い点

エラーからの自己復旧がすごい: 途中でクッキーの同意ポップアップが出て画面が遮られても、AIが勝手に「Agree」をクリックして処理を続行しました。
コードが極めてシンプル: わずか数行のPythonコードで、実用的なブラウザエージェントが完成します。

注意点

APIコストの管理: エージェントが次の行動を決めるたびに画面のDOM情報をLLMに送信するため、ループ回数が増えるとトークン消費量（＝API料金）がかさみます。最大ループ数を制限する設定（max_steps）を入れておくのが無難です。
実行速度: 毎回LLMの推論を挟むため、従来の決め打ちスクリプトに比べると動作はゆっくりです。

まとめ：AIエージェント時代の本格的な幕開け

Browser-Useは、これまでの「RPA（ロボティクス・プロセス・オートメーション）」の概念を根本から変えるポテンシャルを持っています。定型業務だけでなく、「競合他社の最新価格を毎朝巡回してスプレッドシートに記録する」「自社WebアプリのUI変更時にリンク切れがないか自動でブラウジングテストする」といった非定型で柔軟性が求められる作業も、自然言語の指示だけで代替できるようになります。

まずは手元の簡単なタスクから、AIにブラウザの舵取りを任せてみてはいかがでしょうか？

お役立ち情報

Browser-Use GitHub リポジトリ Browser-Useの公式ソースコードと詳細なドキュメント（英語）。
Playwright 公式サイト Browser-Useの裏で動いている高速・高機能なブラウザ自動化ツールのドキュメント（英語）。
Qiita - AIエージェントに関する記事一覧国内の開発者によるAIエージェントの作成事例や、Browser-Useの使い方に関する最新知見が集まるコミュニティページ（日本語）。

参考

Browser-Use Team. (2024). “Browser-Use: Make website automation easy with LLMs.” GitHub Repository.