Managed Deep Agents と Browserbase の Stagehand で Web 閲覧エージェントを構築

LangChain と Browserbase で実現する、本番環境対応の Web 閲覧エージェント構築ガイド

LangChain が提供する「Managed Deep Agents」に、Web ブラウザ操作ライブラリ「Stagehand v4」とブラウザインフラ「Browserbase」を組み合わせることで、複雑なインフラ構築なしで本番環境向けの Web 閲覧 AI エージェントを迅速に開発・運用できる手法が紹介されました。このアプローチにより、開発者はスケーラビリティと信頼性を担保された状態で、ESPN や Hacker News といった動的な Web サイトからの情報収集タスクを実行可能なエージェントを容易に構築できます。

Managed Deep Agents と Stagehand v4 の連携構造

今回の基盤となるのは、LangChain が新たにリリースした「Managed Deep Agents（MDA）」です。これはモデル非依存のオープンソースなエージェントハネスであり、LangSmith デプロイメント内で実行されることで、スキルやメモリ管理を「Context Hub」を通じて一元化できます。従来のようにコードにプロンプトやロジックを直書きするのではなく、MDA を使うことで、Slack や Harbor などのチャネルからアクセスしたり、評価（Eval）機能を組み込んだりすることが可能になります。

このエージェントハネスの核心となるのが、「Stagehand v4」です。これは Web ブラウザと対話するためのオープンソースライブラリで、以下の 3 つの主要なツールを提供します。

- Snapshot: 現在のページをスナップショットとして取得し、要素 ID を特定する機能。単純な操作にはこちらを使用します。

- Run: スナップショットアクションまたは Playwright 形式の JavaScript コードを実行できる機能。多段階のワークフローに使用します。

- Screenshot: ページのレンダリング結果を視覚的に検査する機能です。

Stagehand は内部で「Playwright」を使用しており、ローカルのブラウザを制御することもできます。しかし、本番環境（Production）で大量のブラウザセッションを安定して運用するには不十分です。そこで登場するのが「Browserbase」です。Browserbase は管理された Web ブラウザインフラを提供し、スケーラブルな環境でブラウザを操作するための基盤となります。MDA がエージェントの制御を担い、Stagehand が操作ツールを提供し、Browserbase がその実行環境を支えるという組み合わせが、本番運用に適した構成です。

開発環境のセットアップとローカルテスト手順

実際にエージェントを動かすためには、まず LangSmith と Browserbase のアカウントを用意する必要があります。Managed Deep Agents は有料プラン（Plus 以上）が必要となる点に注意が必要です。

開発は GitHub リポジトリから例題をクローンすることから始まります。具体的には browserbase リポジトリ内の deep_agents_integration/examples/managed フォルダを使用します。このフォルダには、Managed Deep Agents と Browserbase を統合した基本的な骨格が用意されています。

エージェントの定義ファイルを確認すると、モデル選択と 3 つのツール（snapshot, run, screenshot）の設定が見えます。また、instructions.md ファイルには、Agent がどのようにブラウザを操作すべきかの指示が記述されています。例えば、「単純な操作には Snapshot アクションを使用し、多段階のワークフローには Run コードを使用する」「ページ遷移後や ID が古くなった場合は再度 Snapshot を取得する」といった重要なルールが含まれています。

実行前に必須となるのは環境変数の設定です。.env ファイルに以下の API キーを設定します。

• LANGSMITH_API_KEY
• OPENAI_API_KEY
• BROWSERBASE_API_KEY

これらが設定できたら、ターミナルから mdav コマンドを実行します。このコマンドは Managed Deep Agent Studio をローカル環境で起動し、ブラウザウィンドウをオープンしてエージェントと対話できる状態にします。

テストとして「ESPN.com にアクセスしてトップニュースを取得せよ」と指示を出すと、Agent は即座に run ツールを呼び出し、ページへ移動。その後 snapshot を実行して情報を取得し、回答を返します。この際、Browserbase のダッシュボードにある「Sessions」タブを開くと、エージェントが実際にどのような操作（スクロール、クリック、遷移）を行ったかを動画のように再生確認できます。

さらに複雑なタスクとして、「Hacker News のトップストーリーから面白いコメント 3 つを探せ」と指示を出すと、Agent はトップページを開き、記事をクリックして詳細を確認し、また戻って次の記事へ進むという一連の行動を自動で実行します。Browserbase のセッション記録を見れば、その論理的な思考と操作の流れが視覚的に確認できるため、デバッグや動作検証に非常に役立ちます。

本番環境へのデプロイと動的管理

ローカルでのテストが成功したら、次は本番環境へのデプロイです。ターミナルで mda deploy コマンドを実行するだけで、LangSmith 上にサーバーレス型の Managed Deep Agent デプロイメントが作成されます。

このプロセスの大きなメリットは、「Context Hub」を活用した動的な管理が可能になる点です。デプロイ後、LangSmith の UI を開くと、エージェントのプロンプト（instructions.md）が Context Hub 内に保存されていることがわかります。コードを修正して再デプロイしなくても、UI 上でプロンプトの内容を変更・保存するだけで、エージェントの動作方針を即座に更新できます。

デプロイが完了すると、Studio を介して本番環境のエージェントと対話できるようになります。先ほどの ESPN や Hacker News のタスクを実行しても、ローカル時と同様に正確に情報を取得し、Browserbase 経由でブラウザ操作の記録も残ります。これにより、開発者はインフラ構築の手間を省きつつ、信頼性の高い Web 閲覧 AI エージェントをすぐにサービスとして提供できるのです。

まとめ

Managed Deep Agents と Stagehand v4、そして Browserbase の連携は、複雑な Web ブラウジング機能を備えた AI エージェントを、開発者がインフラの重荷を負わずに迅速に実装・運用するための強力なソリューションです。本番環境でのスケーラビリティと信頼性が担保されたこのアーキテクチャは、Agentic AI の普及を加速させる重要なステップとなるでしょう。