Official agent skill

Vercel Sandbox Browser

by vercel-labs in vercel-labs/agent-browser

Runs agent-browser with headless Chrome inside Vercel Sandbox microVMs so Vercel-deployed apps can automate a browser without binary size limits.

OfficialApache-2.0Auto-check passedProductivity & Automation

Install Vercel Sandbox Browser

skills CLI
$ npx skills add vercel-labs/agent-browser --skill vercel-sandbox -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install vercel-labs/agent-browser vercel-sandbox --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/vercel-labs/agent-browser.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skill-data/vercel-sandbox .claude/skills/vercel-sandbox && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
vercel-sandbox
GitHub stars
44k
Token cost
~2k tokens
SKILL.md length
416 words
Files
1
Skills in repo
10
Repo updated
First seen
Licence
Apache-2.0

At a glance

Runs agent-browser with headless Chrome inside Vercel Sandbox microVMs so Vercel-deployed apps can automate a browser without binary size limits.

  • Adding browser automation to an app deployed on Vercel
  • SKILL.md covers Dependencies, Core Pattern, Screenshot and Accessibility Snapshot, plus 7 more sections
  • Calls pnpm and npx; needs VERCEL_TOKEN and VERCEL_OIDC_TOKEN
  • Running headless Chrome where binary size limits block it

What it does

This skill shows how to run the agent-browser CLI and headless Chrome inside ephemeral Vercel Sandbox microVMs, so an app deployed on Vercel can drive a browser without hitting binary size limits. A Linux VM starts on demand, runs the browser commands, then shuts down. It works with any framework deployed on Vercel, such as Next.js, SvelteKit, Nuxt, Remix or Astro.

The pattern uses the @agent-browser/sandbox and @vercel/sandbox packages, installed with pnpm, and TypeScript helpers such as createAgentBrowserSnapshot and runAgentBrowserCommand. Examples cover screenshots saved to a file and read back as base64, accessibility-tree snapshots, and multi-step flows such as filling and submitting a form in a sandbox that stays alive between commands. A sandbox snapshot, a saved VM image with system dependencies, agent-browser and Chromium preinstalled, cuts startup from about 30 seconds to under a second, and its ID goes in the AGENT_BROWSER_SNAPSHOT_ID environment variable.

When your agent uses it

  • Adding browser automation to an app deployed on Vercel
  • Running headless Chrome where binary size limits block it
  • Keeping a browser session alive across several commands
  • Needing an isolated, throwaway browser environment per task

Example prompts

  • “Add a route to my Next.js app that takes a screenshot of any URL using Vercel Sandbox.”
  • “Fill and submit the signup form on this site from a Vercel Sandbox and return the result.”
  • “Create a sandbox snapshot so the browser starts in under a second.”

Requirements

  • A Vercel project with access to Vercel Sandbox
  • The @agent-browser/sandbox and @vercel/sandbox packages

What it can do on your machine

Read from SKILL.md and the folder at commit 0207911. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • pnpm
    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use pnpm and npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • VERCEL_TOKEN
    • VERCEL_OIDC_TOKEN

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Vercel Sandbox Browser loads about 2k tokens when it runs. Until then it costs about 140 tokens; SKILL.md has 416 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~140
When it runs · the whole SKILL.md, loaded when a task matches
~2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from vercel-labs/agent-browser at commit 0207911, republished under its Apache-2.0 licence (© vercel-labs). 416 words, ~1,972 tokens.

Download SKILL.mdSave it as .claude/skills/vercel-sandbox/SKILL.md (or your agent's skills folder).
name
vercel-sandbox
description
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 persistent browser sessions across commands, or wants ephemeral isolated browser environments. Triggers include "Vercel Sandbox browser", "microVM Chrome", "agent-browser in sandbox", "browser automation on Vercel", or any task requiring Chrome in a Vercel Sandbox.

Browser Automation with Vercel Sandbox

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.).

Dependencies

bash
pnpm add @agent-browser/sandbox @vercel/sandbox

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.

Core Pattern

ts
import {
  createAgentBrowserSnapshot,
  runAgentBrowserCommand,
  withAgentBrowserSandbox,
  type VercelSandboxSession,
} from "@agent-browser/sandbox/vercel";

async function withBrowser<T>(
  fn: (sandbox: VercelSandboxSession) => Promise<T>,
): Promise<T> {
  return withAgentBrowserSandbox(fn);
}

Screenshot

The screenshot --json command saves to a file and returns the path. Read the file back as base64:

