本文へ移動
cccskills
無料GitHub で公開

vc-agent-browser

AI-optimized browser automation CLI with context-efficient snapshots. Use for long autonomous sessions, self-verifying workflows, video recording, and cloud browser testing (Browserbase).

インストール方法を見る

含まれるファイル(89)

  • SKILL.md10.1 KB
  • references/.gitkeep0 B
  • references/agent-browser-vs-chrome-devtools.md3.7 KB
  • references/browserbase-cloud-setup.md3.9 KB
  • references/cdp-domains.md17.4 KB
  • references/performance-guide.md21.0 KB
  • references/puppeteer-reference.md18.6 KB
  • screenshots/chat-mock-v1.png350.7 KB
  • screenshots/chat-mock-v2.png355.4 KB
  • screenshots/chat-mock-v3-wide.png370.0 KB
  • screenshots/chat-mock-v4.png165.6 KB
  • screenshots/chat-mock-workspace.png429 B
  • screenshots/ui-audit-20260408-v2/01-dashboard-instances-list-single-running.png64.3 KB
  • screenshots/ui-audit-20260408-v2/02-instance-overview-details-connections-actions.png118.4 KB
  • screenshots/ui-audit-20260408-v2/03-instance-settings-top-details-power-secrets-form.png149.3 KB
  • screenshots/ui-audit-20260408-v2/04-instance-settings-scrolled-secrets-dangerzone.png129.7 KB
  • screenshots/ui-audit-20260408-v2/05-agent-chat-full-layout-sidebar-expanded-3panel.png338.8 KB
  • screenshots/ui-audit-20260408-v2/06-agent-chat-sidebar-collapsed-with-e2e-job.png261.4 KB
  • screenshots/ui-audit-20260408-v2/07-agent-chat-sidebar-icons-conversation-start.png253.6 KB
  • screenshots/ui-audit-20260408-v2/08-sidebar-pinned-full-agent-list-chat-active.png309.2 KB
  • screenshots/ui-audit-20260408-v2/09-history-panel-linkedin-feed-results.png330.1 KB
  • screenshots/ui-audit-20260408-v2/10-chat-model-identity-minimax-m25-nitro.png292.1 KB
  • screenshots/ui-audit-20260408-v2/11-workspace-tab-file-explorer-no-selection.png363.3 KB
  • screenshots/ui-audit-20260408-v2/12-workspace-identity-md-file-open-in-editor.png508.9 KB
  • screenshots/ui-audit-20260408-v2/13-integrations-tab-connector-grid-overview.png569.7 KB
  • screenshots/ui-audit-20260408-v2/14-integration-linkedin-detail-connected-account.png316.9 KB
  • screenshots/ui-audit-20260408-v2/15-integrations-composio-detail-no-accounts.png295.4 KB
  • screenshots/ui-audit-20260408-v2/16-chat-workflows-tab-linkedin-engagement-package.png316.3 KB
  • screenshots/ui-audit-20260408-v2/17-chat-schedule-tab-heartbeat-and-cronjobs.png355.4 KB
  • screenshots/ui-audit-20260408-v2/18-chat-settings-tab-identity-proxy-tools.png381.0 KB
  • screenshots/ui-audit-20260408-v2/19-chat-browser-tab-user-typing-message.png336.8 KB
  • screenshots/ui-audit-20260408-v2/20-new-chat-empty-state-with-browser-panel.png85.5 KB
  • screenshots/ui-audit-20260408-v2/21-instances-page-create-instance-modal.png69.0 KB
  • screenshots/ui-audit-20260408-v2/22-chat-create-agent-modal-over-integrations-grid.png418.1 KB
  • screenshots/ui-audit-20260408-v2/23-integration-gmail-detail-no-accounts.png363.1 KB
  • screenshots/ui-audit-20260408-v2/24-integrations-search-linkedin-filtered-grid.png448.0 KB
  • screenshots/ui-audit-20260408-v2/25-chat-cron-e2e-test-job-composio-panel.png295.5 KB
  • screenshots/ui-audit-20260408-v2/26-workspace-openclaw-json-editor-file-tree.png551.1 KB
  • screenshots/ui-audit-20260408-v2/27-workspace-skills-folder-skill2md-empty-editor.png382.6 KB
  • screenshots/ui-audit-20260408-v2/28-workspace-agents-identity-folders-expanded.png362.0 KB
  • screenshots/ui-audit-20260408-v2/29-workspace-memory-sqlite-files-tree-expanded.png359.6 KB
  • screenshots/ui-audit-20260408/01-dashboard.png62.3 KB
  • screenshots/ui-audit-20260408/02-agent-chat-default.png303.8 KB
  • screenshots/ui-audit-20260408/03-agent-chat-browser-tab.png303.8 KB
  • screenshots/ui-audit-20260408/04-agent-chat-workspace-tab.png305.9 KB
  • screenshots/ui-audit-20260408/05-agent-chat-integrations-tab.png313.2 KB
  • screenshots/ui-audit-20260408/06-agent-chat-workflows-tab.png326.7 KB
  • screenshots/ui-audit-20260408/07-agent-chat-schedule-tab.png313.6 KB
  • screenshots/ui-audit-20260408/08-agent-chat-settings-tab.png361.9 KB
  • screenshots/ui-audit-20260408/09-agent-overview.png83.2 KB
  • screenshots/ui-audit-20260408/10-agent-settings.png173.9 KB
  • screenshots/ui-audit-20260408/11-agent-workspace.png141.6 KB
  • screenshots/ui-audit-20260408/12-instance-overview.png90.1 KB
  • screenshots/ui-audit-20260408/13-instance-browser.png119.8 KB
  • screenshots/ui-audit-20260408/14-instance-files.png115.6 KB
  • screenshots/ui-audit-20260408/15-instance-secrets.png161.4 KB
  • screenshots/ui-audit-20260408/16-instance-settings.png227.9 KB
  • screenshots/ui-audit-20260408/17-modal-create-instance.png107.4 KB
  • screenshots/ui-audit-20260408/18-modal-create-agent.png328.6 KB
  • screenshots/ui-audit-20260408/19-chat-session-sidebar.png432.1 KB
  • scripts/__tests__/error-handling.test.js3.6 KB
  • scripts/__tests__/selector.test.js6.4 KB
  • scripts/.gitignore53 B
  • scripts/aria-snapshot.js10.1 KB
  • scripts/attach-listener.js4.1 KB
  • scripts/click.js2.4 KB
  • scripts/connect-chrome.js4.1 KB
  • scripts/console.js1.9 KB
  • scripts/evaluate.js1.4 KB
  • scripts/fill.js2.0 KB
  • scripts/import-cookies.js5.7 KB
  • scripts/inject-auth.js7.3 KB
  • scripts/inspect-chat-page.js1.8 KB
  • scripts/install-deps.sh4.3 KB
  • scripts/install.sh2.1 KB
  • scripts/lib/browser.js10.6 KB
  • scripts/lib/selector.js5.3 KB
  • scripts/navigate.js4.6 KB
  • scripts/network.js2.9 KB
  • scripts/package-lock.json55.3 KB
  • scripts/package.json346 B
  • scripts/performance.js4.0 KB
  • scripts/README.md7.9 KB
  • scripts/reload-and-listen.js3.5 KB
  • scripts/screenshot.js6.2 KB
  • scripts/select-ref.js3.8 KB
  • scripts/snapshot.js3.6 KB
  • scripts/ws-debug.js1.5 KB
  • scripts/ws-full-debug.js3.3 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

