browser-use-integration

Browser-Use Plugin Integration

Overview

The browser-use plugin provides headless Chromium screenshot capability as a fallback when the claude-in-chrome extension is unavailable. When installed alongside designer, it enables the design-review agent to capture browser screenshots without requiring the user's Chrome instance to be open.

This skill is optional — all designer plugin functionality works without browser-use installed. browser-use is the fallback for Tier 2 of the three-tier browser capture chain:

1. claude-in-chrome (preferred — real Chrome, CSS snapshot, JS execution)
2. browser-use (fallback — headless Chromium, screenshot only)
3. Error with install options

When to Use

Use this skill when:

• The design-review agent has REFERENCE_TYPE = "browser" (URL reference)
• The design-review agent has IMPL_TYPE = "url" (URL implementation)
• claude-in-chrome extension is NOT installed or unavailable
• User needs automated screenshot capture without opening Chrome manually

Detection Pattern

Probe the MCP tools directly — no subprocess, no plugin listing. A tool that answers is the only presence check this skill makes:

chrome_available = try mcp__claude-in-chrome__tabs_context_mcp()
  → success: use Tier 1 (claude-in-chrome)
  → error: chrome not available

browser_use_available = try mcp__browser-use__browser_list_sessions()
  → success: use Tier 2 (browser-use)
  → error: neither available → Tier 3 (error)

Screenshot Capture Pattern

When browser-use is available (Tier 2), use this exact sequence:

Step 1: Navigate (creates session automatically)
  mcp__browser-use__browser_navigate(url: TARGET_URL)
  → save session_id from response

Step 2: Capture screenshot
  mcp__browser-use__browser_screenshot(session_id: SESSION_ID, full_page: False)
  → returns: {"image": "<base64-PNG>", "format": "png", "width": N, "height": N}
  → save BASE64_DATA from response["image"]

Step 3: Decode base64 to file (Python3 is available when browser-use is installed)
  Bash:
  python3 -c "import base64, sys; open('${OUTPUT_DIR}/filename.png','wb').write(base64.b64decode(sys.argv[1]))" "${BASE64_DATA}"

Step 4: Verify file was created
  Bash:
  test -f "${OUTPUT_DIR}/filename.png" && echo "ok" || echo "decode_failed"
  If decode_failed: close session then stop with error.

Step 5: Close session (ALWAYS — even on error)
  mcp__browser-use__browser_close_session(session_id: SESSION_ID)