agent-browser

技能

agent-browser には、AI コーディングエージェントが特定のワークフローでどのように使用するかを学習させるためのスキルが同梱されています。スキルをインストールすると、Cursor、Claude Code、Codex のエージェントは手動のガイダンスなしにブラウザタスクを自動化できます。

利用可能なスキル

  • agent-browser — 一般的なブラウザ自動化：ナビゲーション、スナップショット、フォーム、スクリーンショット、データ抽出、セッション、認証、差分比較、および完全なコマンドリファレンス。
  • dogfood — 系統的な探索的テスト。実際のユーザーのようにアプリをナビゲートし、バグやユーザーエクスペリエンス（UX）上の問題を発見し、スクリーンショットと再現動画を含む構造化されたレポートを生成します。
  • electron — Electron アプリ（VS Code、Slack、Discord、Figma など）を、組み込みの Chrome DevTools Protocol ポートに接続することで自動化します。これにより、agent-browser は Slack macOS アプリのようなネイティブデスクトップアプリを制御しています。
  • slack — ブラウザベースの Slack 自動化。未読メッセージの確認、チャンネル内での移動、会話の検索、メッセージの送信、データの抽出などを行えますが、API トークンは不要です。

インストール方法

npx skills add vercel-labs/agent-browser --skill agent-browser
npx skills add vercel-labs/agent-browser --skill dogfood
npx skills add vercel-labs/agent-browser --skill electron
npx skills add vercel-labs/agent-browser --skill slack

インストール後、エージェントは対応するリクエストに遭遇した際に自動的に適切なスキルを有効化します。

agent-browser

基本となるスキル。エージェントに完全な agent-browser API を教える：ナビゲート→スナップショット→操作→再スナップショット のワークフロー、すべてのコマンド、コマンドのチェイン、認証（認証バンクと状態の永続化）、セッション、差分比較、JavaScript の評価、注釈付きスクリーンショット、意味的ロケータ、および設定方法。

エージェントとの例示的なやり取り：

  • 「example.com を開き、連絡先フォームを埋めてください」
  • 「ログイン後にダッシュボードのスクリーンショットを撮影してください」
  • 「ステージング版とプロダクション版のホームページを比較してください」

dogfood

探索的テストのための構造化されたワークフロー。エージェントは対象の URL を開き、システム的にアプリを探索（ページの移動、フォームのテスト、ボタンのクリック、コンソールエラーの確認）し、発見したすべての問題について以下を記録します：

  • 番号付きの再現手順
  • ステップバイステップのスクリーンショット
  • インタラクティブなバグ用の再現動画
  • 嚮度分類

出力は出力ディレクトリ内の Markdown 形式のレポートとなり、責任者チームにそのまま渡せる状態になります。単一のプロンプトで実行可能：たとえば「dogfood vercel.com」または「QA http://localhost:3000 — ビリングページに焦点を当てる」。

electron

Electron アプリ（VS Code、Slack、Discord、Figma、Notion、Spotify など）は Chromium で構築されており、Chrome DevTools Protocol (CDP) ポートを公開しています。agent-browser はこのポートに接続可能です。このスキルでは、エージェントが任意の Electron アプリを起動または接続する方法、その後標準的な スナップショット→操作 ワークフローを使用して自動化する方法を教えます。

Electron アプリは Chromium で構築されているため、Chrome DevTools Protocol (CDP) ポートを公開しており、agent-browser はこれに接続可能です。アプリを --remote-debugging-port オプションで起動し、接続した後、標準的な スナップショット→操作 ワークフローを使用します。これは slack キャペシティが基盤として利用している仕組みです。

slack

ブラウザベースの Slack 自動化。既存の Slack セッションに接続（agent-browser connect 9222 による）または新しいブラウザで Slack を開き、スナップショットと要素参照を使って UI をナビゲートします。未読メッセージのチェック、チャンネルやダイレクトメッセージの移動、会話の検索、メッセージデータの抽出、スクリーンショットの撮影などを行えますが、Slack API トークンやボットのセットアップは必要ありません。

ソース

すべてのスキルファイルは、リポジトリの skills/ ディレクトリ内にあります。