agent-browser Skill

Browser automation CLI designed for AI agents. Uses "snapshot + refs" paradigm for 93% less context than Playwright MCP.

Quick Start

# Install globally
npm install -g agent-browser

# Download Chromium (one-time)
agent-browser install

# Linux: include system deps
agent-browser install --with-deps

# Verify
agent-browser --version

Core Workflow

The 4-step pattern for all browser automation:

# 1. Navigate
agent-browser open https://example.com

# 2. Snapshot (get interactive elements with refs)
agent-browser snapshot -i
# Output: button "Sign In" @e1, textbox "Email" @e2, ...

# 3. Interact using refs
agent-browser fill @e2 "user@example.com"
agent-browser click @e1

# 4. Re-snapshot after page changes
agent-browser snapshot -i

Project-Specific Setup

For project-specific connection patterns, logged-in session reuse through chrome-debug, and when to use agent-browser vs chrome-devtools vs direct non-browser verification, see the project's browser-automation testing notes in the consuming repo, if present. This skill file stays a generic tool reference only and should not redefine the project's broader testing policy.


When to Use (vs chrome-devtools)

Use agent-browserUse chrome-devtools
Long autonomous AI sessionsQuick one-off screenshots
Context-constrained workflowsCustom Puppeteer scripts needed
Video recording for debuggingWebSocket full frame debugging
Cloud browsers (Browserbase)Existing workflow integration
Multi-tab handlingNeed Sharp auto-compression
Self-verifying build loopsSession with auth injection

