[OSS紹介#80] Stagehand：ブラウザ自動化をAIとコードで効率化する新たなアプローチ

in

この記事について

このブログシリーズでは、注目すべきオープンソースソフトウェア（OSS）を定期的に紹介していきます。連載第80回となる今回は、ブラウザの自動化を新たな次元に引き上げる可能性を秘めた「Stagehand」に焦点を当てます。

現代のソフトウェア開発において、ブラウザの自動化は重要な役割を果たしていますが、従来のツールは低レベルなコードの記述を強いられるか、あるいは予測不能なエージェントを使用せざるを得ないケースが多く見られます。そんな中、Stagehandは開発者がAIの力を借りながらも、コードと自然言語を使い分けることができる柔軟性を提供します。

Stagehandを活用することで、ユーザーは初めて訪れるウェブページでもスムーズにナビゲーションを行い、確実性を求められる場面ではコードに切り替えることが可能です。このアプローチは、特に実際のプロダクション環境でのブラウザ自動化において、大きな利点をもたらすでしょう。さらに、AIアクションのプレビュー機能やキャッシュ機能により、作業効率を大幅に向上させることが期待されます。

これからの開発シーンにおいて、Stagehandは特に新しい技術を試みる開発者たちにとって、強力なサポートとなるツールであると言えます。

リンク：https://github.com/browserbase/stagehand

本コンテンツは、弊社AI開発ツール「IXV」を用いたOSSツール紹介です。情報の正確性には努めておりますが、内容に誤りが含まれる可能性がございますのでご了承ください。

1. Stagehandでできること

Stagehandは、AIブラウザ自動化フレームワークとして、従来のブラウザ自動化ツールの課題を解決します。以下の機能が特徴です。

1.1 コードと自然言語の選択

開発者は、コーディングと自然言語のどちらを使用するかを自由に選択できます。複雑なページをナビゲートする際にはAIを利用し、明確な操作が分かっている場合にはPlaywrightなどのコードを使用することが可能です。

1.2 アクションのプレビューとキャッシュ

Stagehandでは、実行前にAIアクションのプレビューを確認でき、再利用可能なアクションをキャッシュすることで、時間とトークンの節約が可能です。

1.3 SOTAコンピュータユースモデルの統合

最先端のコンピュータユースモデルを、わずか一行のコードでブラウザに統合できます。これにより、開発者は複雑な設定を行うことなくAIの力を活用できます。

2. セットアップ手順

Stagehandのセットアップは非常にシンプルです。以下の手順に従ってください。

2.1 ライセンスと動作環境

StagehandはMITライセンスのもとで提供されており、主要な動作環境としてNode.jsが必要です。最新のNode.jsをインストールしてください。

2.2 インストール手順

Stagehandをプロジェクトに追加するためには、以下のコマンドを実行します。

npmでインストール

npm install

または、以下のコマンドで新しいブラウザアプリを作成することもできます。

npx create-browser-app

2.3 ソースからビルドおよび実行

ソースコードからビルドする場合の手順は以下の通りです。

git clone https://github.com/browserbase/stagehand.git
cd stagehand
pnpm install
pnpm playwright install
pnpm run build
pnpm run example  # ./examples/example.tsの空のスクリプトを実行
pnpm run example 2048  # ./examples/2048.tsの2048の例を実行

APIキーやBrowserbaseの認証情報をプロジェクトに追加するには、次のコマンドを実行します。

cp .env.example .env
nano .env  # .envファイルを編集してAPIキーを追加

3. 簡単な使い方

Stagehandを使ったブラウザ自動化の基本的な例を以下に示します。

// Playwrightの関数を使用してページオブジェクトを操作
const page = stagehand.page;
await page.goto("https://github.com/browserbase");

// act()を使用して個別のアクションを実行
await page.act("click on the stagehand repo");

// コンピュータユースエージェントを使用して大規模なアクションを実行
const agent = stagehand.agent({
    provider: "openai",
    model: "computer-use-preview",
});
await agent.execute("Get to the latest PR");

// extract()を使用してページからデータを読み取る
const { author, title } = await page.extract({
  instruction: "extract the author and title of the PR",
  schema: z.object({
    author: z.string().describe("The username of the PR author"),
    title: z.string().describe("The title of the PR"),
  }),
});

このコードは、GitHubの特定のリポジトリに移動し、PRの著者とタイトルを抽出する基本的なフローを示しています。

4. 結論

Stagehandは、ブラウザ自動化を簡素化し、開発者に柔軟性を提供する強力なツールです。AIとコーディングの組み合わせにより、開発者は生産性を向上させることができ、さまざまなシナリオに対応可能です。これにより、従来のツールに比べて大幅に効率的なブラウザ自動化が実現します。興味のある方は、公式ドキュメントを参照し、ぜひ試してみてください。