← Back to list

browser-useなる”AI agentがウェブブラウザを操るライブラリのお試し

browser-useでウェブから情報取得

GO2 · 2025-01-04 15:41 · 2 claps · 9.7 min read
#ai #web-scraping #browser-use #ai-agent #automation
Open on Medium ↗
Wiki topics: AGT · AI Agents AI · AI · General

browser-useなるAI agentがウェブブラウザを操るライブラリのお試し

こんばんは〜

もう明日で連休も終わりとは、、、、早いですね〜😇

今回は、年末にXで見かけたbrowser-useライブラリを本当に1回だけ試してみたので、備忘録として残したいと思います〜(これからはもっと類似のライブラリが増えていくんだろうなぁ👀)

[embed]

(ぶっちゃけ既に色んな方が記事書いているので、ほぼ同じ内容になってしまいますので悪しからず、、、)

browser-useとは?

Browser-useは、AIエージェントがウェブブラウザを自動操作するためのPythonライブラリです!

複数タブの同時管理や並列処理による効率化など、高度なブラウザ操作ができちゃいます😆

複雑なウェブタスクの自動化や、複数のAIエージェントによる同時並行処理が実現できるそうです〜(お試しではやっていない笑)

[embed]GitHub - browser-use/browser-use: Make websites accessible for AI agents Make websites accessible for AI agents. Contribute to browser-use/browser-use development by creating an account on…github.com

Browser-useの主な特徴

以下のような機能を備えています:

  • Web要素の自動操作: ボタン、リンク、フォームといったWeb要素を自動で抽出・操作できます。
  • マルチタブ管理: 複数のタブを効率的に管理し、タスクを並行して実行することが可能です。
  • エラー修正機能: 強力なエラー修正機能があり、動作の安定性を確保します。
  • カスタマイズ性: ファイル保存やデータベース操作、通知機能など、ユーザー独自のアクションを簡単に追加できます。

さらに、Browser-useは以下のAIモデルとも互換性があります:

  • GPT-4
  • Claude 3
  • Llama 2

また、LangChainフレームワークともスムーズに統合できるため、より柔軟でパワフルなAI活用が可能です💪

ライブラリのアーキテクチャ概要

Browser-useのアーキテクチャは、AIを活用したWeb操作を可能にするために、4つの主要なコンポーネントが連携して動作する仕組みになっています⚙️

4つの主要コンポーネント

  1. Agent(エージェント) ユーザーの指示を受け取って、大規模言語モデル(LLM)を活用しながらアクションの計画を立てます。
  2. Controller(コントローラー) エージェントが計画したアクションを実際に実行します。
  3. Browser(ブラウザ) Playwrightを使って、実際のウェブブラウザとやり取りをします。
  4. DOM Webページの構造を分析し、エージェントが要素を認識しやすく、操作しやすいように整理します。

システム設計の特徴

このモジュール化された設計によって、以下のような利点が得られます:

  • タスクを効率的に実行
  • エラーをしっかりと処理
  • さまざまなAIモデルやフレームワークと簡単に統合

Browser-useは、これらのコンポーネントがうまく連携することで、AIを使ったウェブ自動化をもっと直感的でパワフルなものにしてくれるライブラリです!

いざ、お試し実践!

早速、本家のGithubに上がっているコードも参考にしながら動かしてみたいと思います!

まずはターミナルを開いて使うディレクトリを作成し、移動します〜

mkdir test_project
cd test_project

次に、仮想環境を立ち上げ、起動させます

python -m venv .venv
source .venv/bin/activate

そして、必要ものをインストールしていきます〜

pip install browser-use
playwright install
pip install lxml_html_clean

次に、先ほど作った”test_project”ディレクトリに.envファイルを作成し、ファイル内にapiキーを記載しておきます(私はopenaiのapiを使用しました)

OPENAI_API_KEY = 'openaiのapiキーを記載'

これで準備はできましたので、以下の内容を含むmain.pyも”test_project”ディレクトリに置きます

from langchain_openai import ChatOpenAI
from browser_use import Agent
from dotenv import load_dotenv
import os
import asyncio

load_dotenv()

async def main():
    api_key = os.getenv("OPENAI_API_KEY")
    if not api_key:
        raise ValueError("OPENAI_API_KEYが設定されていません。")

    agent = Agent(
        task="Yahoo天気での今日の東京の気温を取得してください",
        llm=ChatOpenAI(model="gpt-4o-mini"),
    )
    result = await agent.run()
    print(result)

asyncio.run(main())

あとは、terminal上でmain.pyを実行するのみです!

python main.py

