agent-browser Demo
A visual demo of agent-browser's core capabilities. Enter a URL, pick a compute environment, and take a screenshot or accessibility snapshot.
Environments
- Serverless Function --
@sparticuz/chromium+puppeteer-corerunning directly inside a Vercel serverless function - Vercel Sandbox -- agent-browser + Chrome in an ephemeral Linux microVM
Getting Started
cd examples/demo
pnpm install
pnpm dev
Serverless Function
Runs headless Chrome directly in the serverless function. On Vercel, @sparticuz/chromium provides the binary automatically. Locally, the app finds your system Chrome or uses CHROMIUM_PATH.
Vercel Sandbox
Spins up a Linux microVM on demand, installs agent-browser + Chrome, runs the commands, and shuts down. No binary size limits. Create a snapshot to make startup sub-second:
npx tsx scripts/create-snapshot.ts
# Output: AGENT_BROWSER_SNAPSHOT_ID=snap_xxxxxxxxxxxx
Add the snapshot ID to your Vercel environment variables or .env.local.
Environment Variables
| Variable | Environment | Description |
|---|---|---|
CHROMIUM_PATH |
Serverless | Path to local Chrome/Chromium binary (auto-detected on Vercel) |
AGENT_BROWSER_SNAPSHOT_ID |
Sandbox | Pre-built snapshot ID for fast startup |
Project Structure
examples/demo/
app/
page.tsx # Demo UI
actions/browse.ts # Server actions (all environments)
api/browse/route.ts # API route for programmatic access
lib/
agent-browser.ts # Serverless: @sparticuz/chromium + puppeteer-core
agent-browser-sandbox.ts # Sandbox: Vercel Sandbox client
scripts/
create-snapshot.ts # Create sandbox snapshot