Communitygithub.com

vercel-labs/derive-client

Extrahiere die interne API einer Website, indem du den Browserverkehr in eine HAR-Datei aufzeichnest, und generiere einen eigenständigen Client oder eine CLI, die die Endpunkte direkt aufruft – ohne Browser nach der ersten Aufzeichnung.

Was ist derive-client?

Diese Fähigkeit erstellt aus einer aufgezeichneten Browsersitzung einen eigenständigen API-Client (Skript, CLI oder Bibliothek) für die interne API einer Website. Anstatt bei jeder Nutzung den Browser zu starten, wird der Netzwerkverkehr einmal aufgezeichnet und daraus werden die echten API-Endpunkte extrahiert – inklusive Authentifizierung, Anforderungs- und Antwortschemata. Der generierte Client kann dann wiederholt und automatisiert verwendet werden, ohne den Browser erneut zu öffnen. Der Workflow umfasst fünf Schritte: Aufzeichnen der HAR-Datei, Identifizieren der relevanten Endpunkte, Extrahieren von Formaten und Authentifizierungsmaterial, Generieren des Clients (eine Funktion pro Workflow) und Verifizieren gegen die Live-API. Die Fähigkeit ist für agent-browser optimiert und wird eingesetzt, wenn ein Nutzer sagt: „Leite einen Client ab“, „Baue eine CLI für eine Site“, „Zeichne Netzwerkanfragen auf“ oder „Mache aus dieser Site eine API“.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vercel-labs/agent-browser/tree/main/skill-data/derive-client

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Leite einen API-Client aus einer aufgezeichneten Sitzung ab

Einen Browser zu steuern ist das richtige Werkzeug für den ersten Besuch und das falsche für den hundertsten. Diese Fähigkeit zeichnet den Netzwerkverkehr einer Seite einmal auf, während du sie nutzt, und wandelt die erfassten Anfragen dann in einen eigenständigen Client (Skript, CLI oder Bibliothek) um, der direkt mit der internen API der Seite kommuniziert.

Die Aufzeichnung allein enthält bereits alles Notwendige: agent-browser bettet standardmäßig Textantwortkörper (JSON/HTML/JS) in die HAR-Datei ein, sodass die Endpunktstrukturen auch nach dem Schließen des Browsers offline untersucht werden können.

Ablauf

1. Aufzeichnen    HAR-Aufzeichnung starten, die gewünschten Abläufe im Client durchführen
2. Identifizieren Die echten API-Endpunkte aus dem Rauschen herausfiltern
3. Extrahieren    Anfrageformen, Antwortschemata und Authentifizierungsmaterial extrahieren
4. Generieren     Den Client schreiben, eine Funktion pro Ablauf
5. Verifizieren   Jeden Endpunkt wirklich aufrufen, bevor die Fertigstellung erklärt wird

1. Aufzeichnen

agent-browser network har start          # bettet standardmäßig Textantwortkörper ein
# ... die Seite bedienen: suchen, Detailseite öffnen, paginieren usw. ...
agent-browser network har stop /tmp/site.har
  • Führe jeden Ablauf aus, den der Client unterstützen soll, und führe jeden mindestens zweimal mit unterschiedlichen Eingaben durch (z. B. zwei Suchbegriffe, zwei Detailseiten). Der Vergleich der aufgezeichneten URLs zeigt, welche Teile Parameter sind.
  • Wenn die Seite eine Anmeldung erfordert, melde dich vor dem Start der HAR-Aufzeichnung an, damit Anmeldeinformationen nicht unnötig in der Aufzeichnung landen. Die Sitzungscookies werden in Schritt 3 separat exportiert.
  • --content all bettet auch Binärkörper ein (base64); --content none deaktiviert die Einbettung. Die Obergrenze pro Körper beträgt 2 MB.

Solange die Sitzung noch geöffnet ist, liefern agent-browser network requests und network request <id> interaktiv dieselben Daten – aber nur die HAR-Datei überlebt Navigation und das Schließen des Browsers. Daher ist sie für alles, was mehrere Seiten umfasst, vorzuziehen.

2. Endpunkte identifizieren

Durchsuche die HAR-Datei mit jq:

# Alle JSON-API-Aufrufe: Methode, URL, Status
jq -r '.log.entries[]
  | select(.response.content.mimeType | test("json"))
  | "\(.request.method) \(.response.status) \(.request.url)"' /tmp/site.har

Ignoriere Analyse- und Infrastruktur-Rauschen: Telemetrie-Endpunkte (/collect, /track, /beacon, /log), Drittanbieter-Domains (google-analytics, segment, sentry, datadog, intercom, hotjar) und statische Assets. Die echte API ist meist First-Party, JSON-basiert und korreliert mit den von dir durchgeführten Aktionen.

3. Formate und Authentifizierung extrahieren