Token efficiency: ~280 chars/snapshot vs 8K+ for Playwright MCP.

Command Reference

Navigation

agent-browser open <url>       # Navigate to URL
agent-browser back             # Go back
agent-browser forward          # Go forward
agent-browser reload           # Reload page
agent-browser close            # Close browser

Analysis (Snapshot)

agent-browser snapshot         # Full accessibility tree
agent-browser snapshot -i      # Interactive elements only (recommended)
agent-browser snapshot -c      # Compact output
agent-browser snapshot -d 3    # Limit depth
agent-browser snapshot -s "nav" # Scope to CSS selector

Interactions (use @refs from snapshot)

agent-browser click @e1        # Click element
agent-browser dblclick @e1     # Double-click
agent-browser fill @e2 "text"  # Clear and fill input
agent-browser type @e2 "text"  # Type without clearing
agent-browser press Enter      # Press key
agent-browser hover @e1        # Hover over element
agent-browser check @e3        # Check checkbox
agent-browser uncheck @e3      # Uncheck checkbox
agent-browser select @e4 "opt" # Select dropdown option
agent-browser scroll @e1       # Scroll element into view
agent-browser scroll down 500  # Scroll page by pixels
agent-browser drag @e1 @e2     # Drag from e1 to e2
agent-browser upload @e5 file.pdf  # Upload file

Information Retrieval

agent-browser get text @e1     # Get text content
agent-browser get html @e1     # Get HTML
agent-browser get value @e2    # Get input value
agent-browser get attr @e1 href  # Get attribute
agent-browser get title        # Page title
agent-browser get url          # Current URL
agent-browser get count "li"   # Count elements
agent-browser get box @e1      # Bounding box

State Checks

agent-browser is visible @e1   # Check visibility
agent-browser is enabled @e1   # Check if enabled
agent-browser is checked @e3   # Check if checked

Media

agent-browser screenshot           # Capture viewport
agent-browser screenshot --full    # Full page
agent-browser screenshot -o ss.png # Save to file
agent-browser pdf -o page.pdf      # Export PDF
agent-browser record start         # Start video recording
agent-browser record stop          # Stop and save video
agent-browser record restart       # Restart recording

Wait Conditions

agent-browser wait @e1                    # Wait for element
agent-browser wait --text "Success"       # Wait for text to appear
agent-browser wait --url "/dashboard"     # Wait for URL pattern
agent-browser wait --load                 # Wait for page load
agent-browser wait --idle                 # Wait for network idle
agent-browser wait --fn "() => window.ready"  # Wait for JS condition

Browser Configuration

agent-browser viewport 1920 1080   # Set viewport size
agent-browser device "iPhone 14"   # Emulate device
agent-browser geolocation 40.7 -74.0  # Set geolocation
agent-browser offline true         # Enable offline mode
agent-browser headers '{"X-Custom":"val"}'  # Set headers
agent-browser credentials user pass  # HTTP auth
agent-browser color-scheme dark    # Set color scheme

Storage Management

agent-browser cookies              # List cookies
agent-browser cookies set name=val # Set cookie
agent-browser cookies clear        # Clear cookies
agent-browser storage local        # Get localStorage
agent-browser storage session      # Get sessionStorage
agent-browser state save auth.json # Save browser state
agent-browser state load auth.json # Load browser state

Network Control

agent-browser network route "**/*.jpg" --abort    # Block requests
agent-browser network route "**/api/*" --body '{"data":[]}'  # Mock response
agent-browser network unroute "**/*.jpg"          # Remove specific route
agent-browser network requests                    # List intercepted requests

Semantic Finding

agent-browser find role button           # Find by ARIA role
agent-browser find text "Submit"         # Find by text content
agent-browser find label "Email"         # Find by label
agent-browser find placeholder "Search"  # Find by placeholder
agent-browser find testid "login-btn"    # Find by data-testid
agent-browser find first "button"        # First matching element
agent-browser find last "li"             # Last matching element
agent-browser find nth 2 "li"            # Nth element (0-indexed)

Advanced

agent-browser tabs                 # List tabs
agent-browser tab new              # New tab
agent-browser tab 2                # Switch to tab
agent-browser tab close            # Close current tab
agent-browser frame 0              # Switch to frame
agent-browser dialog accept        # Accept dialog
agent-browser dialog dismiss       # Dismiss dialog
agent-browser eval "document.title"  # Execute JS
agent-browser highlight @e1        # Highlight element visually
agent-browser mouse move 100 200   # Move mouse to coordinates
agent-browser mouse down           # Mouse button down
agent-browser mouse up             # Mouse button up

