👀AIに「目」を与える · 手探りで作らせるな（agent-browser）

問題 · あなたのAIは手探りで作っている

これはAIで構築するすべての人に起きているのに、ほとんど誰も気づいていない。AIが画面、フォーム、フローを生成して、「はい、これで動きます」と言う。でも、それを見るために開いた？いや。AIはコードを書いて、大丈夫だと思い込んでいる —— 確認する目がないのだ。味見せずに料理を出すシェフのようなもの。うまくいくこともあれば、ボタンが何も反応しなかったり、ログインが壊れていたり、画像が表示されなかったり —— それに気づくのは、本番環境で、顧客の前にいるあなたなのだ。

agent-browserとは？ · あなたのAIの目

agent-browserはVercelのオープンソースツールで、あなたのAIエージェントに本物のブラウザを操作する能力を与える。アプリを開き、画面にあるものを見て、クリックし、フィールドに入力し、フォームを埋め、スクリーンショットを撮り、コンソールのエラーを読む。平たく言えば、ブラウザに目と手を与えるのだ。推測をやめ、確認するようになる。

メリット#1 · 常に検証させる（手探りではなく）

これがあなたの働き方を変える使い方だ。何かを作るたびに、完成したと言う前に自分でそれを開いて検証するようAIに頼む。ログインを作った → テストアカウントで登録して、ちゃんと入れることを確認させる。フォームを作った → 埋めて、ちゃんと送信されるか確かめさせる。画面を変えた → 開いて、見た目が良くコンソールにエラーがないか確認させる。「動くと思う」から「試したし動く」へと変わる。

メリット#2 · 可能性の世界を開く

AIに目を与えることは、自分のものを検証するためだけではない。ブラウザを自由に使えるようになれば、AIはもっとたくさんのことができる。

何が特別なのか（専門用語なしで）

従来の自動化ツール（Playwrightなど）とは違い、agent-browserはAIエージェント向けに作られている。ページ全体を読む（大量のトークンを消費する）のではなく、AIに操作できる要素のコンパクトな「地図」を与える。つまり、あなたのエージェントにとってより安く、より速いのだ。Vercel製のオープンソースで、寛容なライセンス。

インストール方法（コードエージェントが必要）

コマンド1つでパソコンにインストールでき、初回にブラウザをダウンロードする。あとはAIエージェントがそれを使う。（方法はいくつかあるが、npmが最も一般的。）

npm install -g agent-browser
agent-browser install

プロンプト1 · 作ったものすべてを検証させる（黄金律）

これがあなたの働き方を変えるプロンプトだ。手探りで作るのをやめさせるために、エージェントに貼り付けよう。

agent-browserがインストールされています。これからは、agent-browserを使って自分でブラウザで確認していないかぎり、何かが「もう動きます」と言わないでください。

インターフェースで何かを作ったり変更したりするたびに：
1. agent-browserで私のアプリを開いてください（[あなたのURL、例：http://localhost:3000]で動いています）。
2. たった今作ったり変更したりしたところまで移動してください。
3. 実際のユーザーのように試してください：クリックし、フィールドを埋め、主要なフロー[あなたのフローを書く、例：「登録 → ダッシュボードに入る」]を完了させてください。
4. 見た目が良く、ブラウザのコンソールにエラーがないことを確認してください。
5. 何かが壊れていたり見た目が悪かったりしたら、直して再度検証し、本当に動くまで繰り返してください。
6. それからようやく「完成」と言い、何を検証して何を見たか教えてください。

黄金律：どんなインターフェースのタスクも、ブラウザで検証しないかぎり完了とみなさない。手探りで作らないこと。

プロンプト2 · Webの自動化 / 情報抽出

もうひとつの超能力 —— 閲覧と自動化 —— を活かすために、このプロンプトは具体的なWebタスクにagent-browserを使うようAIに頼む。

agent-browserを使って、このWebタスクを一歩ずつやってください：

[あなたのタスクを書く、例：「このページ[URL]を開いて、製品のリストと価格を抽出し、整理した表にして持ってきて」／「[サービス]の私のパネルに入って、Xの状態を教えて」／「このフォームにこのデータを入力して」]をしてほしいです。

1. ページを開いてスナップショットを撮り、どの要素と操作できるか見てください。
2. 一歩ずつタスクを実行し、各ステップで正しい要素があることを確認してください。
3. ログインが必要な場合は、認証情報を安全に保存する方法を教えてください（agent-browserには暗号化されたvaultがあります。私のパスワードを平文で置かないでください）。
4. 結果を整理して渡し、できなかったことがあれば教えてください。