時間がかかるWebでの調べ物をAIに丸投げしよう！

, ,

時間がかかるWebでの調べ物をAIに丸投げしよう！「browser-use」の使い方
https://pc.watch.impress.co.jp/docs/column/nishikawa/1654156.html

『西川 和久2025年1月17日 06:16

　去年(2024年)年末あたりから「browser-use」の文字がXのタイムラインに流れ出し、試したところなかなか面白かったので、今回ご紹介したい。一言で言えば「LLMとWebブラウザを使ったタスク処理」だが、一体何ができるか！？について、順に解説したい。

その1 – cli版

　まず、browser-useとは何か？簡単に解説しよう。去年12月に「Claude Desktop」+「MCP」の組み合わせでローカルのファイルやDB(データベース)にアクセスしたが、そのWebブラウザ版と言えば分かりやすいだろうか？
記事を要約する(AI)3行まとめ

関連記事
【西川和久の不定期コラム】「MCP」でチャットAIが外に飛び出せる！Claude DesktopでDBとファイルを操作してみた(2024/12/11)

　つまり、プロンプト(Prompt)でLLMに指示、それをWebブラウザ操作的に解釈して実行。Webブラウザ上の特定文字を読み取り、LLMへ戻すといった仕掛けとなる。

　説明するより実際操作した方が早いので環境構築を行ないたい。今回はLLMにbrowser-use推奨の「OpenAI / gpt-4o」を使用する。

　実行には、Pyhtonとその仮想環境の「mini conda」なども必要。Pyhtonのバージョンは3.12。仮想環境は「venv」でも「uv」でもいいのだが、ここでは筆者が愛用しているmini condaを使用する。以下、適当なフォルダを作って実行(実際は%以降のコマンド)。

(base) % mkdir browser-use-cli
(base) % cd browser-use-cli
(base) % conda create -n browser-use python=3.12
(base) % conda activate browser-use
(browser-use) % pip install browser-use
(browser-use) % playwright install

これで準備完了だ。browser-use自体はpipのライブラリであるためこの1行でOK。playwrightは、筆者も初めて使ったのだが、主な用途はE2Eテスト自動化フレームワークとのこと。Microsoftが開発している。

　動かすには簡単なコードが必要となる。たとえばtest.pyに以下のコードを記述。YOUR_API_KEYにはOpenAI APIキーを入力する。

from langchain_openai import ChatOpenAI
from browser_use import Agent
import asyncio

OPENAI_API_KEY=”YOUR_API_KEY”

async def main():
agent = Agent(
task=”””
あなたは記事監視エージェントです。
以下のURLから記事を監視をしてください。
対象記事: AI

下記の形式で5件見つけてください。

  • 日付
  • タイトル
  • URL
    “””,
    llm=ChatOpenAI(openai_api_key=OPENAI_API_KEY, model=”gpt-4o”),
    )
    result = await agent.run()
    print(result)

asyncio.run(main())

VSCode上のtest.py
　実行は python test.py。

筆者2024年の記事からAI関連5件をピックアップ
　結果は以下の通り(そのままでは見づらいので整形)。

1.

下記の形式で5件見つけてください。

  • 日付
  • タイトル
  • URL
    “””,
    ここになる。つまり、この中を書き換えればいろいろ応用可能。コード書くのが面倒かも知れないが、この程度なら何とかなるのではないだろうか？

その2 – WebUI版
　ここまでは、エディタなどを使ってtask=””” … “””, の中身を実行する内容に応じて書き換える必要があった。簡単と言えば簡単なのだが、面倒！っと思う人用に先日WebUI版もリリースされた。インストールは以下の通り(この時、cli版のmini conda環境に加える形となる)。

(browser-use) % git clone https://github.com/browser-use/web-ui
(browser-use) % cd web-ui
(browser-use) % pip install -r requirements.txt

.env に API Keyを設定
(browser-use) % cp .env.example .env
OPENAI_API_KEY=XXXX

