Browser Useとは
Browser Useは生成AIのAPIを活用し、AIがWebサイトを直接操作できるようにするためのPython向けライブラリです。このツールを使うとブラウザを自動的に制御しながらWebページの情報を収集したり、特定のタスクを自動で実行したりできます。
Python環境に「pip install」で簡単にインストールでき、フォームの自動入力やデータ抽出など幅広い用途に対応可能。視覚情報とHTMLの構造を同時に扱えるため、複雑な操作も正確に実行できます。
Browser UseとClaude Computer Useの違い
Browser Useに似た機能として、Claudeで利用できるComputer Useがあります。
どちらもAIを活用した自動化ツールですが、それぞれの操作対象や実装方法には大きな違いがあります。
利用環境
| Browser Use | 所有者のPCで実際にブラウザを立ち上げて操作できる。 |
|---|---|
| Claude Computer Use | Anthropic社が提供する仮想環境内で、AIがブラウザ操作を含むPC操作を行う。 |
操作対象
| Browser Use | Webブラウザ内での操作に特化しており、ブラウザの制御やWebページの操作が可能。 |
|---|---|
| Claude Computer Use | コンピュータ全体のデスクトップ環境を操作対象としており、アプリケーションやファイル操作など幅広いタスクに対応。 |
実装方法
| Browser Use | Pythonライブラリとして提供され、プログラム内にコードを記述して直接操作を実行します。 |
|---|---|
| Claude Computer Use | Anthropic社のAPIを使用してAIモデルに指示を出し、操作を行わせる仕組みです。 |
このようにBrowser UseはWeb操作に特化したツールである一方、Claude Computer Useはコンピュータ全体を包括的に操作できる柔軟性を持っているのが特徴です。
とはいえ筆者の所感だとClaudeのComputer Useはまだ処理のエラーやミスが多く、精度に関してはBrowser useの方が優れているように感じます。
Browser Useの使い方
今回は下記の環境でBrowser Useを使ってみます。
- OS：Windows 11
- 言語：Python（3.10以上必須）
- エディタ：VSCode
- ターミナル：Power Shell
はじめにBrowser Use実行用のフォルダを作成します。
今回は下記の手順でデスクトップ上にフォルダを作成します。
【デスクトップへ移動してtest-browser-useというフォルダを作成】
cd desktop
mkdir test-browser-use
Pythonの開発環境を整える
次にPythonで仮想環境を作るためのツールである「venv」を使い、先ほど作成したフォルダにPythonの仮想環境を作ります。コマンドは下記の通りです。
python -m venv browser-use-env
apythonの仮想環境を作ったあとは、browser-useライブラリをインストールします。
pip install browser-use
インストール後は下記のコマンドでPythonの仮想環境を有効化します。
.\compute-use-env\Scripts\activate
a次に下記のコマンドでWebブラウザを自動で操作するための自動化ツール「playwright」をインストールします。
playwright install
生成AIのAPIを指定する
次に現在のtest-browser-useフォルダに環境変数を管理するための「.env」ファイルを作成します。実行コマンドは下記の通りです。
New-item -Path ".env" -ItemType "file"
作成したenvファイルをVSCodeで開き、Browser Useで利用する生成AIのAPIを入力します。
Browser UseのGithubではOpenAIとAnthropicのAPIの入力例が記載されています。しかし筆者がAnthropicのAPIでテストすると、モデルが認識できなかったり画像に対応していない（Claude 2.1の場合）などでうまくいきませんでした。
もし解決策を知っている人がいれば、コメントにて教えていただけると嬉しいです。
Open AIのAPIだとうまく行ったので、今回は下記のコードをenvファイルに入力して作業を進めていきましょう。
OPENAI_API_KEY=ここにOpen AIのAPIキーを入力
ANTHROPIC_API_KEY=
実行ファイルを作成してプロンプトを入力する
次に下記のコマンドで「browser-use.py」ファイルを作成します。ちなみにファイル名は任意で書き換えても構いません。
New-Item -Path "browser-use.py" -ItemType "file"VSCodeでbrowser-useファイルを開き、下記のコードを入力します。
from langchain_openai import ChatOpenAI
from browser_use import Agent
import asyncio
async def main():
agent = Agent(
task="沖縄県の明日の天気を調べてください。",
llm=ChatOpenAI(model="gpt-4o-mini"),
)
result = await agent.run()
print(result)
asyncio.run(main())
上記のtask欄にブラウザで操作したい内容をプロンプトとして入力します。
また、このコードを入力すると下記のようにエラーが表示される方もいるかもしれません。
上記のエラーは「langchain_openai」と「browser_use」のインストールがうまくいっていない可能性があります。そんな時は下記のコマンドを実行してこれらをインストールして下さい。
pip install langchain_openai browser_use
これで実行するための準備は整いました。
AIでブラウザを操作してみる
Power Shellに戻り、下記のコマンドを実行してください。
python .\browser-use.py
すると上記のようにAIが自律的にブラウザを開き、プロンプト通りの内容を調べて表示してくれます。
ブラウザは処理の実行が終わると自然に閉じ、プロンプトの回答は今回だとPower Shellに記載されます。
たとえば今回の回答では「沖縄の明日の天気は曇り時々晴れで、最高気温18.9°、降水確率40%、湿度61%、風速6.7m/sです。」と表示されました。
クリック作業や要約作業も対応できる
Browser Useは検索だけでなく、特定のURLへアクセスしてクリック処理したり、内容を要約することも可能。実際に下記のプロンプトを指定して実行してみました。
task="https://trends.codecamp.jp/このURLの「リスキリング」というタグで一番新しい記事をクリックし、内容を要約して下さい。"実行結果は下記の通りです。
プロンプト通りtrendsのトップ画面を開いていますね。
プロンプトでは「リスキリング」と指定しましたが、それとは違うタグへアクセスしています。
「original-future」タグの記事を開き、内容を要約して終了しました。
上記記事の要約が英語としてPower Shellに表示されています。プロンプト通りの実行はできませんでしたが、どんどんAIによる自動処理が進んでいることを実感できるのではないでしょうか。
