๋ณธ๋ฌธ์œผ๋กœ ๊ฑด๋„ˆ๋›ฐ๊ธฐ
ๅฐ้พ™่™พๅฐ้พ™่™พAI
๐Ÿค–

Browser Ladder

Climb the browser ladder โ€” start free, escalate only when needed. L1 (fetch) โ†’ L2 (local Playwright) โ†’ L3 (BrowserCat) โ†’ L4 (Browserless.io for CAPTCHA/bot bypass).

ไธ‹่ฝฝ3.4k
ๆ˜Ÿๆ ‡3
็‰ˆๆœฌ1.0.0
ๆต่งˆๅ™จ็ฝ‘้กต
ๅฎ‰ๅ…จ้€š่ฟ‡
โš™๏ธ่„šๆœฌ

ๆŠ€่ƒฝ่ฏดๆ˜Ž


name: browser-ladder version: 1.0.0 description: Climb the browser ladder โ€” start free, escalate only when needed. L1 (fetch) โ†’ L2 (local Playwright) โ†’ L3 (BrowserCat) โ†’ L4 (Browserless.io for CAPTCHA/bot bypass). metadata: clawdbot: emoji: "๐Ÿชœ" requires: bins: - node - docker env: - name: BROWSERCAT_API_KEY description: BrowserCat API key (free tier) - get at https://browsercat.com required: false - name: BROWSERLESS_TOKEN description: Browserless.io token ($10/mo) - get at https://browserless.io required: false

Browser Ladder ๐Ÿชœ

Climb from free to paid only when you need to.

Quick Setup

Run the setup script after installation:

./skills/browser-ladder/scripts/setup.sh

Or manually add to your .env:

# Optional - only needed for Rungs 3-4
BROWSERCAT_API_KEY=your-key    # Free: https://browsercat.com
BROWSERLESS_TOKEN=your-token   # Paid: https://browserless.io

The Ladder

โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚  ๐Ÿชœ Rung 4: Browserless.io (Cloud Paid)     โ”‚
โ”‚  โ€ข CAPTCHA solving, bot detection bypass    โ”‚
โ”‚  โ€ข Cost: $10+/mo                            โ”‚
โ”‚  โ€ข Requires: BROWSERLESS_TOKEN              โ”‚
โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
โ”‚  ๐Ÿชœ Rung 3: BrowserCat (Cloud Free)         โ”‚
โ”‚  โ€ข When local Docker fails                  โ”‚
โ”‚  โ€ข Cost: FREE (limited)                     โ”‚
โ”‚  โ€ข Requires: BROWSERCAT_API_KEY             โ”‚
โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
โ”‚  ๐Ÿชœ Rung 2: Playwright Docker (Local)       โ”‚
โ”‚  โ€ข JavaScript rendering, screenshots        โ”‚
โ”‚  โ€ข Cost: FREE (CPU only)                    โ”‚
โ”‚  โ€ข Requires: Docker installed               โ”‚
โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ค
โ”‚  ๐Ÿชœ Rung 1: web_fetch (No browser)          โ”‚
โ”‚  โ€ข Static pages, APIs, simple HTML          โ”‚
โ”‚  โ€ข Cost: FREE                               โ”‚
โ”‚  โ€ข Requires: Nothing                        โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

Start at the bottom. Climb only when needed.

When to Climb

SituationRungWhy
Static HTML, APIs1No JS needed
React/Vue/SPA apps2JS rendering
Docker unavailable3Cloud fallback
CAPTCHA/Cloudflare4Bot bypass needed
OAuth/MFA flows4Complex auth

Decision Flow

Need to access a URL
         โ”‚
         โ–ผ
    Static content? โ”€โ”€YESโ”€โ”€โ–ถ Rung 1 (web_fetch)
         โ”‚ NO
         โ–ผ
    JS rendering only? โ”€โ”€YESโ”€โ”€โ–ถ Rung 2 (Playwright Docker)
         โ”‚ NO                        โ”‚
         โ”‚                     Success? โ”€โ”€NOโ”€โ”€โ–ถ Rung 3
         โ–ผ                           โ”‚ YES
    CAPTCHA/bot detection? โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ–ถ DONE
         โ”‚ YES
         โ–ผ
    Rung 4 (Browserless.io) โ”€โ”€โ–ถ DONE

Usage Examples

Rung 1: Static content

// Built into Clawdbot
const content = await web_fetch("https://example.com");

Rung 2: JS-rendered page

docker run --rm -v /tmp:/output mcr.microsoft.com/playwright:v1.58.0-jammy \
  npx playwright screenshot https://spa-app.com /output/shot.png

Rung 3: Cloud browser (BrowserCat)

const { chromium } = require('playwright');
const browser = await chromium.connect('wss://api.browsercat.com/connect', {
  headers: { 'Api-Key': process.env.BROWSERCAT_API_KEY }
});

Rung 4: CAPTCHA bypass (Browserless)

const { chromium } = require('playwright');
const browser = await chromium.connectOverCDP(
  `wss://production-sfo.browserless.io?token=${process.env.BROWSERLESS_TOKEN}`
);
// CAPTCHA handled automatically

Cost Optimization

  1. Start low โ€” Always try Rung 1 first
  2. Cache results โ€” Don't re-fetch unnecessarily
  3. Batch requests โ€” One browser session for multiple pages
  4. Check success โ€” Only climb if lower rung fails

Get Your Keys

ServiceCostSign Up
BrowserCatFree tierhttps://browsercat.com
Browserless.io$10+/mohttps://browserless.io

Both are optional โ€” Rungs 1-2 work without any API keys.

ๅฆ‚ไฝ•ไฝฟ็”จใ€ŒBrowser Ladderใ€๏ผŸ

  1. ๆ‰“ๅผ€ๅฐ้พ™่™พAI๏ผˆWeb ๆˆ– iOS App๏ผ‰
  2. ็‚นๅ‡ปไธŠๆ–นใ€Œ็ซ‹ๅณไฝฟ็”จใ€ๆŒ‰้’ฎ๏ผŒๆˆ–ๅœจๅฏน่ฏๆก†ไธญ่พ“ๅ…ฅไปปๅŠกๆ่ฟฐ
  3. ๅฐ้พ™่™พAI ไผš่‡ชๅŠจๅŒน้…ๅนถ่ฐƒ็”จใ€ŒBrowser Ladderใ€ๆŠ€่ƒฝๅฎŒๆˆไปปๅŠก
  4. ็ป“ๆžœๅณๆ—ถๅ‘ˆ็Žฐ๏ผŒๆ”ฏๆŒ็ปง็ปญๅฏน่ฏไผ˜ๅŒ–

็›ธๅ…ณๆŠ€่ƒฝ