はじめに — ブラウザ操作AIの繋ぎ方
このサイトは、Claude in Chrome・Claude Code のブラウザ操作・Claude のルーチンなど、 ブラウザを自動操作する AI エージェントに「実際にやらせてみる」ための練習台です。 以下の手順で AI にお題を渡してください。
基本の手順
- /scenarios（シナリオ一覧）で試したいシナリオを選ぶ
- シナリオの説明ページ（例:
/scenarios/sales-csv）で Lv1〜Lv3 のお題を確認し、AI にそのまま渡せる指示文をコピーする - AI に、デモページの URL（例:
/demo/sales）と コピーした指示文を渡す。例:http://localhost:3000/demo/sales を開いて、飲料カテゴリの2026年3月の販売リストを表示し、件数を報告してください。
- AI に操作を実行させる。結果はデモページ下部の操作ログパネルに 「いつ・どの条件で・何をしたか」が記録されるため、そこで実際に操作したかどうかを確認できる
人間には説明ページ、AI にはデモページを渡す
このサイトは「説明ページ」（/scenarios/...）と 「デモページ」（/demo/...）を分けています。 説明ページにはお題・難易度・合格条件が書かれていますが、デモページには一切書かれていません。 AI がデモページの文章を読んで答えを先に知ってしまうと、ブラウザ操作の実力を測れなくなるためです。
そのため、人間が確認するときは説明ページの URL を、AI に操作させるときはデモページの URL を渡してください。
AI エージェントごとの使い方の概要
Claude in Chrome
Chrome 拡張として動作する Claude に、デモページの URL と指示文を伝えるだけで、 ブラウザの画面上で直接クリック・入力・スクロールなどの操作を行わせられる。
Claude Code のブラウザ操作
Claude Code のエージェントに、Playwright 等のツールを介してデモページを操作させる。 ローカルで開発サーバーを起動した URL を渡すとよい。
Claude のルーチン
定期実行するルーチンにデモページの URL と指示文を組み込み、 決まった操作を繰り返し安定して実行できるかを確認する。