# Volle Details für einen Endpunkt: Anfrage-Header, POST-Körper, Antwortkörper
jq '.log.entries[] | select(.request.url | test("api/search"))
  | {request: {method: .request.method, headers: .request.headers,
     postData: .request.postData.text},
     response: .response.content.text}' /tmp/site.har
  • Antwortschema: Lese .response.content.text – dies ist die tatsächliche Nutzlast, verwende sie, um Typen abzuleiten.
  • Authentifizierung: Vergleiche die Anfrage-Header über Endpunkte hinweg. Suche nach authorization, cookie, x-csrf-token, x-api-key und seiten-spezifischen x-*-Headern. Gib nur die relevanten weiter – teste durch Weglassen in Schritt 5.
  • Cookies: Exportiere die Live-Sitzung mit agent-browser cookies get --json > cookies.json, damit der Client sie zur Laufzeit laden kann. Hartcodiere Cookie-Werte niemals in generierten Quellcode.

4. Den Client generieren

  • Eine Funktion pro aufgezeichnetem Ablauf (search(query), getItem(id)), typisiert anhand der beobachteten Antwortkörper.
  • Authentifizierungsmaterial (Cookies, Bearer-Tokens) wird aus einer Datei oder Umgebungsvariable geladen, mit einer klaren Fehlermeldung, die den Benutzer auffordert, die Browser-Anmeldung erneut durchzuführen, wenn es abläuft.
  • Gib die Header wieder, die die API tatsächlich benötigt – einige Websites geben 403 ohne passenden user-agent, referer oder x-requested-with.
  • Behalte Paginierungs-, Sortier- und Filterparameter, die in den aufgezeichneten Query-Strings aufgetaucht sind, als Funktionsoptionen bei.

5. Verifizieren

Rufe jede generierte Funktion gegen die Live-API auf und vergleiche die Antwortstruktur mit der Aufzeichnung. Häufige Fehler:

SymptomUrsacheBehebung
401/403Abgelaufene oder fehlende SitzungErneute Anmeldung über agent-browser, erneuter Export der Cookies
403/419 bei SchreibzugriffenCSRF-Token ist sitzungs- oder formularspezifischZuerst den Token-Endpunkt abrufen oder diesen Ablauf browser-gesteuert lassen
Funktioniert, dann bricht esSignierte/ablaufende AnfrageparameterFür diesen Schritt auf den Browser zurückfallen; den Rest ableiten
Andere Struktur als HARA/B-Tests oder geospezifische AntwortenNeu aufzeichnen und die Vereinigung als optionale Felder behandeln

Einschränkungen

  • Interne APIs sind unversioniert und ändern sich ohne Vorankündigung – behalte die HAR-Datei, damit der Client neu abgeleitet werden kann.
  • Beachte die Nutzungsbedingungen der Website und Rate-Limits; füge Verzögerungen für Massenabrufe ein.
  • HAR-Dateien enthalten Live-Sitzungsanmeldeinformationen (Cookies, Tokens, POST-Körper). Behandle sie wie Geheimnisse: halte sie aus der Versionskontrolle heraus und lösche sie, wenn du fertig bist.

Individual skills in this repo

This repo contains 8 individual skills — each has its own dedicated page.

agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to

vercel-labs/agentcore

Run agent-browser on AWS Bedrock AgentCore cloud browsers. Use when the user wants to use AgentCore, run browser automation on AWS, use a cloud browser with AWS credentials, or needs a managed browser session backed by AWS infrastructure. Triggers include "use agentcore", "run on AWS", "cloud browser with AWS", "bedrock browser", "agentcore session", or any task requiring AWS-hosted browser automation.

vercel-labs/dogfood

Systematically explore and test a web application to find bugs, UX issues, and other problems. Use when asked to "dogfood", "QA", "exploratory test", "find issues", "bug hunt", "test this app/site/platform", or review the quality of a web application. Produces a structured report with full reproduction evidence -- step-by-step screenshots, repro videos, and detailed repro steps for every issue -- so findings can be handed directly to the responsible teams.

vercel-labs/electron

Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a native app, or test an Electron application. Triggers include "automate Slack app", "control VS Code", "interact with Discord app", "test this Electron app", "connect to desktop app", or any task requiring automation of a native Electron application.

vercel-labs/protected-vercel-deployments

Access and test Vercel deployments protected by Vercel Authentication, SSO, or Deployment Protection with agent-browser. Use when a preview or production URL redirects to a Vercel login page, returns a protection 401 or 403, or needs short-lived Trusted Sources OIDC authentication instead of a static bypass secret or public exception.

vercel-labs/slack

Interact with Slack workspaces using browser automation. Use when the user needs to check unread channels, navigate Slack, send messages, extract data, find information, search conversations, or automate any Slack task. Triggers include "check my Slack", "what channels have unreads", "send a message to", "search Slack for", "extract from Slack", "find who said", or any task requiring programmatic Slack interaction.

vercel-labs/vercel-sandbox

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.

vercel-labs/webmcp-gen

Build and validate experimental WebMCP tools for an existing web page. Use when an agent needs to expose a site's real workflows as page tools, create webmcp.init.js, define deterministic checks, or compare WebMCP with accessibility-tree automation.

Verwandte Skills