Vercel agent-browser: browserautomatisering via de CLI

Vercel's agent-browser is een CLI voor browserautomatisering voor agents die shellcommando's kunnen uitvoeren. Het commando snapshot -i geeft interactieve elementen met refs zoals @e1, die de agent daarna in een klikcommando kan gebruiken.

Met deze commando's en tekstuitvoer krijgt een agent compacte paginacontext zonder verbinding met een MCP-server. Of dat bij je past, hangt af van je client en taak. Vergelijk tokengebruik en doorlooptijd in je eigen workflow voordat je een gepubliceerde benchmark als algemene prestatiegarantie gebruikt.

De Context Window-Belasting

Browser automation via MCP kost tokens voordat het werk begint. Volgens community-benchmarks laadt Playwright MCP bij het starten van een sessie naar schatting ~13.700 tokens aan tool-definities in het context window van de agent, nog voor er ook maar één pagina bezocht is. Chrome DevTools MCP zit naar verluidt hoger met ~17.000 tokens, ruwweg 9% van een 200K context window.

Ook elke actie kost iets. In een test van Engin Diri bij Pulumi was één Playwright MCP klik-response 12.891 tekens lang. Dezelfde klik via agent-browser gaf zes tekens: Done. Paginacomplexiteit verandert de cijfers, maar het verschil blijft groot.

Over een langere workflow loopt het verschil op. Third-party benchmarks schatten de tokenkosten van een 10-staps automatiseringsflow over drie tools:

In deze schatting gebruikt agent-browser 94% minder tokens dan Playwright MCP voor dezelfde 10-staps flow. Dat laat veel meer van het context window over voor de taak zelf.

Hoe agent-browser Werkt

agent-browser heeft twee lagen. Een Rust CLI handelt argument-parsing af in minder dan een milliseconde. Daarachter draait een native Rust daemon die direct met Chrome communiceert via CDP (Chrome DevTools Protocol), zonder Node.js of Playwright. De daemon blijft warm draaien tussen commando's via Unix domain sockets, zodat de browser niet bij elk commando opnieuw start. Je kunt Chrome ook vervangen door Lightpanda, een headless browser geschreven in Zig die volgens eigen benchmarks ruwweg 10x snellere performance en 10x minder geheugengebruik claimt.

Het eerste commando in een sessie kost ongeveer 500ms om de daemon te starten en de browser te lanceren. Daarna draait elk commando in sub-100ms. Bij Playwright MCP vereist elke actie een volledige JSON-RPC round-trip met tool-schema's, parameters en uitgebreide response-objecten.

Snapshots en Refs: Hoe agent-browser Elementen Aanwijst

De kern van agent-browser is het snapshot + refs systeem. In plaats van CSS-selectors, XPath of volledige DOM-dumps vangt agent-browser de accessibility tree van de pagina op, filtert op interactieve elementen, en kent elk element een stabiele referentie toe.

button "Sign In" [ref=e1]
textbox "Email" [ref=e2]
textbox "Password" [ref=e3]
link "Forgot password?" [ref=e4]
link "Create account" [ref=e5]

Deze snapshot bevat vijf elementen en vijf refs. De agent zegt agent-browser click @e1 om op Sign In te klikken, of agent-browser fill @e2 "user@example.com" om een e-mailadres in te vullen. Daarvoor zijn geen CSS-selectors, pixelcoordinaten of vision model nodig om een screenshot te parsen. Refs worden opgelost door matching op accessibility role en name via CDP's Accessibility API, conceptueel dezelfde aanpak als Playwright's getByRole .

Ter vergelijking geeft Playwright MCP dit terug voor een vergelijkbare pagina:

- heading "Welcome back" [level=2]
  - paragraph: "Sign in to your account"
- form:
  - textbox "Email" [required] (ref=s1e4)
  - textbox "Password" [required] (ref=s1e5)
  - button "Sign in" (ref=s1e6)
- navigation:
  - link "Forgot password?" (ref=s1e7)
  - link "Create account" (ref=s1e8)
  - link "Terms of Service" (ref=s1e9)
  - link "Privacy Policy" (ref=s1e10)
  ... (gaat door voor hele pagina)

Playwright MCP geeft de volledige accessibility tree terug, met elke heading, paragraaf, landmark en decoratie op de pagina. De -i flag van agent-browser (interactive only) houdt alleen de elementen over waar je op kunt klikken, in kunt typen of die je aan of uit kunt zetten. In Engin Diri's tests was een homepage-snapshot ~280 tekens met agent-browser versus ~8.247 met Playwright MCP. De cijfers variëren met de paginacomplexiteit.

De Accessibility Tree, Opnieuw

Ons eerdere stuk over hoe AI agents je website zien beschrijft de basis. De accessibility tree is een door de browser gegenereerde gestructureerde weergave van je pagina: roles, names, states, descriptions. Voor agent-browser is de accessibility tree de interactie-interface waarmee refs worden gemaakt. Andere browseragents kunnen de DOM, accessibility tree en screenshots combineren.

In agent-browser is die koppeling direct. Het snapshot commando is een accessibility tree query. Wanneer een agent agent-browser snapshot -i aanroept, krijgt het dezelfde tree die schermlezers consumeren en die Playwright-tests queryen met getByRole . Het outputformaat is compacte tekst in plaats van YAML.

