heart-wcl/agent-browser-guide

agent-browser-guide は何をしますか？

Claude Code スキル：Vercel Agent Browser CLI によるブラウザ自動化。CLI ファーストのアプローチで Playwright MCP を置き換えます。

概要

このスキルは、Claude Code 内から Vercel Agent Browser CLI を使用してブラウザを操作する方法を定義します。agent-browser バイナリを直接呼び出して、ブラウザの操作（ページ移動、要素のクリック、テキスト入力、スクリーンショット取得など）を行います。

インストール

1. agent-browser CLI がインストールされていることを確認します。

   npm install -g @anthropic-ai/agent-browser
   

   または

   brew install anthropic/tap/agent-browser
   

2. Claude Code が agent-browser コマンドにアクセスできることを確認します（パスが通っている必要があります）。

使用方法

Claude Code で、ブラウザベースのタスクについて自然言語の指示を与えます。スキルは自動的に適切な agent-browser コマンドを呼び出します。

例：

• 「example.com にアクセスして、ロゴをクリックしてからスクリーンショットを撮って」
• 「ログインフォームを見つけて、ユーザー名フィールドに testuser、パスワードフィールドに password123 と入力して」
• 「現在のページを PDF として保存して」

対応プラットフォーム

• Claude Code（CLI）

動作の仕組み

スキルは、ブラウザ操作を実行するために agent-browser CLI コマンドを構築して実行します。各操作は通常以下のようにマッピングされます。

Claude Code の指示	agent-browser コマンド
ページにアクセス	agent-browser goto <url>
要素をクリック	agent-browser click <selector>
テキストを入力	agent-browser type <selector> <text>
スクリーンショットを取得	agent-browser screenshot <path>
ページを評価	agent-browser evaluate <script>

制限事項

• agent-browser CLI がシステムにインストールされ、パスが通っている必要があります。
• Playwright や Puppeteer のようなフル機能のブラウザ自動化ライブラリと比較して、機能が限定されています。
• 複雑なブラウザ操作（複数タブの処理、iframe 操作など）は、サポートが限定的な場合があります。

ライセンス

MIT