実行結果は、、、、

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.
INFO     [agent] 🚀 Starting task: Yahoo天気での今日の東京の気温を取得してください
INFO     [agent] 
📍 Step 1
INFO     [agent] 🤷 Eval: Unknown - The previous goal is not applicable as no actions have been taken yet.
INFO     [agent] 🧠 Memory: Need to retrieve today's temperature for Tokyo from Yahoo Weather.
INFO     [agent] 🎯 Next goal: Navigate to Yahoo Weather and find the temperature for Tokyo.
INFO     [agent] 🛠️  Action 1/3: {"go_to_url":{"url":"https://weather.yahoo.co.jp/"}}
INFO     [agent] 🛠️  Action 2/3: {"scroll_down":{"amount":300}}
INFO     [agent] 🛠️  Action 3/3: {"scroll_to_text":{"text":"東京"}}
INFO     [controller] 🔗  Navigated to https://weather.yahoo.co.jp/
INFO     [controller] 🔍  Scrolled down the page by 300 pixels
INFO     [controller] 🔍  Scrolled to text: 東京
INFO     [agent] 
📍 Step 2
INFO     [agent] 🤷 Eval: Unknown - The previous goal is not applicable as no actions have been taken yet.
INFO     [agent] 🧠 Memory: Need to retrieve today's temperature for Tokyo from Yahoo Weather. The temperature is visible in the interactive elements.
INFO     [agent] 🎯 Next goal: Extract the temperature for Tokyo.
INFO     [agent] 🛠️  Action 1/1: {"extract_content":{"value":"text"}}
.
.
.
.
INFO     [agent] 
📍 Step 3
INFO     [agent] 👍 Eval: Success - The temperature for Tokyo was successfully extracted from the page.
INFO     [agent] 🧠 Memory: Today's temperature for Tokyo is 10°C with a low of 3°C. This information is noted for future reference.
INFO     [agent] 🎯 Next goal: Complete the task and provide the result.
INFO     [agent] 🛠️  Action 1/1: {"done":{"text":"今日の東京の気温は10°Cで、最低気温は3°Cです。"}}
INFO     [agent] 📄 Result: 今日の東京の気温は10°Cで、最低気温は3°Cです。
INFO     [agent] ✅ Task completed successfully
.
.
.
.
.

おお〜🎉

taskに対して、しっかりと情報取れてそうですね!(見返すと、プロンプトの日本語変ですね、、、)

今回のタスクはあまり使った甲斐はありませんでしたが、使い道がたくさんありそうなライブラリですね〜🧐

ちなみに、api料金は?

気になるところかなと思いますが、今回のシンプルなタスクで以下の使用量でした

あまり参考にならないような、、、、、、

まぁやっぱりタスクの難易度や対象のWebページ次第ですよね!笑

さらなる活用方法

上はただただ動かしただけでしたので、githubに載っているコードを修正している例やカスタムアクションを実施している例を載せてるブログを最後に紹介しておきます!

[embed]browser-useでインタラクティブなスクレイピング:最新情報にアクセス - Qiita はじめにMBA取得に向けた小論文や面接の準備に追われていたため、ここしばらく記事を書く時間がありませんでした。しかし、会社が冬期休暇に入り、少し余裕ができたので、久しぶりに記事を書いてみることに...qiita.com

[embed]browser-useによるブラウザ操作自動化のサンプル集 browser-use を使う上で詳しいドキュメントがなかったので、自分で使ってみたことをまとめてみました。 browser-use の基礎的なところは以下にまとめてあります。 BrowserConfigの headlessを True…zenn.dev

[embed]AI エージェントがウェブブラウザを操作できるようにする Browser-Use の実現方法を解析する - Qiita はじめにBrowser Use のソースコードを読んだ中で重要だと感じたポイントをまとめてメモとして残しておくBrowser Use とはBrowser Use は、AIエージェントがウェブブ...qiita.com

今回も読んでいただき、ありがとうございました!

それでは!🦉


메타데이터
post_id
ed37daba08fd
slug
browser-useなる-ai-agentがウェブブラウザを操るライブラリのお試し-ed37daba08fd
url
https://medium.com/@GO2/browser-use%E3%81%AA%E3%82%8B-ai-agent%E3%81%8C%E3%82%A6%E3%82%A7%E3%83%96%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%82%92%E6%93%8D%E3%82%8B%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AE%E3%81%8A%E8%A9%A6%E3%81%97-ed37daba08fd
canonical_url
https://medium.com/@GO2/browser-use%E3%81%AA%E3%82%8B-ai-agent%E3%81%8C%E3%82%A6%E3%82%A7%E3%83%96%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%82%92%E6%93%8D%E3%82%8B%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AE%E3%81%8A%E8%A9%A6%E3%81%97-ed37daba08fd
author_url
https://medium.com/@GO2
status
ok
fetched_at
2026-07-21 10:43:05