Tutorial Overview

Series index: gstack Tutorial Series

/browse gives your AI agent actual eyes. Not simulated—real Chromium, real clicks, real screenshots.

What you will learn

• ✅ /browse command reference
• ✅ /open-gstack-browser with anti-bot stealth
• ✅ Sidebar agent with auto model routing
• ✅ Handoff/resume for CAPTCHA handling
• ✅ QA flow examples

Why Real Browser?

Without real browser

flowchart LR
    A[AI guesses UI] --> B[Writes code]
    B --> C[Deploy]
    C --> D[User reports bug]
    D --> E[AI guesses fix]

    style A fill:#ffcccc
    style D fill:#ffcccc

With /browse

flowchart TD
    A[/browse] --> B[Real Chromium]
    B --> C[Actual clicks]
    C --> D[Screenshots]
    D --> E[AI sees the problem]
    E --> F[Fix with evidence]

    style A fill:#e1f5ff
    style E fill:#e8f5e9

/browse — Headless Chromium

Basic commands

# Navigate
/browse https://example.com

# Screenshot
$B screenshot

# Click element
$B click "button[type='submit']"

# Type text
$B type "#email" "[email protected]"

# Wait for element
$B wait ".result"

# Extract text
$B text "h1"

# Execute JavaScript
$B eval "document.querySelector('.price').innerText"

Performance

/open-gstack-browser — Branded Browser

What it adds

1. Anti-bot stealth — Passes Cloudflare, Google
2. Sidebar extension — Claude Code integration baked in
3. Custom branding — “GStack Browser” in menu bar
4. Persistent session — No idle timeout while working

When to use

• Sites with bot detection
• Authentication flows
• Long-running sessions
• When you need to see the browser

Headless vs headed

# Headless (default, faster)
/browse https://example.com

# Headed (visible, for debugging)
/open-gstack-browser
# Then use $B commands normally

Sidebar Agent

What it is

Natural language in Chrome side panel. A child Claude instance executes your commands.

Auto model routing

Example commands

Sidebar: "Navigate to settings and screenshot it"
Sidebar: "Fill out this form with test data"
Sidebar: "Go through every item in this list and extract prices"
Sidebar: "Find the broken link on this page"

Session isolation

Each sidebar task runs in an isolated session. It won’t interfere with your main Claude Code window. Each task gets up to 5 minutes.

Handoff/Resume

The problem

Sometimes the AI gets stuck:

• CAPTCHA challenge
• MFA prompt
• Auth wall
• Complex login

The solution

flowchart TD
    A[AI stuck] --> B[$B handoff]
    B --> C[Visible Chrome opens]
    C --> D[User solves problem]
    D --> E[User: 'done']
    E --> F[$B resume]
    F --> G[AI continues]

    style B fill:#fff3e0
    style F fill:#e8f5e9

Automatic suggestion

After 3 consecutive failures, gstack suggests:

I'm stuck on a CAPTCHA/auth wall.
Would you like me to hand off to a visible browser?
You can solve it, then tell me when you're done.

Commands

# Hand off to visible browser
$B handoff

# Resume after user solves
$B resume

Cookie Import

One-click import

Import cookies from your real browser:

/setup-browser-cookies

Select source:

• Chrome
• Arc
• Brave
• Edge

When to use

• Testing authenticated pages
• Preserving login state
• Accessing paid content

QA Flow Example

Scenario

Test a login flow on staging.

Commands

# Start browser
/browse https://staging.example.com

# Navigate to login
$B click "a[href='/login']"

# Screenshot login page
$B screenshot

# Fill credentials
$B type "#email" "[email protected]"
$B type "#password" "testpassword123"

# Submit
$B click "button[type='submit']"

# Wait for dashboard
$B wait ".dashboard"

# Verify logged in
$B text ".user-name"
# Output: "Test User"

# Screenshot result
$B screenshot

Result

✅ Login flow works
- Navigated to /login
- Filled credentials
- Redirected to dashboard
- User name displayed correctly

Screenshot saved: login-flow-001.png

Skill Quick Reference

Summary

/browse gives AI real eyes:

1. Real Chromium — Not simulated, actual browser
2. Fast commands — ~100ms per action
3. Sidebar agent — Natural language in Chrome
4. Handoff/resume — Human help when stuck

Key takeaways

• ✅ Use /browse for automated testing
• ✅ Use /open-gstack-browser for bot-heavy sites
• ✅ Import cookies for authenticated testing
• ✅ Hand off to human for CAPTCHAs

Series navigation:

• ← Previous: Tutorial 5: Design Pipeline
• → Next: Tutorial 6B: Multi-Agent Browser
• Back: Series Index