Cline×LangSmith×Browser-Use ブラウザ動作をトレースしたログを取得して、出力結果をChat GPTで確認する方法

生成AIエンジニアの星森です！🦚✨

生成AIを活用したSaaS（会員1万7000人）でPMしてました🚀
フォロワーが少ないので、有料で売れる情報も、気にせず投稿しています💪
本気でレベルアップしたい人はフォローしておいてください👀
https://x.com/AidolKiss

今回やること

Browser useを実行して、そのプロセスをすべてトレースします。実行結果のログを残すということです。

なぜやるか

Browser useはプロンプトの指示した通りにWebブラウザを操作して結果を提示してくれますが、そのプロセスは取得しづらいです。
実行中のログをすべて取得することで、Browser useが実行中に取得した情報にアクセスできるようにします。

これにより、Browser Useで取得した結果だけでなく、過程で取得した情報や実行過程そのものについて調べることができます。

役に立つのか？

役立つと思います。例えば調査にBrowser Useを使う場合です。

ClineとClineから派生したRooClineやReclineなどの違いを調べる指示を出したとします。各Clineシリーズの名称や特徴がBroser Useの出力として表示されたとしましょう。

しかし各Clineの評価件数やバージョン情報を知りたい場合は、あらためて各Clineの拡張機能ページにアクセスして調べる手間が発生します。

なぜならBrowse Useの結果には記載されていないからです。

実行プロセスのログを残しておくことで、調査過程で見つけた情報にアクセスすることができます。また、ログを残しておくことで、実行結果をあとから振り返りやすくなります。

何でやるか

LangSmithを使います。LangSmithはLangChainの拡張ツールとして使われます。
LangChainはワークフローを構築するためのライブラリです。
簡単に言うと、「もっと難しいDify」みたいなイメージでよいと思います。

これは難しい？

やっていることはかなり難しいと思います。しかし構築と実践する方法は簡単です。
なぜならやり方をここにまとめているからです。

Browser Useの深淵を覗くことができると思います。

必要な環境

• VScode（Cursorでも可能）

• Cline（Clineフォークでも可能）

今回はRoo Clineを使って実行しました

• Chat GPT（一般的に使われているブラウザ版やアプリで問題ありません）

必要な情報

• Anthropic API key (OpenRouter推奨)

• Open AI API key

• LangSmithアカウント（無料で作成可能）

概要としては以上となります。

有料ゾーンに入る前に弁解しておきたいのですが、今回の内容はClineとLangSmithを掛け合わせてまして、LangSmithのアノテーションやデータセットなど、馴染みがあまりない情報に接触していきます。なので僕自身けっこうチャレンジぐな内容です。

もしかしたら理解に間違いがあるかもしれません。実行結果自体は問題なくできていますが、プロセスに誤解があったり、もっと効率的なやり方があったりなどのヌケ漏れがあるかもしれません。

そこらへんを許容できる知的探求心および、理解できる適度な知性が必要な気がしています。僕は全力を尽くしましたので、あとは読者の皆様の賢さと聡明さにバトンをお渡しいたします！

---