「NEXTPlaywright？」自らJavaScriptを書き自己進化するAIエージェント『Browser Use Pi』が凄まじい【TypeScript/実装コード付き】
どうも、Pi環境をなんとか向上させたい人間です。
下の記事のハーネスを採用しちゃいまして、日々迷走している最中なんですけども。
名前読んで下さい、Browser Use Piですよ？
相性いいに決まってるでしょう！（この時はまだ未検証）
Webの自動化スクレイピングやE2Eテストを書いている全エンジニアに質問です。
「サイトのUIがちょっと変わっただけでセレクタが壊れ、深夜にエラー通知で叩き起こされる生活」に、疲れていませんか？
AIモデルの賢さ比べが一段落し、いま開発者の関心は「AIにいかに現実のタスクを実行させるか」へ完全にシフトしました。そして現実世界で最も複雑で、最も泥臭い実行環境こそが「Webブラウザ」。
これまで「ブラウザ自動化」といえば、PlaywrightやPuppeteerでガチガチにセレクタを書き、壊れたら直す……というメンテ地獄が相場でした。
そんな常識を根本からひっくり返すモンスターツールが登場しました。
それが「Browser Use Pi」。
単に「AIが画面を見てクリックする」ツールではありません。
なんとこのエージェント、ブラウザの中でリアルタイムに自らJavaScriptを書き、即席のヘルパー関数を作り、失敗したらその場でデバッグして目的を達成するのです。
使ってみてびっくりしました。関数まで？
今回は、このBrowser Use Piのアーキテクチャの凄さから、Playwrightとの決定的な違い、そして今夜5分で動かせる実装手順まで徹底調査します。
1. 何が革命的なのか？「その場でJSを書いて自己進化する」仕組み
これまでのAIブラウザ操作ツールは、いわば「AIにマウスとキーボードを渡して、人間と同じように操作させていた」状態でした。
画面のキャプチャを撮り、ボタンの座標を探し、クリックする。
遅いし、よくズレて失敗します。
対してBrowser Use Piのアプローチは異次元。
強力な推論エンジン（Pi Mono）を頭脳に持ち、ブラウザの実行エンジンであるV8 REPLと、ブラウザを低レイヤーから直接操るCDP（Chrome DevTools Protocol）を融合させています。
【従来のAIブラウザ操作】
画面を見る ➔ 「ここをクリックしたい」 ➔ 座標を計算 ➔ マウスクリック（よく外す）
【Browser Use Pi】
ブラウザの内部に侵入 ➔ 「目的のデータを取りたい」
➔ その場で最適化されたJavaScript関数をAIが生成して実行
➔ 失敗したらコードを修正して再実行（ブラウザ内で自己完結！）エージェント自身がブラウザのコンソールを開いて、「この要素を取るにはこういう関数を作ればいいな」と即興でコードを書き、それを武器にして突き進むのです。
自動化スクリプトを人間が書く時代は終わりました。これからはブラウザの中で自律的にコードを書いて試行錯誤するAIを、エンジニアが見守る時代。
2. ぶっちゃけ誰に向いてる？（向き・不向き・セキュリティの罠）
非常に強力ですが、誰にでもおすすめできる魔法の杖ではありません。技術選定で火傷しないために、境界線をはっきりさせておきます。
刺さる人（今すぐ使うべき）
モダンなTypeScript / JavaScriptエンジニア：後述する「型定義された結果（Typed Results）」を活かし、堅牢なプロダクトを作りたい人。
環境構築で消耗したくないチーム：`Browser Use Cloud`を使えば、ローカルにChromium環境を用意せず、クラウド上で数千セッションをスケール可能。
複雑な多重ステップの自動化をしたい人：ログイン状態を維持したまま、数十ページを横断してデータを抽出・加工したい人。
向かない人・注意すべきケース
ノーコードを求める非エンジニア：自然言語で指示はできますが、環境変数、ランタイム管理、型定義など、コードが書けないと真価を引き出せません。
ランタイムの制約：Node.js 22.19+ または Bun 1.3.14+ が必須です（※Bunを使う場合でも、内部のV8ワーカーを動かすために同一環境にNode.jsが入っている必要があります）。
【超重要】セキュリティの壁：Browser Use Piが実行するJavaScriptは、ファイルシステムやネットワークへアクセスできる権限を持っています。悪意ある第三者のWebサイトを巡回させる場合、Docker等の分離された隔離環境（サンドボックス）で動かすことが絶対条件です。
3. なぜUIが変わっても壊れないのか？「V8 REPL × AXツリー」の破壊力
なぜ、従来のスクレイピングはサイトのデザイン変更で即死し、Browser Use Piは平然と動き続けられるの？って話。
秘密は「アクセシビリティツリー（AXツリー）」と「リアルタイム試行錯誤」の掛け合わせ。
┌─────────────────────────────────────────────────────────┐
│ Browser Use Pi の思考ループ │
│ │
│ [ AXツリー（論理構造）] ＋ [ スクリーンショット（視覚）] │
│ │ │
│ ▼ │
│ 「ここが目的のボタンだな」 │
│ │ │
│ ▼ │
│ V8 REPL上でJavaScriptコード片をテスト実行 │
│ │ │
│ NG ───────────────┴─────────────── OK │
│ │ │ │
│ ▼ ▼ │
│ 別の取得方法を試す 次のアクションへ │
│ （山登り法で最適解へ） │
└─────────────────────────────────────────────────────────┘壊れにくい「AXツリー」を見る：HTMLのクラス名（`.btn-primary-xyz123`のような変わりやすいもの）に依存せず、スクリーンリーダーが読み取るような「ボタン：購入する」という論理的な構造を認識します。
スクショで「見た目」も補完：人間と同じように画面全体のレンダリング結果も参照するため、「隠れていて押せないボタン」などを誤認しません。
山登り法（ヒルクライミング）：要素が見つからなくてもクラッシュせず、V8 REPL経由で別のJavaScriptクエリを試し、目的の要素に辿り着くまで自律的に軌道修正します。
サイトのUIリニューアルごときに動じないタフさが、ここにあります。
4. PlaywrightやPuppeteerとの決定的な3つの違い
「PlaywrightでもAI連携ライブラリはあるよね？」と思うかもしれませんが、完成度の次元が違います。
① 「操作ツール」ではなく「完成されたSDK」
従来のツールは「クリックする」「文字を入力する」という原始的な命令しか持っていませんでした。Browser Use Piはセッション管理、後述するクラウド連携、ストリーミングレスポンスなど「実プロダクトに組み込むこと」を前提に設計されたSDK。
② TypeScriptによる「型定義された結果（Typed Results）」
AIエージェントの最大の弱点は「出力がブレること」。
Browser Use Piは、AIがブラウザから持ち帰ってくるデータをTypeScriptの型でガチガチに縛ることができます。
// AIのあいまいな出力を、確実なデータ構造へ変換
const schema = z.object({
title: z.string(),
price: z.number(),
inStock: z.boolean(),
});「AIが適当な文字列を返してきて後続のシステムが落ちる」という事故を型安全に防げるため、エンタープライズのバックエンドにそのまま組み込めます。
③ Browser Use Cloud によるインフラの隠蔽
自前でヘッドレスChromeを何十台も立ち上げてコンテナがメモリ不足で落ちる……という悪夢はもう不要。APIキーを渡すだけで、スケールアウト可能なクラウドブラウザに処理をオフロードできます。
5. 地味だけど神。「認証バイパス」と「GIF録画（Show the Work）」
運用フェーズでエンジニアを泣かせる2大問題、「二要素認証」と「ブラックボックス化」に対しても、見事な回答を用意しています。
認証バイパス：人間のセッションをそのまま引き継ぐ
ログイン画面のキャプチャ認証やSMSの二要素認証をAIに突破させるのは無謀です。
Browser Use Piはセッション保存機能を備えているため、「人間が一度ログインしたブラウザのCookieやストレージ状態」をそのままエージェントに渡せます。認証の実装に数日溶かす必要はありません。
Show the Work：動いた証拠を「GIFアニメ」で自動出力
「AIが裏で何をやったかわからない」状態はビジネス上の最大のリスクです。エラーで止まった時、どこで詰まったのかログテキストだけで追うのは地獄ですよね。
Browser Use Piは、エージェントが操作した全行程をハイライト付きのGIFアニメや動画として自動保存できます。
バグ報告が来たらGIFを見るだけ。
「あ、ここで変なポップアップが出て邪魔されたんだな」と一瞬で原因を特定できます。検証コストは体感で80%削れます。
6. 【コピペで動く】5分で始める導入＆実践コード
それでは、実際に動かしてみましょう！
1. パッケージのインストール
Node.js 22.19+の環境で以下を実行します。
npm install @browser_use/pi
# または
bun add @browser_use/pi2. 環境変数の設定
OpenRouter等のお好みのLLMプロバイダと、クラウドブラウザのキーをセットします。
export OPENROUTER_API_KEY="sk-or-v1-xxxxxxxx"
export BROWSER_USE_API_KEY="bu_key_xxxxxxxx" # クラウドブラウザ使用時※テスト実行時の匿名テレメトリ（利用状況送信）をオフにしたい場合は、`export DO_NOT_TRACK=1` を設定しておくと安全です。
3. 実践コード：ニュース記事を自律探索して要約させる
Hacker Newsを開き、一番ホットな記事を探して、さらにそのコメントまで要約させるコード。
import { Browser, BrowserUse } from '@browser_use/pi';
async function main() {
// 1. エージェントの初期化
const agent = await BrowserUse.create({
// 推論性能の高いモデルを指定
model: 'openrouter/openai/gpt-4o',
reasoning: 'xhigh',
// クラウドブラウザを利用（ローカルChromeのメンテ不要）
browser: Browser.cloud({
apiKey: process.env.BROWSER_USE_API_KEY!
}),
// 実行ログや証拠GIFが保存されるディレクトリ
workspace: './work_dir',
telemetry: false, // 追跡を無効化
});
try {
console.log('🚀 タスク開始...');
// 2. 目的を自然言語で投げる（勝手にブラウザを操作・探索する）
const result = await agent.run('Hacker Newsを開いて、今一番話題の記事のタイトルとURLを特定して。');
console.log('【探索結果】:\n', result.text);
// 3. セッションを引き継いだままフォローアップ指示
const followUpResult = await agent.followUp('その記事のコメント欄を開いて、主な議論の論点を3行で要約して。');
console.log('【要約結果】:\n', followUpResult.text);
} catch (error) {
console.error('エラー発生:', error);
} finally {
// 4. ブラウザを確実にクローズ
await agent.close();
console.log('✨ 完了。./work_dir を確認すると実行ログとGIFが保存されています。');
}
}
main();これだけのコードで、裏側ではAIが「DOM解析 ➔ JavaScript生成 ➔ エラー自己解決 ➔ 目的データ抽出」を全自動で完遂します。
7. 明日から使えるリアルな業務ユースケース3選
このツールは、おもちゃの自動化ではなく企業の収益直結ラインで真価を発揮します。
① 競合サイトの動的スクレイピング＆プライシング
「SPAで作られていて、スクロールしないと価格が出ない」「アクセスごとにクラス名が変わる」ような難関ECサイトでも、Browser Use Piなら人間と同じようにスクロールし、API通信を待ってデータを抽出可能。競合の価格変動を捉えて、自社の販売価格を自動調整できます。
② レガシー社内システムの「勝手にAPI化」
APIが公開されていない古いオンプレのERPや業務システム。これまで人間がポチポチ入力していた作業を、Browser Use Piが代行。
セッションを引き継いで管理画面に潜り込み、指示されたデータを引っ張ってSlackに通知する「即席APIサーバー」が数時間で作れます。
③ E2Eビジュアルテストの「完全自動＆GIF録画」
「トップページからカートに入れて決済画面まで遷移できるか」のテストを自然言語で指定。テストが失敗した時だけ、「どこでボタンが押せなくなっていたか」を示すGIF動画が自動でGitHub Issueに添付される運用が組めます。QAエンジニアの工数は劇的に下がります。
8. まとめ：ブラウザを「見る」AIから「ハックする」AIへ
ローカルで35Bまでのやつなら結構ブラウザ自動化安定するのにー。
9Bはちょびっと心もとないなぁ。悲しい我が環境。
長年、エンジニアを苦しめてきた「Web自動化の脆さ」。
Browser Use Piは「AI自身にJavaScriptを実行させ、ブラウザの中でリアルタイムに試行錯誤させる」という極めてプログラマティックなアプローチで、その壁を打ち破りました。
V8 REPL × 生CDP による超高速な自己修正ループ
AXツリー によるUI変化への圧倒的な耐久力
TypeScript Typed Results によるプロダクション品質の堅牢さ
「ブラウザを見るだけのAI」と「コードを書いてブラウザを使いこなすAI」の間には、埋められない決定的な差があります。
いいなと思ったら応援しよう！
よろしければ応援お願いします♡ いただいたチップはクリエイターとしての活動費に使わせていただきます！ 