WebUI 起動
(browser-use) % python webui.py –ip 127.0.0.1 –port 7788
※ Webブラウザ http://127.0.0.1:7788 で起動。他とPortなどが当たる時は変更する
　起動すると以下のような画面が現れる。最低限触るのはLLM Configuration。

anthropic
　claude-3-5-sonnet-20240620, claude-3-opus-20240229
openai
　gpt-4o, gpt-4, gpt-3.5-turbo
deepseek
　deepseek-chat
gemini
　gemini-2.0-flash-exp, gemini-2.0-flash-thinking-exp, gemini-1.5-flash-latest, gemini-1.5-flash-8b-latest, gemini-2.0-flash-thinking-exp-1219
ollama
　qwen2.5:7b, llama2:7b
azure_openai
　gpt-4o, gpt-4, gpt-3.5-turbo

これだけに対応しているので、API Keyを持っているプロバイダを選ぶ。この時、deepseek / deepseek-chatのようにVision(画像認識)非対応モデルは、Agent Settings / Use Visionのチェックを外す。

　これらLLM API関連部分は、src/utils/utils.pyに入っているので、少し書き換えればローカルで動作するLM StudioのOpenAI APIを使うことも可能。ただM4 Max 128GBに収まる程度のモデルだと商用より賢くないため、動くのは動くものの正常な結果は得られなかった(Phi-4、llama-3-8b-chat、Qwen2-VL-7B-Instruct、wen2.5-7b-chat-1106、sky-t1-32b-previewで確認)。

　LM StudioなどOpenAI API互換のアプリで実行するには

src/utils/utils.py

の113行辺りに

　”openai”: [“gpt-4o”, “gpt-4”, “gpt-3.5-turbo”],
とあるので、このように使用するモデル名を追加

　”openai”: [“wen2.5-7b-chat-1106”, “gpt-4o”, “gpt-4”, “gpt-3.5-turbo”],
Agent Settings
・非Visionモデルの場合は Use Vision のチェックを外す
LLM Configuration
・LLM Provider: openai
・Model Name: 追加したモデル名
・Base URL: http://192.168.11.49:1234/v1 endpointを追記

これで動作する。うまく動いたモデルがあったらぜひ筆者に教えてほしい。

Agent Settings。使用するモデルによってはUse Visionのチェックを外す

LLM Configuration

Browser Settings

Run Agent
　前置きが長くなってしまったが、OpenAI / gpt-4oはすべてデフォルトのままでOK。まず動作確認から。Run Agentに

“go to google.com and type ‘OpenAI’ click search and give me the first url”

とあるのでそのまま実行してみる(訳:google.com にアクセスして「OpenAI」と入力し、検索をクリックして最初のURLを教えてください)。

WebUIを使って”go to google.com and type ‘OpenAI’ click search and give me the first url”を実行。これで$0.03

　Results / Final Resultに“The first URL is https://openai.com.”とあるのであっている。なお、Resultsの白いブランク部分はwebm形式でWebブラウザが表示した内容を録画してあり、後から確認可能だ。

　以上のように、WebUIだとコードにあるプロンプト部分を毎回書き換える必要もなく、Run Agentに入力するだけ……と手軽だ。

　画面キャプチャはmacOSだが、Windows 11でもまったく同じ手順で動作することは確認している(扉の画面キャプチャ参照)。ハマる部分もなく、Python関連アプリのセットアップとしては簡単な方だろう。

実践編 – 渋谷から北海道に蟹鍋食べに行って一泊するとHow much！？

　WebUIが動いたので実践編。browser-useについてネットなどを調べるとログインが必要なサイトはダメっぽい。と言って単に検索すれば分かるものは面白くないので、複数の項目で検索し、得た金額も合算したい。そこで考えたのは、

以下のかかる合計費用および、それぞれの費用を計算/表示してください
-渋谷から札幌へ
-名店で蟹鍋を食べる
-ホテルに一泊
-札幌から渋谷に戻る

としてみた(笑)。

