vercel-sandbox

Name: vercel-sandbox
Author: vercel-labs

39kstars2.5kforks

How to install vercel-sandbox?

vercel-labs/agent-browser/vercel-sandbox

$npx -y skills add vercel-labs/agent-browser --skill vercel-sandbox

Installs into the current project.

Summary

Run agent-browser + Chrome inside Vercel Sandbox microVMs for browser automation from any Vercel-deployed app. Use when the user needs browser automation in a Vercel app (Next.js, SvelteKit, Nuxt, Remix, Astro, etc.), wants to run headless Chrome without binary size limits, needs

Files · 1

View on GitHub

SKILL.md

1	# Browser Automation with Vercel Sandbox
2
3	Run agent-browser + headless Chrome inside ephemeral Vercel Sandbox microVMs. A Linux VM spins up on demand, executes browser commands, and shuts down. Works with any Vercel-deployed framework (Next.js, SvelteKit, Nuxt, Remix, Astro, etc.).
4
5	## Dependencies
6
7	```bash
8	pnpm add @agent-browser/sandbox @vercel/sandbox
9	```
10
11	The sandbox VM needs system dependencies for Chromium plus agent-browser itself. The `@agent-browser/sandbox` helpers install them by default for fresh sandboxes and use sandbox snapshots (below) for sub-second startup. Pass `installSystemDependencies: false` only when the sandbox image already provides Chromium's required libraries.
12
13	## Core Pattern
14
15	```ts
16	import {
17	createAgentBrowserSnapshot,
18	runAgentBrowserCommand,
19	withAgentBrowserSandbox,
20	type VercelSandboxSession,
21	} from "@agent-browser/sandbox/vercel";
22
23	async function withBrowser<T>(
24	fn: (sandbox: VercelSandboxSession) => Promise<T>,
25	): Promise<T> {
26	return withAgentBrowserSandbox(fn);
27	}
28	```
29
30	## Screenshot
31
32	The `screenshot --json` command saves to a file and returns the path. Read the file back as base64:
33
34	```ts
35	export async function screenshotUrl(url: string) {
36	return withBrowser(async (sandbox) => {
37	await runAgentBrowserCommand(sandbox, ["open", url]);
38
39	const titleResult = await runAgentBrowserCommand<{ data?: { title?: string } }>(sandbox, [
40	"get", "title",
41	]);
42	const title = titleResult.json?.data?.title \|\| url;
43
44	const ssResult = await runAgentBrowserCommand<{ data?: { path?: string } }>(sandbox, [
45	"screenshot",
46	]);
47	const ssPath = ssResult.json?.data?.path;
48	if (!ssPath) throw new Error("Screenshot did not return a file path.");
49	const b64Result = await sandbox.runCommand("base64", ["-w", "0", ssPath]);
50	const screenshot = (await b64Result.stdout()).trim();
51
52	await runAgentBrowserCommand(sandbox, ["close"], { json: false });
53
54	return { title, screenshot };
55	});
56	}
57	```
58
59	## Accessibility Snapshot
60
61	```ts
62	export async function snapshotUrl(url: string) {
63	return withBrowser(async (sandbox) => {
64	await runAgentBrowserCommand(sandbox, ["open", url]);
65
66	const titleResult = await runAgentBrowserCommand<{ data?: { title?: string } }>(sandbox, [
67	"get", "title",
68	]);
69	const title = titleResult.json?.data?.title \|\| url;
70
71	const snapResult = await runAgentBrowserCommand(sandbox, ["snapshot", "-i", "-c"], {
72	json: false,
73	});
74
75	await runAgentBrowserCommand(sandbox, ["close"], { json: false });
76
77	return { title, snapshot: snapResult.stdout };
78	});
79	}
80	```
81
82	## Multi-Step Workflows
83
84	The sandbox persists between commands, so you can run full automation sequences:
85
86	```ts
87	export async function fillAndSubmitForm(url: string, data: Record<string, string>) {
88	return withBrowser(async (sandbox) => {
89	await runAgentBrowserCommand(sandbox, ["open", url]);
90
91	const snapResult = await runAgentBrowserCommand(sandbox, ["snapshot", "-i"], {
92	json: false,
93	});
94	const snapshot = snapResult.stdout;
95	// Parse snapshot to find element refs...
96
97	for (const [ref, value] of Object.entries(data)) {
98	await runAgentBrowserCommand(sandbox, ["fill", ref, value]);
99	}
100
101	await runAgentBrowserCommand(sandbox, ["click", "@e5"]);
102	await runAgentBrowserCommand(sandbox, ["wait", "--load", "networkidle"]);
103
104	const ssResult = await runAgentBrowserCommand<{ data?: { path?: string } }>(sandbox, [
105	"screenshot",
106	]);
107	const ssPath = ssResult.json?.data?.path;
108	if (!ssPath) throw new Error("Screenshot did not return a file path.");
109	const b64Result = await sandbox.runCommand("base64", ["-w", "0", ssPath]);
110	const screenshot = (await b64Result.stdout()).trim();
111
112	await runAgentBrowserCommand(sandbox, ["close"], { json: false });
113
114	return { screenshot };
115	});
116	}
117	```
118
119	## Sandbox Snapshots (Fast Startup)
120
121	A sandbox snapshot is a saved VM image of a Vercel Sandbox with system dependencies + agent-browser + Chromium already installed. Think of it like a Docker image: instead of installing dependencies from scratch every time, the sandbox boots from the pre-built image.
122
123	This is unrelated to agent-browser's accessibility snapshot feature (`agent-browser snapshot`), which dumps a page's accessibility tree. A sandbox snapshot is a Vercel infrastructure concept for fast VM startup.
124
125	Without a sandbox snapshot, e

