# Vercel Sandbox > Ejecuta agent-browser + Chrome dentro de microVMs de Vercel Sandbox para automatización de navegador desde cualquier app desplegada en Vercel. Fuente: https://skillsagentes.com/skills/vercel-labs/agent-browser/vercel-sandbox Markdown: https://skillsagentes.com/skills/vercel-labs/agent-browser/vercel-sandbox.md Repositorio: https://github.com/vercel-labs/agent-browser Autor: vercel-labs Licencia: Apache-2.0 Actualizado: hace 3 meses Coste de contexto: 137 tok instalada, 1.9k tok al activarse, 1.9k tok con todos los archivos del bundle Bundle: 1 archivo, 8 KB Permisos que pide: ninguno declarado ## Instalación Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina. ```bash # Claude Code npx -y skills add vercel-labs/agent-browser --skill vercel-sandbox --agent claude-code # Cursor npx -y skills add vercel-labs/agent-browser --skill vercel-sandbox --agent cursor # Codex npx -y skills add vercel-labs/agent-browser --skill vercel-sandbox --agent codex # Gemini CLI npx -y skills add vercel-labs/agent-browser --skill vercel-sandbox --agent gemini # Windsurf npx -y skills add vercel-labs/agent-browser --skill vercel-sandbox --agent windsurf # Cline npx -y skills add vercel-labs/agent-browser --skill vercel-sandbox --agent cline ``` ## Qué hace - Levanta agent-browser + Chrome headless dentro de microVMs de Vercel Sandbox, ejecutando comandos y cerrando el sandbox al terminar - Permite persistir sesiones de navegador entre múltiples comandos para flujos de automatización con varios pasos - Crea y usa sandbox snapshots (imagen de VM con dependencias, agent-browser y Chromium preinstalados) para arranque en menos de un segundo - Autentica automáticamente vía OIDC en despliegues de Vercel, o mediante VERCEL_TOKEN/VERCEL_TEAM_ID/VERCEL_PROJECT_ID en local - Se integra con Vercel Cron Jobs para tareas de navegador programadas y recurrentes ## Cuándo usarla - Se necesita automatización de navegador dentro de una app desplegada en Vercel (Next.js, SvelteKit, Nuxt, Remix, Astro, etc.) - Se quiere correr Chrome headless sin límites de tamaño de binario - Se necesitan sesiones de navegador persistentes entre comandos - Se quieren entornos de navegador aislados y efímeros ## Qué la activa - "Toma una captura de pantalla de esta URL usando Vercel Sandbox" - "Necesito automatizar el llenado de un formulario en mi app de Next.js con Chrome headless" - "Configura un cron job en Vercel que revise el snapshot de accesibilidad de esta página cada día" - "Crea un sandbox snapshot para que el arranque de agent-browser sea más rápido" ## Antes de instalar - Requiere instalar @agent-browser/sandbox y @vercel/sandbox, y opcionalmente configurar AGENT_BROWSER_SNAPSHOT_ID, VERCEL_TOKEN, VERCEL_TEAM_ID y VERCEL_PROJECT_ID. - Necesita en el PATH: npx, pnpm - makes network requests ## Archivos - SKILL.md — 8 KB ## SKILL.md Reproducido tal cual desde vercel-labs/agent-browser bajo Apache-2.0. Esta sección es el documento original y está en inglés. # 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( fn: (sandbox: VercelSandboxSession) => Promise, ): Promise { 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, 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. ## Authentication On Vercel deployments, the Sandbox SDK authenticates automatically via OIDC. For local development or explicit control, set: ```bash VERCEL_TOKEN= VERCEL_TEAM_ID= VERCEL_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 | Variable | Required | Description | |---|---|---| | `AGENT_BROWSER_SNAPSHOT_ID` | No (but recommended) | Pre-built sandbox snapshot ID for sub-second startup (see above) | | `VERCEL_TOKEN` | No | Vercel personal access token (for local dev; OIDC is automatic on Vercel) | | `VERCEL_TEAM_ID` | No | Vercel team ID (for local dev) | | `VERCEL_PROJECT_ID` | No | Vercel project ID (for local dev) | ## Framework Examples The pattern works identically across frameworks. The only difference is where you put the server-side code: | Framework | Server code location | |---|---| | Next.js | Server actions, API routes, route handlers | | SvelteKit | `+page.server.ts`, `+server.ts` | | Nuxt | `server/api/`, `server/routes/` | | Remix | `loader`, `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. ## Dónde encaja - Categoría: [Automatización](https://skillsagentes.com/categorias/automatizacion.md) — Flujos de varios pasos que se ejecutan sin supervisión. - Creador: [vercel-labs](https://skillsagentes.com/creators/vercel-labs.md) — 20 skills en el directorio - [Todas las skills](https://skillsagentes.com/skills.md) - [Ranking de instalaciones](https://skillsagentes.com/ranking.md) ## Otras skills del mismo repositorio - [Core](https://skillsagentes.com/skills/vercel-labs/agent-browser/core.md): Guía central de uso de agent-browser: snapshots con refs, navegación, interacción con elementos, extracción de datos, screenshots, pestañas, formularios/auth, esperas, sesiones paralelas y solución de fallos. - [Agent Browser](https://skillsagentes.com/skills/vercel-labs/agent-browser/agent-browser.md): CLI de automatización de navegador para agentes de IA: navegar páginas, rellenar formularios, hacer clic, capturar pantallas, extraer datos, testear apps web o automatizar apps Electron y Slack. - [Webmcp Gen](https://skillsagentes.com/skills/vercel-labs/agent-browser/webmcp-gen.md): Crea y valida herramientas WebMCP experimentales para una página web existente, exponiendo flujos reales del sitio como herramientas de página frente a la automatización por árbol de accesibilidad.” - [Protected Vercel Deployments](https://skillsagentes.com/skills/vercel-labs/agent-browser/protected-vercel-deployments.md): Accede y prueba deployments de Vercel protegidos por Vercel Authentication, SSO o Deployment Protection con agent-browser, usando autenticación OIDC de Trusted Sources de corta duración en vez de un secreto de bypass estático. - [Derive Client](https://skillsagentes.com/skills/vercel-labs/agent-browser/derive-client.md): Reverse-engineerea la API interna de un sitio grabando el tráfico del navegador en un HAR, y genera un cliente o CLI standalone que llama a los endpoints sin necesitar navegador después. --- Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)