渋谷から北海道に蟹鍋食べに行って一泊するとHow much！？指示に従って自動で調べてる様子(Resultsの録画から)。約2分30秒
　結果はいかに！？

The estimated total cost for a 1-night, 2-day trip from Shibuya to Sapporo, including flights, dining at a famous restaurant, and a hotel stay, is between ¥36,871 and ¥55,871. This accounts for the following expenses:

  • Flights (Shibuya to Sapporo and back): ¥20,871
  • Dining (Crab hot pot in Sapporo): ¥6,000 to ¥15,000
  • Hotel (1 night): ¥10,000 to ¥20,000. 　合計金額3万6,871円から5万5,871円。え”！？そんなに安いの？という感じだ。新幹線で品川/新大阪間+食事と大差ない。 　内訳は飛行機:2万871円、蟹鍋が6,000から1万5,000円、ホテルが1万から2万円。 　鍋と宿は(インバウンド価格になっていなければ)そんなものかなという感じだが、飛行機が往復で約2万円？と、改めて自分で調べると片道8千円ちょっとからある。時期や時間にもよりだろうが、行けないことはないようだ。 　そしてこれを調べるのにかかった時間は約2分半。API費用はたった$0.21。ものにもよるだろうが人が調べるより速くて安いのでは！？と思えた。 　実際の動きは以下の通り。結構ちゃんと調べているのが分かる。これを人の手で行なうと、約2分半では済まないだろう。

{
“queries”: [
{ “description”: “渋谷から札幌までの航空券の価格” },
{ “description”: “蟹鍋 名店 札幌 価格” },
{ “description”: “札幌 ホテル 料金” },
{ “description”: “札幌から渋谷までの航空券の価格” },
{ “description”: “札幌で蟹鍋の価格の平均” },
{ “description”: “札幌ホテル平均料金” },
{ “description”: “名店で蟹鍋を食べる料金 札幌” },
{ “description”: “札幌におけるホテルの平均コストは？” },
{ “description”: “札幌における蟹鍋の平均コストは？” }
],
“travel_cost_estimates”: [
{
“description”: “渋谷から札幌への旅行費用の合計計算通例”,
“example_trip_cost”: {
“total_range”: “¥36,871 to ¥55,871”,
“details”: {
“flights”: “¥20,871 (往復、渋谷→札幌)”,
“dining”: “¥6,000から¥15,000 (蟹鍋、名店での食事)”,
“hotel_stay”: “¥10,000から¥20,000 (1泊)”
}
}
},
{ “description”: “やすい旅行費用計算事例 渋谷から札幌” },
{ “description”: “旅行の具体的な費用サンプル” },
{
“description”: “渋谷から札幌への1泊2日の旅行の費用計算例”,
“specific_trip_cost_example”: “1泊2日の旅行の費用例 渋谷から札幌”
}
]
}
　細かいことを言えば、渋谷から空港、札幌から空港までの電車代(往復)も入れて欲しかった(笑)。おそらく空港までの電車代を明示的に指示しておけば入ったかと思われる。ある意味、筆者のミスとも言える。

　余談になるが、Apple Intelligenceは、Webブラウザだけでなく、メールやメモ、画像など、ローカルにある情報を横断的に扱えるAIエージェントだ。もちろんテキストだけでなく、音声で入出力可能。browser-useよりさらに何歩も進んだAI環境となっている。MicrosoftもCopilotでこのぐらいのことをしてほしいところ。

　以上のようにbrowser-use (WebUI)は、LLMとWebブラウザを使いプロンプトに従ってタスク処理するアプリケーションだ。MCPでLLMが外に出たが、これもその一種と言える。

　現在正常に動作させるにはOpenAI / gpt-4oなど、商用の大規模モデルが必要となるものの、これがローカルPCで動作するPhi-4辺りで動き出すとまた違った世界が見れるようになるだろう。

　既に対応LLMの中に「ollama qwen2.5:7b」,「llama2:7b」など7Bクラスが入っているので、そう遠くない日に(正常に)動き出すのではないだろうか？』