ts
export async function screenshotUrl(url: string) {
  return withBrowser(async (sandbox) => {
    await runAgentBrowserCommand(sandbox, ["open", url]);

    const titleResult = await runAgentBrowserCommand<{ data?: { title?: string } }>(sandbox, [
      "get", "title",
    ]);
    const title = titleResult.json?.data?.title || url;

    const ssResult = await runAgentBrowserCommand<{ data?: { path?: string } }>(sandbox, [
      "screenshot",
    ]);
    const ssPath = ssResult.json?.data?.path;
    if (!ssPath) throw new Error("Screenshot did not return a file path.");
    const b64Result = await sandbox.runCommand("base64", ["-w", "0", ssPath]);
    const screenshot = (await b64Result.stdout()).trim();

    await runAgentBrowserCommand(sandbox, ["close"], { json: false });

    return { title, screenshot };
  });
}

Accessibility Snapshot

ts
export async function snapshotUrl(url: string) {
  return withBrowser(async (sandbox) => {
    await runAgentBrowserCommand(sandbox, ["open", url]);

    const titleResult = await runAgentBrowserCommand<{ data?: { title?: string } }>(sandbox, [
      "get", "title",
    ]);
    const title = titleResult.json?.data?.title || url;

    const snapResult = await runAgentBrowserCommand(sandbox, ["snapshot", "-i", "-c"], {
      json: false,
    });

    await runAgentBrowserCommand(sandbox, ["close"], { json: false });

    return { title, snapshot: snapResult.stdout };
  });
}

Multi-Step Workflows

The sandbox persists between commands, so you can run full automation sequences:

ts
export async function fillAndSubmitForm(
  url: string,
  data: Record<string, string>,
  postSubmitWaitArgs: string[],
) {
  return withBrowser(async (sandbox) => {
    await runAgentBrowserCommand(sandbox, ["open", url]);

    const snapResult = await runAgentBrowserCommand(sandbox, ["snapshot", "-i"], {
      json: false,
    });
    const snapshot = snapResult.stdout;
    // Parse snapshot to find element refs...

    for (const [ref, value] of Object.entries(data)) {
      await runAgentBrowserCommand(sandbox, ["fill", ref, value]);
    }

    await runAgentBrowserCommand(sandbox, ["click", "@e5"]);
    // Pass an app-specific wait, such as ["--url", "**/checkout/complete"],
    // ["--text", "Thanks"], or ["#confirmation"].
    await runAgentBrowserCommand(sandbox, ["wait", ...postSubmitWaitArgs]);

    const ssResult = await runAgentBrowserCommand<{ data?: { path?: string } }>(sandbox, [
      "screenshot",
    ]);
    const ssPath = ssResult.json?.data?.path;
    if (!ssPath) throw new Error("Screenshot did not return a file path.");
    const b64Result = await sandbox.runCommand("base64", ["-w", "0", ssPath]);
    const screenshot = (await b64Result.stdout()).trim();

    await runAgentBrowserCommand(sandbox, ["close"], { json: false });

    return { screenshot };
  });
}

Sandbox Snapshots (Fast Startup)

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.

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.

Without a sandbox snapshot, each run installs system deps + agent-browser + Chromium (~30s). With one, startup is sub-second.

Creating a sandbox snapshot

The snapshot must include system dependencies (via dnf), agent-browser, and Chromium:

ts
const snapshotId = await createAgentBrowserSnapshot();

Run this once, then set the environment variable:

bash
AGENT_BROWSER_SNAPSHOT_ID=snap_xxxxxxxxxxxx

A helper script is available in the demo app:

bash
npx tsx examples/environments/scripts/create-snapshot.ts

Recommended for any production deployment using the Sandbox pattern.

Show full SKILL.md (167 more words)Show less

Authentication

On Vercel deployments, the Sandbox SDK authenticates automatically via OIDC. For local development or explicit control, set:

bash
VERCEL_TOKEN=<personal-access-token>
VERCEL_TEAM_ID=<team-id>
VERCEL_PROJECT_ID=<project-id>

These are spread into Sandbox.create() calls. When absent, the SDK falls back to VERCEL_OIDC_TOKEN (automatic on Vercel).

Scheduled Workflows (Cron)

Combine with Vercel Cron Jobs for recurring browser tasks:

