Chris Tateandctate
cc3c70dc86
* next.js guide
* better
* shadcn
* fixes
* fix: correct screenshot test assertion to check path instead of base64
The daemon returns { path: savePath } for screenshot commands, not base64.
* fix: cross-platform Chrome detection and gitignore hardening
- Replace hardcoded macOS Chrome path with findLocalChrome() that
searches common paths on macOS, Linux, and WSL, with a clear error
message when no Chrome is found.
- Add .env and .env*.local to .gitignore to prevent accidental
secret commits.
* fix: correct Vercel deploy button repo URL to vercel-labs/agent-browser
* clean up
* demo
* next page
---------
Co-authored-by: ctate <366502+ctate@users.noreply.github.com>
54 lines
1.7 KiB
Markdown
54 lines
1.7 KiB
Markdown
# 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-core` running directly inside a Vercel serverless function
|
|
- **Vercel Sandbox** -- agent-browser + Chrome in an ephemeral Linux microVM
|
|
|
|
## Getting Started
|
|
|
|
```bash
|
|
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:
|
|
|
|
```bash
|
|
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
|
|
```
|