WebLLMを使ってクラウドもAPIキーも不要なAIブラウザ自動化ツール「On-device AI browser」

AI技術を応用して人の手で行っていた作業を自動化する流れはますます加速しており、特にウェブブラウザ上での操作を自動化するツールは多くのユーザーにとって有用そうです。しかしAI自動化ツールの多くはクラウドベースであるためAPIキーの取得といった煩雑な手順が必要だったりプライバシーに関する懸念が存在したりします。「On-device AI browser」はローカルにLLMをロードするためクラウドもAPIキーも不要なAIブラウザ自動化ツールです。

GitHub - RunanywhereAI/on-device-browser-agent: On-device AI browser automation using WebLLM. No cloud, no API keys, fully private.
https://github.com/RunanywhereAI/on-device-browser-agent

◆特徴
公式リポジトリによると「On-device AI browser」は以下の特徴を持っています。

・オンデバイスAI：WebLLMとWebGPUアクセラレーションを組み合わせて使用することによりローカルでLLM推論を行う
・マルチエージェントシステム：プランナーとナビゲーターエージェントによりインテリジェントタスクを実行する
・ブラウザ自動化：ウェブページからのナビゲーション・クリック・入力・データ抽出を自動化する
・プライバシーファースト：すべてのAIはローカルで動作するためデータはデバイス上で完結する
・オフラインサポート：初期モデルダウンロード後はオフラインで動作する

◆環境設定
「On-device AI browser」を使用するには、以下の環境が必要です。

・Chrome 124以降：サービスワーカーのWebGPUサポートのため
・Node.js 18以降：ビルドおよびnpmパッケージ管理のため
・git：リポジトリのクローンおよびWindowsで「Git Bash」を使用するため
・WebGPUに対応したGPU：最近のGPUであれば問題ないはず

まずは公式リポジトリからコードをクローンします。なおWindows上で「Git Bash」を使用することを前提としますので別環境で行う際は適宜読み替えてください。

git clone https://github.com/RunanywhereAI/on-device-browser-agent.git

カレントフォルダの下に「on-device-browser-agent」フォルダができるのでそちらに移動し、ビルドに必要なパッケージをインストールします。

cd on-device-browser-agent
npm install

インストールの完了を確認後に以下のコマンドを実行してビルドを行います。

npm run build

この過程で何かしらの問題が出力された場合は出力の内容に従って適切な対処を行う必要があります。
ビルドが成功していればon-device-browser-agentフォルダの下にdistフォルダと拡張機能が生成されています。

最後にChromeでビルドした拡張機能を読み込みます。まずはChromeのアドレスバーに「chrome://extensions/」と入力して拡張機能管理画面を開いて右上の「デベロッパーモード」のスイッチをオンにします。

「パッケージ化されていない拡張機能を読み込む」ボタンが表示されるのでクリックします。

「拡張機能のディレクトリを選択してください」というタイトルのダイアログが表示されるので、拡張機能をビルドしたon-device-browser-agentフォルダの下にあるdistフォルダを選択します。

拡張機能管理画面に「Local Browser - AI Web Agent」という名前の拡張機能が追加されているのを確認し、「詳細」ボタンを押します。

拡張機能の詳細画面が表示されるので下にスクロールします。

「ツールバーに固定する」というスイッチがあるのでオンにすると拡張機能のアイコンがツールバーに表示されます。なお初回にアイコンをクリックしたときに最大で1GB程度のモデルをダウンロードするるため環境によって時間がかかる場合があります。

◆使い方
拡張機能のアイコンをクリックすると以下のようなポップアップが表示されます。

今回はデフォルトのLLMをそのまま使用しますが、ドロップダウンリストにて以下の5つから選択可能です。

・Qwen 2.5 3B：推奨(デフォルト)
・Qwen 2.5 1.5B：高速
・Llama 3.2 1B：最速
・Phi 3.5 Mini 3.8B
・LFM2.5 1.2B：32Kコンテキストウィンドウ

タスク入力欄に実行したいタスクを入力し「Run Task」ボタンを押すとタスクが開始されます。試しにREADMEに書かれているサンプル「Search for 'WebGPU' on Wikipedia and extract the first paragraph(Wikipediaで「WebGPU」を検索し、最初の段落を抽出せよ)」を実行してみます。

開始するとタスクの進行状況はポップアップ内にリアルタイムで表示されます。まずはAIモデルのロード。ロードは初回実行時およびLLM切り替え直後のみ発生します。

実行プランの作成。

プランの実行状況はリアルタイムで更新されます。

実行結果は以下の通り。

指示を日本語で行うとどうなるのかを試してみたところ、前半の「WikipediaでWebGPUを検索」はうまく処理されたものの後半の「最初の段落を抽出せよ」が正しく処理できずエラーとなりました。

実行計画を確認してみたところ日本語を理解できていない訳ではなさそうですが、英語で指示した時と比べると細かな点で差異が見られるので、少なくとも現時点では英語で指示した方が期待通りに実行されやすい可能性があります。

なお、GPUが要件を満たしていない場合は実行時に以下のようなエラーメッセージが表示されました。

◆まとめ
「On-device AI browser」は記事作成時点でバージョンが0.1.0とまだ開発途中段階のプロジェクトですが、ローカルで動作するAIブラウザ自動化ツールとしては非常に興味深い存在です。今後のアップデートでさらに多くの機能が追加されて安定性も向上すると思われるので、AI自動化を活用したいもののクラウドサービスは利用したくないユーザーにとって有力な選択肢となり得そうです。