🤖

AIを使ってブラウザ操作を行う事例とツールの紹介

2025/02/04に公開

はじめに

AIの世界は急速に進化しており、大規模言語モデル(LLM)が自律的にブラウザを操作する能力を獲得しています。この進展は、LLMに目と手を与えるようなものであり、最小限の人間の介入で複雑なタスクを実行できるようになります。本記事では、LLMによるブラウザ操作の最新の進展を探り、可能性の限界を押し広げる3つの強力なツールを紹介します。

重要なポイント

  • ブラウザを操作するLLMは、目と手を与えられたようなものです。
  • 最近のLLMによるブラウザ操作の進展は目覚ましいものがあります。
  • 3つのブラウザ操作ツールを実際に紹介します。

なぜ重要なのか

LLMがブラウザ操作を扱うことの利点は何でしょうか?LLMは自律的にウェブインターフェースをナビゲートし、抽象的な指示を実行し、目標に向かって独立して進むことができます。この強化により、LLMの能力が大幅に拡張され、より多用途で強力になります。

ブラウザ操作の最近の動向

OpenAIはOperatorを発表しましたが、日本ではまだリリースされていません。専用アプリケーション内で動作し、シームレスなブラウザ操作を実現しているようです。

https://www.youtube.com/watch?v=CSE77wAdDLg

OpenAPI Operatorの使用例

デモの中では以下のようなユースケースが紹介されていました。

  • タスク自動化

    • 繰り返し業務の自動処理
    • 複数アプリケーション間のワークフロー連携
  • インテリジェントアシスタント

    • 自然言語でのユーザー問い合わせへの即時応答
    • 個人スケジュール管理とリマインダー設定
  • データ分析支援

    • 大規模データセットからの傾向抽出
    • 予測モデルの自動構築と可視化
  • 開発者向けツール

    • コード生成とデバッグ支援
    • API連携の自動セットアップ
  • カスタマーサポート

    • 24時間対応のチャットボット
    • 問い合わせのトリアージと優先度付け
  • タスク自動化

    • 繰り返し業務の自動処理
    • 複数アプリケーション間のワークフロー連携
  • インテリジェントアシスタント

    • 自然言語でのユーザー問い合わせへの即時応答
    • 個人スケジュール管理とリマインダー設定
  • データ分析支援

    • 大規模データセットからの傾向抽出
    • 予測モデルの自動構築と可視化
  • 開発者向けツール

    • コード生成とデバッグ支援
    • API連携の自動セットアップ
  • カスタマーサポート

    • 24時間対応のチャットボット
    • 問い合わせのトリアージと優先度付け

    ブラウザ操作の例

    Devinの観察日記では、居酒屋でウェブ注文のQRコードをスキャンし、口頭で指示を出して注文を行う例が紹介されています。その精度は驚くべきもので、一読の価値があります。

w:800

既存のツールの紹介

  • OpenHands: LLMを活用したプログラミングツール
  • WebPilot: Chrome Extensionで動く
  • Browser Use UI: ホストOSのブラウザを子プロセスで立ち上げて操作

OpenHandsとは

  • 無料
  • 本来はLLMを使ってシステム開発をするアプリケーション
  • LLMは外部のAPI呼び出し
  • 実行環境はDockerコマンド1発で立ち上がる
docker run -it --rm --pull=always \
  -e SANDBOX_RUNTIME_CONTAINER_IMAGE=docker.all-hands.dev/all-hands-ai/runtime:0.22-nikolaik \
  -e LOG_ALL_EVENTS=true \
  -v /var/run/docker.sock:/var/run/docker.sock \
  -v ~/.openhands-state:/.openhands-state \
  -p 3100:3000 \
  --add-host host.docker.internal:host-gateway \
  --name openhands-app \
  docker.all-hands.dev/all-hands-ai/openhands:latest

動作アーキテクチャ

  • コンテナ上で動作する
  • ヘッドレスブラウザを裏で立ち上げている。
  • 1つの命令でコンテナを作り直しているので初回は遅い。安全。

プロンプトに指示をしてみます。

w:700

ブラウザでヤフーのニュースページに飛んで、ニュースの要約を作ってくれました。

w:700

Webページが複雑なUIだと処理が止まる。。。

w:500

WebPilotとは

少し毛色が違いますが便利なUXなので紹介しておきます。

  • Chromeブラウザプラグインで使うのが一番良いUX
  • 既存のブラウザを使えるのが良い。
  • 独自LLMの無料枠あり。APIでLLMも呼べる。
  • (ちょっと毛色が違うけど便利だから紹介)

( このUXはブラウザ側でAI APIsとして同じような機能が実装されるはずです)

Web上のクイズを解かせてみました。 Web試験と相性が良さそうです。
下の部分のモーダルがWebPilotです。

w:600

思考の過程を表示してくれて、それっぽい論理を展開してくれていましたが見事に不正解です。5問ほどやらせてみましたが、2問は不正解でした。

w:1000

長文のサマリーもやらせてみました。
良い感じです。もう少し文量を減らして要点を明確にはできそうですけど合格点かなと思います。

w:700

もう少し具体的な指示の元サマリーを作成してみましたが、良い感じに動いています。

w:600

Browser-use-webui

今のところ、一番これが良い感じに動きます。

  • OSS
  • 見た目が面白い
  • Xでよく紹介されているやつはこれ

セットアップ

git clone https://github.com/browser-use/web-ui.git
cd web-ui
uv venv --python 3.11
source .venv/bin/activate
uv pip install -r requirements.txt
playwright install
cat .env
CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
CHROME_USER_DATA="~/Library/Application Support/Google/Chrome/Default"

ANONYMIZED_TELEMETRY=false

OPENAI_API_KEY=sk-proj-*****
# ANTHROPIC_API_KEY=********

実行

python webui.py --ip 127.0.0.1 --port 7788
open http://127.0.0.1:7788/

setting

ブラウザ上から追加の設定。普段使っているブラウザのCookieを使いたければ、シークレットブラウザではなく自分のブラウザを立ち上げるように設定を変更します

w:800

「NISSANのEVを試乗予約して!」という感じの雑なプロンプトを投げるとどんどん先に進んで操作してくれます。

w:700

試乗できるEVを探してる

w:700

EVを選んで、次へ進んで近くのディーラーを探してる

w:700

適当な名前で申し込みを入れようとしている。

w:700

ここで、停止。スクロールをうまく行ってくれません。手動でスクロールしてあげれば先に進みますが送信ボタンまでは押してくれませんでした。

操作動画

https://youtu.be/Hqelnd6EFag

考察

  • どれも動作が重いので何度もPCが不安定になる
  • OpenAI OperatorはOpenHandsに近そう

おまけ

AIで確定申告をやらせてみた。noteに詳細をまとめてあります。

https://note.com/matsubokkuri/n/nc976d5258e37

株式会社マインディア テックブログ

Discussion