Communitygithub.com

vercel-labs/dériver-client

Rétro-ingénierie de l'API interne d'un site web en enregistrant le trafic navigateur dans un fichier HAR, puis en générant un client ou CLI autonome qui appelle les endpoints directement, sans navigateur après le premier enregistrement.

Qu'est-ce que dériver-client ?

Cette compétence permet de transformer une session de navigation enregistrée (fichier HAR) en un client API autonome (script, CLI, bibliothèque) pour interagir directement avec l'API interne d'un site web. Elle est particulièrement utile lorsqu'on vous demande de 'dériver un client', 'construire un CLI pour <site>', 'rétro-ingénierer l'API de ce site', 'enregistrer des requêtes réseau', 'transformer ce site en API', ou lorsque le même site sera automatisé de manière répétée et que des appels HTTP directs seraient plus efficaces que de lancer le navigateur à chaque fois. La compétence prend en charge l'outil agent-browser sous forme d'interface en ligne de commande. Elle suit un processus en cinq étapes : enregistrer le trafic, identifier les endpoints API, extraire les paramètres des requêtes et les schémas de réponse, générer le client, et vérifier chaque endpoint. Elle inclut des mises en garde importantes sur la gestion des secrets (cookies, jetons) et le respect des conditions d'utilisation du site.

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

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Dériver un client API à partir d'une session enregistrée

Lancer un navigateur est le bon outil pour la première visite, mais le mauvais outil pour la centième. Cette compétence enregistre le trafic réseau d'un site une fois pendant que vous l'utilisez, puis transforme les requêtes capturées en un client autonome (script, CLI ou bibliothèque) qui communique directement avec l'API interne du site.

L'enregistrement seul contient tout le nécessaire : agent-browser intègre les corps de réponse texte (JSON/HTML/JS) dans le HAR par défaut, ce qui permet d'étudier la forme des endpoints hors ligne après la fermeture du navigateur.

Flux de travail

1. Enregistrer    Démarrer la capture HAR, parcourir les flux souhaités dans le client
2. Identifier     Trouver les vrais endpoints API parmi le bruit
3. Extraire       Extraire les paramètres de requête, schémas de réponse, et éléments d'authentification
4. Générer        Écrire le client, une fonction par flux
5. Vérifier       Appeler chaque endpoint en réel avant de déclarer terminé

1. Enregistrer

agent-browser network har start          # intègre les corps de réponse texte par défaut
# ... parcourir le site : rechercher, ouvrir une page détail, paginer, etc. ...
agent-browser network har stop /tmp/site.har
  • Exécutez chaque flux que le client doit supporter, et exécutez chacun au moins deux fois avec des entrées différentes (deux termes de recherche, deux pages détail). La comparaison des URL enregistrées révèle quelles parties sont des paramètres.
  • Si le site nécessite une connexion, connectez-vous avant de démarrer le HAR afin que les identifiants ne soient pas inclus inutilement dans l'enregistrement. Les cookies de session sont exportés séparément à l'étape 3.
  • --content all intègre également les corps binaires (base64) ; --content none désactive l'incorporation. La limite par corps est de 2 Mo.

Tant que la session est ouverte, agent-browser network requests et network request <id> fournissent les mêmes données de manière interactive — mais seul le HAR survit à la navigation et à la fermeture du navigateur, donc préférez-le pour tout ce qui est multi-page.

2. Identifier les endpoints

Interrogez le HAR avec jq :

# Tous les appels API JSON : méthode, URL, statut
jq -r '.log.entries[]
  | select(.response.content.mimeType | test("json"))
  | "\(.request.method) \(.response.status) \(.request.url)"' /tmp/site.har

Ignorez le bruit d'analyse et d'infrastructure : endpoints de télémétrie (/collect, /track, /beacon, /log), domaines tiers (google-analytics, segment, sentry, datadog, intercom, hotjar), et ressources statiques. La vraie API est généralement first-party, JSON, et corrélée avec les actions que vous avez effectuées.

3. Extraire les paramètres et l'authentification

# Détail complet pour un endpoint : en-têtes de requête, corps POST, corps de réponse
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
  • Schéma de réponse : lisez .response.content.text — c'est la charge utile réelle, utilisez-la pour dériver les types.
  • Authentification : comparez les en-têtes de requête entre les endpoints. Cherchez authorization, cookie, x-csrf-token, x-api-key, et les en-têtes x-* spécifiques au site. Ne rejouez que ceux qui comptent — testez par omission à l'étape 5.
  • Cookies : exportez la session active avec agent-browser cookies get --json > cookies.json pour que le client les charge au moment de l'exécution. N'écrivez jamais en dur des valeurs de cookies dans le code source généré.

4. Générer le client

  • Une fonction par flux enregistré (rechercher(terme), obtenirArticle(id)), typée à partir des corps de réponse observés.
  • Les éléments d'authentification (cookies, jetons porteur) se chargent à partir d'un fichier ou d'une variable d'environnement, avec une erreur claire invitant l'utilisateur à relancer la connexion navigateur lorsqu'ils expirent.
  • Reproduisez les en-têtes que l'API requiert réellement — certains sites renvoient une erreur 403 sans un user-agent, referer ou x-requested-with correspondant.
  • Conservez les paramètres de pagination, tri et filtre qui sont apparus dans les chaînes de requête enregistrées comme options de fonction.

5. Vérifier

Appelez chaque fonction générée contre l'API réelle et comparez la forme de la réponse avec l'enregistrement. Problèmes courants :

SymptômeCauseCorrection
401/403Session expirée ou manquanteReconnectez-vous via agent-browser, réexportez les cookies
403/419 sur les écrituresLe jeton CSRF est par session ou par formulaireRécupérez d'abord l'endpoint du jeton, ou gardez ce flux avec navigateur
Fonctionne puis se casseParamètres de requête signés/expirantsRevenez au navigateur pour cette étape ; dérivez le reste
Forme différente du HARTests A/B ou réponses dépendant de la géolocalisationRéenregistrez et traitez l'union comme des champs optionnels

Mises en garde

  • Les API internes ne sont pas versionnées et changent sans préavis — gardez le HAR pour pouvoir redériver le client.
  • Respectez les conditions d'utilisation du site et les limites de débit ; ajoutez des délais pour les récupérations en masse.
  • Les fichiers HAR contiennent des identifiants de session en direct (cookies, jetons, corps POST). Traitez-les comme des secrets : ne les mettez pas dans le contrôle de version et supprimez-les une fois terminé.

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.

Skills associés