People who liked this also viewed

6 picks

Type

vercel-sandbox

39kstars2.5kforks

View on GitHub

How to install vercel-sandbox?

vercel-labs/agent-browser/vercel-sandbox

$npx -y skills add vercel-labs/agent-browser --skill vercel-sandbox

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Browser Automation with Vercel Sandbox
2
3	Run agent-browser + headless Chrome inside ephemeral Vercel Sandbox microVMs. A Linux VM spins up on demand, executes browser commands, and shuts down. Works with any Vercel-deployed framework (Next.js, SvelteKit, Nuxt, Remix, Astro, etc.).
4
5	## Dependencies
6
7	```bash
8	pnpm add @agent-browser/sandbox @vercel/sandbox
9	```
10
11	The sandbox VM needs system dependencies for Chromium plus agent-browser itself. The `@agent-browser/sandbox` helpers install them by default for fresh sandboxes and use sandbox snapshots (below) for sub-second startup. Pass `installSystemDependencies: false` only when the sandbox image already provides Chromium's required libraries.
12
13	## Core Pattern
14
15	```ts
16	import {
17	createAgentBrowserSnapshot,
18	runAgentBrowserCommand,
19	withAgentBrowserSandbox,
20	type VercelSandboxSession,
21	} from "@agent-browser/sandbox/vercel";
22
23	async function withBrowser<T>(
24	fn: (sandbox: VercelSandboxSession) => Promise<T>,
25	): Promise<T> {
26	return withAgentBrowserSandbox(fn);
27	}
28	```
29
30	## Screenshot
31
32	The `screenshot --json` command saves to a file and returns the path. Read the file back as base64:
33
34	```ts
35	export async function screenshotUrl(url: string) {
36	return withBrowser(async (sandbox) => {
37	await runAgentBrowserCommand(sandbox, ["open", url]);
38
39	const titleResult = await runAgentBrowserCommand<{ data?: { title?: string } }>(sandbox, [
40	"get", "title",
41	]);
42	const title = titleResult.json?.data?.title \|\| url;
43
44	const ssResult = await runAgentBrowserCommand<{ data?: { path?: string } }>(sandbox, [
45	"screenshot",
46	]);
47	const ssPath = ssResult.json?.data?.path;
48	if (!ssPath) throw new Error("Screenshot did not return a file path.");
49	const b64Result = await sandbox.runCommand("base64", ["-w", "0", ssPath]);
50	const screenshot = (await b64Result.stdout()).trim();
51
52	await runAgentBrowserCommand(sandbox, ["close"], { json: false });
53
54	return { title, screenshot };
55	});
56	}
57	```
58
59	## Accessibility Snapshot
60
61	```ts
62	export async function snapshotUrl(url: string) {
63	return withBrowser(async (sandbox) => {
64	await runAgentBrowserCommand(sandbox, ["open", url]);
65
66	const titleResult = await runAgentBrowserCommand<{ data?: { title?: string } }>(sandbox, [
67	"get", "title",
68	]);
69	const title = titleResult.json?.data?.title \|\| url;
70
71	const snapResult = await runAgentBrowserCommand(sandbox, ["snapshot", "-i", "-c"], {
72	json: false,
73	});
74
75	await runAgentBrowserCommand(sandbox, ["close"], { json: false });
76
77	return { title, snapshot: snapResult.stdout };
78	});
79	}
80	```
81
82	## Multi-Step Workflows
83
84	The sandbox persists between commands, so you can run full automation sequences:
85
86	```ts
87	export async function fillAndSubmitForm(url: string, data: Record<string, string>) {
88	return withBrowser(async (sandbox) => {
89	await runAgentBrowserCommand(sandbox, ["open", url]);
90
91	const snapResult = await runAgentBrowserCommand(sandbox, ["snapshot", "-i"], {
92	json: false,
93	});
94	const snapshot = snapResult.stdout;
95	// Parse snapshot to find element refs...
96
97	for (const [ref, value] of Object.entries(data)) {
98	await runAgentBrowserCommand(sandbox, ["fill", ref, value]);
99	}
100
101	await runAgentBrowserCommand(sandbox, ["click", "@e5"]);
102	await runAgentBrowserCommand(sandbox, ["wait", "--load", "networkidle"]);
103
104	const ssResult = await runAgentBrowserCommand<{ data?: { path?: string } }>(sandbox, [
105	"screenshot",
106	]);
107	const ssPath = ssResult.json?.data?.path;
108	if (!ssPath) throw new Error("Screenshot did not return a file path.");
109	const b64Result = await sandbox.runCommand("base64", ["-w", "0", ssPath]);
110	const screenshot = (await b64Result.stdout()).trim();
111
112	await runAgentBrowserCommand(sandbox, ["close"], { json: false });
113
114	return { screenshot };
115	});
116	}
117	```
118
119	## Sandbox Snapshots (Fast Startup)
120
121	A sandbox snapshot is a saved VM image of a Vercel Sandbox with system dependencies + agent-browser + Chromium already installed. Think of it like a Docker image: instead of installing dependencies from scratch every time, the sandbox boots from the pre-built image.
122
123	This is unrelated to agent-browser's accessibility snapshot feature (`agent-browser snapshot`), which dumps a page's accessibility tree. A sandbox snapshot is a Vercel infrastructure concept for fast VM startup.
124
125	Without a sandbox snapshot, e

People who liked this also viewed

6 picks

Type