AIエージェントの新星「browser-use」とは？ChatGPTによるWeb自動化の可能性と費用

はじめに

こんにちは、フォースタートアップス株式会社の高場です。
2024年10月に入社しました。
テクノロジーグループで社内プロダクトのSREをやっております。

今回の記事は、最近話題のAIエージェントについてです。
中でも、2024年11月にリリースされ頻繁に更新が続けられているbrowser-useについて紹介します。

browser-useとは

browser-useはChatGPTでブラウザを操作できるPythonライブラリです。

browser-useは内部でブラウザでのテスト自動化を実現できるツールであるPlaywrightを使っています。

GitHub：https://github.com/microsoft/playwright

browser-useはPlaywrightを通じてブラウザを立ち上げることで、プロンプトに入力した操作をブラウザで実行してくれます。
Twitterへの投稿やECサイトでの商品購入なども可能です。
利用にはOpenAI APIへの登録が必要です。

参考：https://github.com/browser-use/browser-use/tree/main/examples/use-cases

興味を持ったきっかけ

私がbrowser-useに興味を持ったのは、自動化に興味があるためです。
普段からAlexa等のホームスピーカーのように、ChatGPTにも何かタスクをやってもらいたいと考えていました。
ホームスピーカーのいいところは、家電の操作等を定型アクションで行えることです。
反面、音楽の検索などはファジーな命令を理解してくれない場合も多々あります。

そこでbrowser-useを見つけ、「あいまいな命令でAIに操作をさせることができる」点に興味を持ちました。
実際使ってみてどうだったかをまとめていきます。

注目を集めるbrowser-use

browser-useは昨年12月から急速に認知されはじめ、GitHubのスター数は2025/2/21時点で30.3kです。

AIエージェント分野自体が2023年から注目されている中で、browser-useも注目を集めており、これらを取り上げた記事も増えています。

browser-useを使ってみる

さっそく使ってみます。
ローカルへの導入方法についてはすでに詳しく解説した記事がたくさんありますので、本記事では触れません。

browser-useのフロント画面を作ってみた

ローカルで動作するフロント画面です。
ソースコード上でプロンプトを毎回書き換えるのは面倒なので、Next.jsでさくっと実装しました。

トラベルサイトでホテルを検索させてみた

簡単な操作をさせてみました。
プロンプトはトラベルサイトでホテルを検索するような内容です。

プロンプトを入力して実行すると、下記のようなログが出ています。
各ステップでHTMLの解析やブラウザへの操作を行っています。

結果

結果は下記のようなものでした。

特にフォーマット等は指定していないのですが、複数の候補を挙げてくれました。
事前にログインしておけば、予約等も可能だと思います。
（その場合、AIに持たせるログイン情報等の扱いには注意が必要です）

OpenAI APIの料金

料金体系

browser-use自体はOSSですが、OpenAI APIを利用しており、その分の料金がかかります。
OpenAI APIは下記のような料金体系になっており、トークン単位で課金されます。
今回の検証に使用したgpt-4o-miniは、100万トークンあたり$0.15（22円程度）です。

モデル	料金
gpt-4o	$2.50/1M 入力トークン
gpt-4o-mini	$0.150/1M 入力トークン

参考：https://openai.com/ja-JP/api/pricing/

AI分野でのトークンについて

トークンとは、機械学習モデルに入力する文字列の量を表す最小単位です。
ざっくり、単語という理解で問題ありません。

下記の例文を見てみます。

例文: 「猫が窓の外を見ている」  
トークン化: ["猫", "が", "窓", "の", "外", "を", "見ている"]

ChatGPTなどの生成AIは、トークン化された文字列を読み込んで学習を行っています。
そのため、課金もトークン単位で行われるようです。

参考：

今回の検証での利用コスト

全体

画像はこの記事を書くための検証で使用した総トークン数です。
正確な回数は記録していないのですが、簡単な検索を数十回程度実施した結果、5,531,506トークンとなりました。

実際に入力したプロンプトは単純なものなので、実際よりかなり多い数字になっています。
ここから、内部でブラウザを操作するためにさらに複雑なプロンプトへの変換が行われていると推測できます。

1回あたりのコスト

ざっくりですが、1回あたりのコストを出してみます。

「トラベルサイトで京都のホテルを検索する」といったプロンプトでは、下記のような結果になりました。

消費数：平均約172,611.667トークン
3回実行した場合の平均をとったところ、1回あたり¥3.89程度でした

トークン数	結果
172,680	成功
172,856	成功
172,299	成功

失敗した場合

同じプロンプトでも、期待した動作とならないことがあります。
そうした場合では、下記のような結果になります。
期待した動作にならなかった場合でも、APIはコールされているので料金はかかります。

トークン数	結果
296,772	失敗
295,031	失敗
591,040	失敗

原因はわかりませんが、ChatGPTが画面上でうまく指定したワードを見つけられない時があるようです。
こうした場合には見つかるまで探索を繰り返すので、ステップ数が増えやすい傾向があります。

上記の対策として、browser-useの初期化時にmax_stepsオプションを指定することができます。

公式の使用例

async def post_tweet(agent: Agent):

    try:  
        await agent.run(max_steps=100)  
        agent.create_history_gif()  
        print("Tweet posted successfully!")  
    except Exception as e:  
        print(f"Error posting tweet: {str(e)}")

https://github.com/browser-use/browser-use/blob/main/examples/use-cases/post-twitter.py

このオプションを指定することで、失敗時に不要なステップが増大するのを抑えることが可能になります。
上記の検索程度であれば10ステップ程度で十分に行程を完了することができたので、やりたいことに合わせて設定するのが良いと思います。

おわりに

browser-useでブラウザを操作することで、Web上での定型操作などを柔軟なプロンプトで自動化することができる可能性があります。
現状できることはブラウザ上での操作に限られていますが、browser-useはまだ開発が始まったばかりであり、今後更なる進化が期待できます。

当初私がやりたかったスマート家電の操作等はまだ難しそうです。
しかし、今後の可能性は広がっていると感じました。

機会があれば、音声入力を文字起こししてbrowser-useに認識させることでブラウザを操作することにもチャレンジしたいと思っています。

今後も動向を注視していきます。
ありがとうございました。

for Startups Tech blog

このブログのデザインを刷新しました。（2023/12/26）

browser-useでChatGPTにブラウザを操作させる