Gli agenti AI stanno diventando sempre più capaci di eseguire task complessi, ma c'era un problema: l'automazione browser. Vercel ha risolto questo problema con Agent Browser, un CLI che permette agli agenti AI di controllare il browser con un consumo di token ridotto fino al 93%.
Se hai mai provato a usare Playwright MCP con Claude Code o Cursor, sai quanto può essere frustrante. Ogni screenshot consuma oltre 15.000 token, e puoi esaurire la tua quota in poche operazioni. Agent Browser cambia completamente le regole del gioco.
Cos'è Vercel Agent Browser
Agent Browser è un tool CLI open source progettato specificamente per gli agenti AI. A differenza di Playwright che restituisce DOM completi e screenshot pesanti, Agent Browser usa un sistema di riferimenti (@e1, @e2) per identificare gli elementi interattivi, riducendo drasticamente il contesto necessario.
L'architettura è a tre livelli: un CLI velocissimo scritto in Rust per la gestione dei comandi, un daemon Node.js per il ciclo di vita del browser tramite Playwright, e un fallback Node.js quando i binari nativi non sono disponibili. Questo ti dà le performance di Rust con la compatibilità dell'ecosistema Node.
Installazione e Setup
L'installazione è incredibilmente semplice. Bastano due comandi per essere operativi:
npm install -g agent-browseragent-browser install
Il secondo comando scarica automaticamente Chromium. Non serve configurare driver, path o dipendenze. Sei pronto a partire.
Se preferisci installare da sorgente per contribuire al progetto:
git clone https://github.com/vercel-labs/agent-browsercd agent-browserpnpm install && pnpm buildpnpm build:nativepnpm link --global
Il Workflow di Base
Il flusso tipico di lavoro con Agent Browser è estremamente lineare e pensato per gli LLM:
Navigazione: agent-browser open example.com apre la pagina target.
Snapshot: agent-browser snapshot -i restituisce solo gli elementi interattivi con riferimenti. Invece di ricevere migliaia di righe di HTML, ottieni qualcosa come: @e1 button "Submit", @e2 input type="email".
Azione: agent-browser click @e1 o agent-browser fill @e2 "test@example.com" esegue l'azione usando il riferimento.
Chiusura: agent-browser close termina la sessione.
Questo workflow riduce enormemente il consumo di token perché l'AI non deve processare tutto il DOM, ma solo i riferimenti essenziali.
Comandi Essenziali
Ecco i comandi che userai più spesso quando integri Agent Browser con il tuo agente AI.
Navigazione
agent-browser open url naviga verso un URL. agent-browser back e agent-browser forward gestiscono la cronologia. agent-browser reload ricarica la pagina corrente.
Interazione
agent-browser click @ref clicca un elemento. agent-browser dblclick @ref fa doppio click. agent-browser fill @ref "testo" pulisce il campo e inserisce il testo. agent-browser type @ref "testo" digita senza pulire. agent-browser press Enter preme un tasto. agent-browser hover @ref porta il mouse sull'elemento.
Snapshot e Dati
agent-browser snapshot -i restituisce solo elementi interattivi (consigliato). agent-browser snapshot -c output compatto. agent-browser snapshot -d 3 limita la profondità. agent-browser get text @ref estrae il testo. agent-browser get attr @ref href legge un attributo.
Screenshot e Recording
agent-browser screenshot output.png cattura la schermata. agent-browser record start demo.webm inizia una registrazione video. agent-browser record stop salva il video.
Confronto con Playwright MCP
I numeri parlano chiaro. Un test condotto su sei scenari tipici (caricamento homepage, shortening URL, visualizzazione dashboard, navigazione analytics, overview e filtri data) ha mostrato risultati impressionanti.
Playwright MCP ha consumato oltre 15.000 token per singolo screenshot. L'albero di accessibilità completo aggiunge migliaia di token per ogni elemento della pagina. Gli utenti hanno riportato di esaurire l'allocazione di cinque ore in pochi step di automazione.
Agent Browser riduce il consumo fino al 93% grazie al sistema di riferimenti compatti. L'output include solo gli elementi interattivi necessari, non l'intero DOM con tutte le proprietà.
Integrazione con Claude Code
Per usare Agent Browser con Claude Code e Vercel Skills, puoi installare la skill dedicata:
mkdir -p .claude/skills/agent-browsercurl -o .claude/skills/agent-browser/SKILL.md https://raw.githubusercontent.com/vercel-labs/agent-browser/main/skills/agent-browser/SKILL.md
Una volta installata, Claude Code saprà automaticamente quando e come usare agent-browser per le automazioni web. Questo si integra perfettamente con il Vercel Sandbox per ambienti isolati.
Uso Cloud con Browserbase
Per ambienti serverless o CI/CD dove non puoi avere un browser locale, Agent Browser supporta nativamente Browserbase e Browser Use.
Configura le variabili d'ambiente:
export BROWSERBASE_API_KEY="your-api-key"export BROWSERBASE_PROJECT_ID="your-project-id"
Quando entrambe sono impostate, agent-browser si connette automaticamente a una sessione Browserbase invece di lanciare un browser locale. Tutti i comandi funzionano identicamente.
SDK Node.js Programmatico
Per casi d'uso avanzati, puoi usare Agent Browser come libreria JavaScript. Ecco come implementare uno screencast con iniezione di eventi:
Importi BrowserManager da agent-browser, lanci il browser in modalità headless, navighi verso l'URL desiderato. Puoi avviare uno screencast che ti restituisce frame base64 con metadati sulla viewport. L'iniezione di eventi mouse e keyboard ti permette controllo granulare.
Il daemon si avvia automaticamente al primo comando e persiste tra le chiamate successive per operazioni veloci.
Casi d'Uso Pratici
L'automazione browser per agenti AI trova applicazione in scenari sempre più comuni nello sviluppo web moderno.
Self-Verifying Agents
Un agente AI costruisce un componente frontend, poi usa agent-browser per verificare che funzioni. Apre il browser, testa l'interazione, conferma che il comportamento sia quello atteso. Se qualcosa non va, corregge e ritesta. Il ciclo di validazione avviene senza intervento umano.
Web Scraping Intelligente
Invece di scrivere selector CSS fragili, l'AI usa snapshot per capire la struttura della pagina ed estrarre dati usando i riferimenti semantici. Si adatta automaticamente a cambiamenti del layout.
Testing E2E Automatizzato
Dopo ogni deploy, l'agente esegue una suite di test usando agent-browser. I risultati vengono analizzati e riportati in linguaggio naturale.
Leggi anche
- Come Installare Vercel Skills: Guida Pratica con Esempi
- GitHub Copilot CLI e SDK: Guida Completa 2026
- Antigravity + Open Code: Il Workflow AI Definitivo
- Vercel Sandbox e Filesystem Snapshots: Guida Completa
Conclusione
Vercel Agent Browser risolve uno dei problemi più frustranti dell'AI coding: l'automazione browser efficiente. Riduce il consumo di token del 93%, si installa in due comandi, e si integra nativamente con Claude Code, Cursor e altri agenti.
Se stai costruendo agenti AI che devono interagire con il web, Agent Browser è lo strumento che aspettavi. È open source, attivamente mantenuto, e progettato da chi conosce bene le esigenze degli sviluppatori.
Hai bisogno di implementare automazioni AI nel tuo progetto? Contattami per una consulenza personalizzata.