ts
// app/api/cron/route.ts  (or equivalent in your framework)
export async function GET() {
  const result = await withBrowser(async (sandbox) => {
    await sandbox.runCommand("agent-browser", ["open", "https://example.com/pricing"]);
    const snap = await sandbox.runCommand("agent-browser", ["snapshot", "-i", "-c"]);
    await sandbox.runCommand("agent-browser", ["close"]);
    return await snap.stdout();
  });

  // Process results, send alerts, store data...
  return Response.json({ ok: true, snapshot: result });
}
json
// vercel.json
{ "crons": [{ "path": "/api/cron", "schedule": "0 9 * * *" }] }

Environment Variables

VariableRequiredDescription
AGENT_BROWSER_SNAPSHOT_IDNo (but recommended)Pre-built sandbox snapshot ID for sub-second startup (see above)
VERCEL_TOKENNoVercel personal access token (for local dev; OIDC is automatic on Vercel)
VERCEL_TEAM_IDNoVercel team ID (for local dev)
VERCEL_PROJECT_IDNoVercel project ID (for local dev)

Framework Examples

The pattern works identically across frameworks. The only difference is where you put the server-side code:

FrameworkServer code location
Next.jsServer actions, API routes, route handlers
SvelteKit+page.server.ts, +server.ts
Nuxtserver/api/, server/routes/
Remixloader, action functions
Astro.astro frontmatter, API routes

Example

See examples/environments/ in the agent-browser repo for a working app with the Vercel Sandbox pattern, including a sandbox snapshot creation script, streaming progress UI, and rate limiting.

© vercel-labs, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skill-data/vercel-sandbox of vercel-labs/agent-browser.

Open the folder on GitHubat commit 0207911

Compare with similar skills

Vercel Sandbox Browser next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Vercel Sandbox Browser compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Vercel Sandbox Browser this skillvercel-labs/agent-browser44k—~2kAutomated safety check: PassApache-2.0
Vercel Optimize Auditvercel-labs/agent-skills32k8 repos~4.3kAutomated safety check: PassNone
Cloudflare Workers Frameworkssecondsky/claude-skills227—~1.4kAutomated safety check: PassMIT
Sanity Best Practicesrobotostudio/turbo-start-sanity183—~940Automated safety check: PassMIT
Sanity Best Practicessanity-io/agent-toolkit188—~1.3kAutomated safety check: PassMIT
Framework Adaptershashgraph-online/awesome-codex-plugins1.3k—~2.9kAutomated safety check: NotesApache-2.0

Similar skills

  • Vercel Optimize Audit

    vercel-labs/agent-skills

    Official

    Runs a metrics-first audit of a deployed Vercel project, gating investigations on real signals to produce ranked, citation-backed cost and performance recommendations.

    32k GitHub starsUsed in 8 repos~4.3k tokens
    DevOps & CloudAuto-check passed
  • Cloudflare Workers Frameworks

    secondsky/claude-skills

    Framework integration for Cloudflare Workers. An agent skill from secondsky/claude-skills.

    227 GitHub stars~1.4k tokensUpdated 11 days ago
    Frontend & DesignAuto-check passed
  • Sanity Best Practices

    robotostudio/turbo-start-sanity

    Sanity development best practices for schema design, GROQ queries, TypeGen, Visual Editing, images, Portable Text, Studio structure, localization, migrations, Sanity Functions, Blueprints, and…

    183 GitHub stars~940 tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed
  • Sanity Best Practices

    sanity-io/agent-toolkit

    Official

    Sanity development best practices for schema design, GROQ queries, TypeGen, Visual Editing, images, Portable Text, Studio structure, localization, migrations, Sanity Functions, webhooks, Blueprints…

    188 GitHub stars~1.3k tokensUpdated 4 days ago
    Backend & APIsAuto-check passed
  • Framework Adapters

    hashgraph-online/awesome-codex-plugins

    Official @dodopayments/ framework adapters that mount Checkout, CustomerPortal, and Webhooks route handlers.

    1.3k GitHub stars~2.9k tokensUpdated today
    Backend & APIsAuto-check: notes
  • Edgeone Makers Frameworks

    TencentEdgeOne/edgeone-makers-tools

    Web framework support matrix for EdgeOne Makers — which platform adapter each full-stack framework needs, where it plugs in, the build output directory, the preview asset-prefix option, the 404…

    1.9k GitHub stars~2.5k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

More from vercel-labs/agent-browser