Voor website-eigenaren blijft het advies gelijk. Als je button een <div onclick> is in plaats van een <button>, verschijnt het niet in de snapshot. Als je formuliervelden geen labels hebben, ziet de agent textbox "" en heeft geen label dat zegt wat er ingevuld moet worden. Als je navigatie is opgebouwd met niet-semantische divs, bevat de snapshot geen links die de agent kan gebruiken. Dezelfde regels als eerder, nu met een tool met 22.000+ GitHub-sterren.

De annotated screenshot-functie toont dezelfde refs visueel. agent-browser screenshot --annotate legt genummerde labels over elk interactief element, waarbij elk label naar een ref verwijst. Zo werkt het als visuele debugger voor de accessibility tree. Een multimodaal model kan redeneren over layout en toch dezelfde refs gebruiken voor interactie.

Less Is More: Wat Vercel's D0-data Laat Zien

Het ontwerp van agent-browser lijkt op bevindingen uit Vercel's eigen D0 text-to-SQL agent-onderzoek. Beide projecten komen van Vercel en volgen hetzelfde idee: geef de agent minder tools. In D0 testte Vercel twee architecturen: een met 17 gespecialiseerde tools en een met 2 general-purpose tools.

De 17-tool versie had een slagingspercentage van 80%, deed er 274,8 seconden over en gebruikte ~102.000 tokens. De 2-tool versie had een slagingspercentage van 100%, deed er 77,4 seconden over en gebruikte ~61.000 tokens. Met minder tools verbeterden alle drie de metrieken.

Vercel's D0-team in eigen woorden: "We were constraining reasoning because we didn't trust the model to reason." Met 17 specifieke tools moest de agent bij elke stap de "juiste" kiezen. Met 2 flexibele tools zocht de agent zelf de aanpak uit. agent-browser past een vergelijkbaar idee toe op de browser door de output klein te houden.

Dit sluit aan bij wat Andrej Karpathy betoogde over CLI's als de ideale agent-interface . Een CLI werkt met flags, stdin en stdout, zonder tool schema-onderhandeling en zonder capability discovery. De agent voert een commando uit en leest de output. agent-browser past dit toe op de browser met 50+ commando's, elk gericht op één actie en met weinig output.

Wat Dit Betekent voor je Website

agent-browser documenteert integraties met Claude Code, Cursor, GitHub Copilot, OpenAI Codex, Google Gemini en andere agents die shell-commando's kunnen uitvoeren. Installatie kan met npm install -g agent-browser, zonder MCP-configuratie. Die compatibiliteitsopties meten niet hoeveel workflows de tool gebruiken en bewijzen niet dat browsen slaagt.

Dezelfde patronen die je site laten werken met Playwright MCP gelden hier: semantische HTML, correcte formulierlabels, accessible names op knoppen en links en een schone heading-hiërarchie. De feedbackloop is kort bij agent-browser. Wanneer een agent snapshot -i draait op je homepage en twee refs terugkrijgt in plaats van twaalf, zie je waar het probleem zit.

Onze scanner meet gerelateerde gepubliceerde signalen. Checkpoints in de Content & Semantics categorie gaan over semantische HTML, heading-hiërarchie, alt-tekst, ARIA-gebruik, formulierlabels en beschrijvende links. Deze overlappen met inputs voor accessibility-tree-snapshots, maar de statische checks voeren agent-browser niet uit en voorspellen niet of die de site kan navigeren. SSR-detectie is een apart signaal voor de vraag of fetch-only crawlers en non-rendered retrieval betekenisvolle initial HTML kunnen bereiken.

agent-browser wordt geleverd met een AGENTS.md-bestand en een skills/-directory die AI coding agents lezen om de commandoset te leren. Het ondersteunt ook multi-session isolatie met aparte sockets, cookies en ref-caches per sessie, zodat agents parallel kunnen werken zonder elkaar te storen. Met meerdere releases per dag en honderden open issues verandert het project snel.

Bronnen

• vercel-labs/agent-browser op GitHub (22.000+ sterren, Apache-2.0, Rust CLI voor AI browser automation)
• agent-browser.dev: Officiële Documentatie (commando's, architectuur en engine-ondersteuning voor Chrome en Lightpanda)
• Why agent-browser Is Winning the Token Efficiency War (DEV Community) (benchmarkvergelijking van het tokenverbruik over een 10-staps flow)
• Self-Verifying AI Agents: agent-browser in Practice (Pulumi) (tokenvergelijking: 12.891 tekens voor Playwright MCP tegenover 6 tekens voor agent-browser per klik)
• DeepWiki: agent-browser Architectuuranalyse (native Rust daemon, snapshot + refs systeem, ref-resolutie via CDP)
• We Removed 80% of Our Agent's Tools (Vercel) (D0-onderzoek: 17 tools met 80% succes tegenover 2 tools met 100% succes)
• IsAgentReady: Hoe AI Agents je Website Zien (De Accessibility Tree Uitgelegd)
• IsAgentReady: Playwright: Van Testrunner naar AI Agent-Interface
• IsAgentReady: Build for Agents: Waarom CLI's het Nieuwe Distributiekanaal Zijn