@vercel/next-browser
React DevTools and the Next.js dev overlay as shell commands — component
trees, props, hooks, PPR shells, errors, network, accessibility snapshots —
structured text that agents can parse and act on.
An LLM can't click through a DevTools panel, but it can run
next-browser snapshot, read the output, click e3, and keep going. Each
command is a stateless one-shot against a long-lived browser daemon, so an
agent loop can fire them off without managing browser lifecycle.
Getting started
As a skill (recommended) — from your Next.js repo:
npx skills add vercel-labs/next-browser
Works with Claude Code, Cursor, Cline, and others.
Start your agent in the project and type /next-browser to invoke the
skill. It installs the CLI and Chromium if needed, asks for your dev server
URL, and from there it's pair programming — tell it what you're debugging
and it drives the browser for you.
Manual install:
pnpm add -g @vercel/next-browser # or npm, yarn
playwright install chromium
Requires Node >= 20.
Commands
Browser lifecycle
| Command | Description |
|---|
open <url> [--cookies <file>] | Launch browser and navigate (with optional cookies) |
close | Close browser and kill daemon |
Navigation
| Command | Description |
|---|
goto <url> | Full-page navigation (new document load) |
ssr lock | Block external scripts on all navigations (SSR-only mode) |
ssr unlock | Re-enable external scripts |
push [path] | Client-side navigation (interactive picker if no path) |
back | Go back in history |
reload | Reload current page |
restart-server | Restart the Next.js dev server (clears caches) |
Inspection
| Command | Description |
|---|
tree | Full React component tree (hierarchy, IDs, keys) |
tree <id> | Inspect one component (props, hooks, state, source location) |
snapshot | Accessibility tree with [ref=eN] markers on interactive elements |
errors | Build and runtime errors for the current page |
logs | Recent dev server log output |
browser-logs | Browser console output (log, warn, error, info) |
network [idx] | List network requests, or inspect one (headers, body) |
screenshot [caption] [--full-page] | Viewport PNG to a temp file (caption shown in Screenshot Log) |
Interaction
| Command | Description |
|---|
click <ref|text|selector> | Click via real pointer events (works with Radix, Headless UI) |
fill <ref|selector> <value> | Fill a text input or textarea |
eval [ref] <script> | Run JS in page context (supports --file and stdin) |
viewport [WxH] | Show or set viewport size |
Performance & PPR
| Command | Description |
|---|
perf [url] | Core Web Vitals + React hydration timing in one pass |
renders start | Start recording React re-renders |
renders stop [--json] | Stop and print per-component render profile |
ppr lock | Freeze dynamic content to inspect the static shell |
ppr unlock | Resume dynamic content and print shell analysis |
Instrumentation
| Command | Description |
|---|
instrumentation set <path> | Inject script before page scripts on every navigation |
instrumentation clear | Remove instrumentation script |
Next.js MCP