All 10 skills in this repo
  • Agent Browser CLI

    vercel-labs/agent-browser

    Official

    Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking…

    44k GitHub starsUsed in 24 repos~864 tokens
    Auto-check passed
  • Dogfood Exploratory QA

    vercel-labs/agent-browser

    Official

    Explores a web app with the agent-browser CLI to find bugs and UX problems, then writes a report with screenshots, repro videos and step-by-step reproduction for each issue.

    44k GitHub starsUsed in 8 repos~2.7k tokens
    Auto-check passed
  • Electron App Automation

    vercel-labs/agent-browser

    Official

    Automates Electron desktop apps such as VS Code, Slack or Discord by connecting agent-browser to their Chrome DevTools Protocol port.

    44k GitHub starsUsed in 5 repos~1.7k tokens
    Auto-check passed
  • Slack Browser Automation

    vercel-labs/agent-browser

    Official

    Drives the Slack web app with the agent-browser CLI to check unread channels, search, read channel details and extract information, with screenshots as evidence.

    44k GitHub starsUsed in 1 repo~2.1k tokens
    Auto-check passed
  • Core Guide for agent-browser

    vercel-labs/agent-browser

    Official

    Core usage guide for the agent-browser CLI: the snapshot-and-ref workflow for navigating, clicking, filling forms, extracting data and running parallel sessions.

    44k GitHub starsUsed in 2 repos~9.5k tokens
    Auto-check passed
  • Official

    Records a site's browser traffic into a HAR file, then builds a standalone client or CLI that calls its internal endpoints directly with no browser.

    44k GitHub starsUsed in 1 repo~1.3k tokens
    Auto-check passed

Questions about Vercel Sandbox Browser

What does Vercel Sandbox Browser do?

Runs agent-browser with headless Chrome inside Vercel Sandbox microVMs so Vercel-deployed apps can automate a browser without binary size limits. This skill shows how to run the agent-browser CLI and headless Chrome inside ephemeral Vercel Sandbox microVMs, so an app deployed on Vercel can drive a browser without hitting binary size limits. A Linux VM starts on demand, runs the browser commands, then shuts down.

When should I use Vercel Sandbox Browser?

Vercel Sandbox Browser fits situations like: adding browser automation to an app deployed on Vercel; running headless Chrome where binary size limits block it; keeping a browser session alive across several commands; needing an isolated, throwaway browser environment per task.

How do I install Vercel Sandbox Browser in Claude Code?

Run `npx skills add vercel-labs/agent-browser --skill vercel-sandbox -a claude-code`. Or copy the skill folder (skill-data/vercel-sandbox in vercel-labs/agent-browser) into .claude/skills/vercel-sandbox in your project. Claude Code loads it when a task matches its description.

How do I install Vercel Sandbox Browser in Codex?

Run `npx skills add vercel-labs/agent-browser --skill vercel-sandbox -a codex`. Or copy the skill folder (skill-data/vercel-sandbox in vercel-labs/agent-browser) into .agents/skills/vercel-sandbox in your project. Codex loads it when a task matches its description.

Can I use Vercel Sandbox Browser in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add vercel-labs/agent-browser --skill vercel-sandbox -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/vercel-sandbox, .gemini/skills/vercel-sandbox, .github/skills/vercel-sandbox and .opencode/skills/vercel-sandbox in your project.

What does Vercel Sandbox Browser need to run?

Going by SKILL.md and its folder, Vercel Sandbox Browser needs the command-line tools its instructions call (pnpm and npx) and credentials named VERCEL_TOKEN and VERCEL_OIDC_TOKEN. Our summary lists: A Vercel project with access to Vercel Sandbox; The @agent-browser/sandbox and @vercel/sandbox packages.

Does Vercel Sandbox Browser access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Vercel Sandbox Browser safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Vercel Sandbox Browser use?

Vercel Sandbox Browser is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Vercel Sandbox Browser use?

About 2k tokens (SKILL.md is roughly 7.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Vercel Sandbox Browser?

Skills that share tags, products or a category with Vercel Sandbox Browser: Vercel Optimize Audit (vercel-labs/agent-skills, 32k stars), Cloudflare Workers Frameworks (secondsky/claude-skills, 227 stars), Sanity Best Practices (robotostudio/turbo-start-sanity, 183 stars) and Sanity Best Practices (sanity-io/agent-toolkit, 188 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Vercel Sandbox Browser?

vercel-labs (a GitHub organization, an official publisher) maintains it in vercel-labs/agent-browser, which has 43,705 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on October 8, 2026.

Source: vercel-labs/agent-browser on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.