オープンソースブラウザ自動化ライブラリの「browserable」を使ってみた

# browserableとは
ブラウザ自動化のためのAIエージェントを構築できるライブラリとのことです。

https://www.browserable.ai/

# セットアップ
## 前提
利用前提としてDockerが必要になります。
インストールしていない人は事前にインストールしましょう。
（自分はPodmanを使っていてDockerをアンインストールしてしまっていたので、入れ直しました）

https://www.docker.com/ja-jp/

## コマンド
```bash
npx browserable
```

※インストールに結構時間がかかります。気長に待ちましょう。

## インストール後
自動的に`http://localhost:2001`が開いて管理者用UIが起動されます。

![管理者用UI](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3900794/489cf2a4-8fda-4134-8ddd-67b7bda497e9.png)

が、そのまま使おうとすると「APIキー設定してないから無理！」というポップアップが出ます。

![APIキー設定を促すポップアップ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3900794/19fb8098-ae55-40f2-a7dc-b875d0bf4b44.png)

browserableでは二種類のAPIキーを設定する必要があります。

- LLM API Keys
- Remote Browser API Keys

左下のAPIKeysからAPIキーを設定しましょう。

![APIKeys](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3900794/2e8e61e0-d996-46fa-b2cc-6bc8238ec0b0.png)

## LLM APIキーの取得（既にお持ちの方は作業不要）
今回は`Gemini 2.0 Flash`を使ってやってみることにしました。

https://ai.google.dev/gemini-api/docs/pricing?hl=ja#gemini-2.0-flash

「Google AI Studioで試す」ボタンを押下し、利用規約をチェック後、
画面上部の「Get API Key」からAPIキーを取得することができます。

![Get API Key](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3900794/6d7dd21e-8207-4d87-8dea-8c1c7876535c.png)

![LLM APIキーを生成](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3900794/4aee6503-ef47-4fe7-b625-797b2eb92dca.png)

## リモートブラウザAPIキーの取得（既にお持ちの方は作業不要）
今回は`HyperBrowser`を使ってやってみることにしました。

https://www.hyperbrowser.ai/

サインアップするとOverviewにAPIキーが出てくるのでコピーします。

![リモートブラウザAPIキーの取得](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3900794/542fb0b5-4a27-45a7-bd67-efddf128725b.png)

## APIキーの登録
コピーしたAPIキーをそれぞれの入力欄に設定しましょう。
それぞれ使いたいサービス毎に入力欄が分かれているので、間違えないように注意してください。

![APIキーの設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3900794/c0bb4317-5566-4f22-9c6d-9558003205b5.png)

入力したらセーブボタンを押すのを忘れずに。

![セーブボタンを押す](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3900794/0971fc09-5f9f-423a-a245-7d7b70659c65.png)

これで準備完了です。

# 色々タスクを投げてみた
結論から言うと、あまりうまくいかなかったです。

失敗結果をいくつか並べて見るに、もしかしたら日本語サイトが相手だとうまく機能しないのかもしれません。

## 数少ない成功例（だけど結果がしょぼかった）
自社サイトのリンクを渡して、概要を作ってもらうことにしました。

```
On https://www.claves.co.jp/ summarize the company profile. Submit the results in Japanese.
```

最終的な結果は下記の通りです。

```json
{
  "agentCode": "end",
  "aiData": {
    "reasoning": "The user's goal was to summarize the company profile on the given website and submit the results in Japanese. The BROWSER_AGENT has successfully extracted and summarized the company profile in Japanese. Therefore, the task is now complete.",
    "output": "The company profile of 株式会社クレス (CLAVES) has been summarized as follows:\n\n株式会社クレス（CLAVES）は、「人間が想像できることは、人間が必ず実現できる」という考えのもと、新しいものを積極的に生み出し、22世紀に残るプロダクトを生み出していきます。また、クラベスの技術を生かして様々な距離をなくす仕組みをご提供しています。WebサービスやECサイト（オンラインショッピングサイト）を中心に、各種連携システムや売上向上施策の対応も実施しております。"
  },
  "reasoningForPickingAgent": "The task is complete.",
  "summaryOfEverythingHappenedSoFar": "The user requested a summary of the company profile on https://www.claves.co.jp/ in Japanese. The BROWSER_AGENT was used to access the website and extract the necessary information. The extracted information was then summarized in Japanese. The summary is:\n\n株式会社クレス（CLAVES）は、「人間が想像できることは、人間が必ず実現できる」という考えのもと、新しいものを積極的に生み出し、22世紀に残るプロダクトを生み出していきます。また、クラベスの技術を生かして様々な距離をなくす仕組みをご提供しています。WebサービスやECサイト（オンラインショッピングサイト）を中心に、各種連携システムや売上向上施策の対応も実施しております。"
}
```

概要っていう表現がざっくり過ぎたか……トップページに書いてあることを並べているだけだな（白目）。
しかも会社名間違っている！

英語で分析→英語をもとに日本語化という流れで処理されているのかな。日本語をそのまま処理できないから「CLAVES→これをカタカナ表記に置き換える→クレス」になっているのかな？

## 失敗例①
```
プロンプト
On https://www.amazon.co.jp/b?node=2250738051 search AWS books and the first page you see will list the book title, author, and number of ratings.
```

![途中経過](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3900794/7f898e75-743f-4783-b188-9df0c0890aa5.png)

最後の方でずっと同じプロンプト投げてループしており、以下を見る限りLLMはちゃんと結果を返しているにも関わらず処理が完了せず、無駄にクレジット消費してしまう状況でした。
やむをえず、途中でタスク終了しました。

## 失敗例②
```
On amazon.com search books about AWS infrastructure that have been published in the six months and list them in descending order of publication date.
```

半年で出た本探してけろーって言ってみたら、途中まではうまくいっていたんですが、「半年にフィルターかける方法がAmazonにないよ！」って途中経過が出た後、何やらずっと検索してました。
頑張って表示された本の日付をひとつずつ追いかけていたっぽいですが、そんなことしたらいつまでも終わらず財布が死んでしまうので、やむをえず、途中でタスク終了しました。

## 失敗例③
この前自分のHPリニューアルをしたので、全てのリンクが正常に動作するか確認してもらうことにしました。

```
On https://yuumekou.net/ check all pages for broken links and compile a table listing all links and whether they are broken or not.
```

エラーになった（白目）。

![エラー](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3900794/e03c1dec-9b63-4947-a028-5f112fbf9df8.png)

なんでだろう？？？

# 感想
公式のデモみるとすごい高速に見えるんですが、あれは単純に動画の再生速度速めているだけですね。全て無料枠でやっているせいもあるとは思いますが、結構時間かかりました。
ただ、自動でやってくれている間他のことができるので、時間自体はそんなに気にならなかったです。

問題はちゃんと処理が終わらないことがある点ですね。

永遠ループしてしまうと無駄にクレジット消費していくだけなので、変に目を離せないのがネックです。

LLMの呼び出し履歴が見られるんですが、ずらりと並ぶと懐が心配になりますね（滝汗
今回は無料枠の範囲でやっているので別にいいのですが……。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3900794/f5288c15-cd76-4327-87ad-8730d8d0d608.png)

これだとさすがに実用は難しいかなとは思いますが、これまでSeleniumのコードをガリガリ自分で書いていたのがいらなくなるかもという未来への期待を感じさせる技術ではありました。

今後のアップデートや情報展開に期待ですね。