sandbox docs (#698)

* sandbox docs

* format
This commit is contained in:
Chris Tate
2026-03-09 17:09:05 -05:00
committed by GitHub
parent d0651f14bc
commit c309535691
4 changed files with 163 additions and 30 deletions
+13 -6
View File
@@ -1,11 +1,13 @@
# agent-browser Environments
A demo of agent-browser running in a Vercel Sandbox. Enter a URL and take a screenshot or accessibility snapshot.
A demo of agent-browser running in a Vercel Sandbox. Pick a URL, take a screenshot or accessibility snapshot, and watch each command execute in real time.
## How It Works
The app runs agent-browser + Chrome inside an ephemeral Vercel Sandbox microVM. A Linux VM spins up on demand, executes agent-browser commands, and shuts down. No binary size limits, no Chromium bundling complexity.
The UI streams progress via Server-Sent Events so you can see each step as it runs (sandbox creation, browser startup, navigation, screenshot/snapshot, cleanup).
## Getting Started
```bash
@@ -14,9 +16,11 @@ pnpm install
pnpm dev
```
For local development, set `VERCEL_TOKEN`, `VERCEL_TEAM_ID`, and `VERCEL_PROJECT_ID` in `.env.local` so the Sandbox SDK can authenticate.
## Sandbox Snapshots
Without optimization, each Sandbox run installs agent-browser + Chromium from scratch (~30s). A **sandbox snapshot** is a saved VM image with everything pre-installed -- the sandbox boots from the image instead of installing, bringing startup down to sub-second. (This is unrelated to agent-browser's *accessibility snapshot* feature, which dumps a page's accessibility tree.)
Without optimization, each Sandbox run installs system dependencies + agent-browser + Chromium from scratch (~30s). A **sandbox snapshot** is a saved VM image with everything pre-installed -- the sandbox boots from the image instead of installing, bringing startup down to sub-second. (This is unrelated to agent-browser's *accessibility snapshot* feature, which dumps a page's accessibility tree.)
Create a sandbox snapshot by running the helper script once:
@@ -32,6 +36,9 @@ Add the ID to your Vercel project environment variables or `.env.local`. Recomme
| Variable | Description |
|---|---|
| `AGENT_BROWSER_SNAPSHOT_ID` | Sandbox snapshot ID for sub-second startup (see above) |
| `VERCEL_TOKEN` | Vercel personal access token (for local dev; OIDC is automatic on Vercel) |
| `VERCEL_TEAM_ID` | Vercel team ID (for local dev) |
| `VERCEL_PROJECT_ID` | Vercel project ID (for local dev) |
| `KV_REST_API_URL` | Upstash Redis URL for rate limiting (optional) |
| `KV_REST_API_TOKEN` | Upstash Redis token for rate limiting (optional) |
| `RATE_LIMIT_PER_MINUTE` | Max requests per minute per IP (default: 10) |
@@ -42,11 +49,11 @@ Add the ID to your Vercel project environment variables or `.env.local`. Recomme
```
examples/environments/
app/
page.tsx # Demo UI
actions/browse.ts # Server actions
api/browse/route.ts # API route for programmatic access
page.tsx # Demo UI with streaming progress
actions/browse.ts # Server action (env status check)
api/browse/route.ts # Streaming SSE endpoint
lib/
agent-browser-sandbox.ts # Vercel Sandbox client
agent-browser-sandbox.ts # Vercel Sandbox client with progress callbacks
constants.ts # Allowed URLs
rate-limit.ts # Upstash rate limiting
scripts/