Global Options

OptionDescription
--session <name>Named session for parallel testing
--jsonJSON output for parsing
--headedShow browser window
--cdp <port>Connect via Chrome DevTools Protocol
-p <provider>Cloud browser provider
--proxy <url>Proxy server
--headers <json>Custom HTTP headers
--executable-pathCustom browser binary
--extension <path>Load browser extension

Environment Variables

VariableDescription
AGENT_BROWSER_SESSIONDefault session name
AGENT_BROWSER_PROVIDERCloud provider (e.g., browserbase)
AGENT_BROWSER_EXECUTABLE_PATHBrowser binary location
AGENT_BROWSER_EXTENSIONSComma-separated extension paths
AGENT_BROWSER_STREAM_PORTWebSocket streaming port
AGENT_BROWSER_HOMECustom installation directory
AGENT_BROWSER_PROFILEBrowser profile directory
BROWSERBASE_API_KEYBrowserbase API key
BROWSERBASE_PROJECT_IDBrowserbase project ID

Common Patterns

Form Submission

agent-browser open https://example.com/login
agent-browser snapshot -i
agent-browser fill @e1 "user@example.com"
agent-browser fill @e2 "password123"
agent-browser click @e3  # Submit button
agent-browser wait url "/dashboard"

State Persistence (Auth)

# Save authenticated state
agent-browser open https://example.com/login
# ... login steps ...
agent-browser state save auth.json

# Reuse in future sessions
agent-browser state load auth.json
agent-browser open https://example.com/dashboard

Video Recording (Debugging)

agent-browser open https://example.com
agent-browser record start
# ... perform actions ...
agent-browser record stop  # Saves to recording.webm

Parallel Sessions

# Terminal 1
agent-browser --session test1 open https://example.com

# Terminal 2
agent-browser --session test2 open https://example.com

Cloud Browsers (Browserbase)

For CI/CD or environments without local browser:

# Set credentials
export BROWSERBASE_API_KEY="your-api-key"
export BROWSERBASE_PROJECT_ID="your-project-id"

# Use cloud browser
agent-browser -p browserbase open https://example.com

See references/browserbase-cloud-setup.md for detailed setup.

Troubleshooting

IssueSolution
Command not foundRun npm install -g agent-browser
Chromium missingRun agent-browser install
Linux deps missingRun agent-browser install --with-deps
Session staleClose browser: agent-browser close
Element not foundRe-run snapshot -i after page changes

Resources

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Evaluate 4 execution strategies (sequential, parallel-subagents, workflow, agent-team) for a phase or fan-out task. Outputs 7-signal score table, agent count math, cost guards, and strategy recommendation.

日本語の概要は準備中です。原文の説明を表示しています。

withkynam/vibecode-pro-max-kit1,1472026年6月21日 更新

Audit project context routing, shared-skill discoverability, and Claude/Codex wiring. Use when context docs or skill surfaces move, split, or drift.

日本語の概要は準備中です。原文の説明を表示しています。

withkynam/vibecode-pro-max-kit1,1472026年6月21日 更新

Audit active project plan files for staleness, completion, and routing truth. Use when cleaning up plans, reconciling active work, or archiving completed artifacts.

日本語の概要は準備中です。原文の説明を表示しています。

withkynam/vibecode-pro-max-kit1,1472026年6月21日 更新

Audit agent harness health: Claude/Codex agent parity, skill registry consistency, README.md sync, and protocol file wiring. Use when agents, skills, README.md, or development-protocol files move, split, or drift.

日本語の概要は準備中です。原文の説明を表示しています。

withkynam/vibecode-pro-max-kit1,1472026年6月21日 更新

Emit and validate the provisional goal block for Autopilot Mode. Owns the 9-field format and resume detection from a pasted goal block.

日本語の概要は準備中です。原文の説明を表示しています。

withkynam/vibecode-pro-max-kit1,1472026年6月21日 更新

Loop: find gaps → fix → repeat until agents find no gaps or a metric goal is hit. Shared loop primitive for PVL, EVL, and standalone quality runs.

日本語の概要は準備中です。原文の説明を表示しています。

withkynam/vibecode-pro-max-kit1,1472026年6月21日 更新

withkynam のスキルをすべて見る

このスキルの問題を報告する