next.js example (#694)

* 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>
This commit is contained in:
Chris Tate
2026-03-09 15:24:44 -05:00
committed by GitHub
co-authored by ctate
parent 3649787268
commit cc3c70dc86
35 changed files with 6764 additions and 2 deletions
+34 -1
View File
@@ -713,7 +713,40 @@ agent-browser --executable-path /path/to/chromium open example.com
AGENT_BROWSER_EXECUTABLE_PATH=/path/to/chromium agent-browser open example.com
```
### Serverless Example (Vercel/AWS Lambda)
### Serverless (Vercel)
Two patterns for using agent-browser from Next.js server actions on Vercel:
**Vercel Sandbox** -- run agent-browser + Chrome in an ephemeral microVM. No external server needed:
```typescript
import { Sandbox } from "@vercel/sandbox";
const sandbox = await Sandbox.create({ runtime: "node24" });
await sandbox.runCommand("agent-browser", ["open", "https://example.com"]);
const result = await sandbox.runCommand("agent-browser", ["screenshot", "--json"]);
await sandbox.stop();
```
**External API server** -- host agent-browser on a server, call it from Vercel via HTTP:
```typescript
const res = await fetch(`${process.env.AGENT_BROWSER_API_URL}/api/run`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
commands: [
{ action: "launch", headless: true },
{ action: "navigate", url: "https://example.com" },
{ action: "screenshot" },
],
}),
});
```
See the [demo app](examples/demo/) for a visual demo of agent-browser's core capabilities across different compute environments.
### Serverless (AWS Lambda)
```typescript
import chromium from '@sparticuz/chromium';