Communitygithub.com

vercel-labs/derive-client

Ingeniería inversa de la API interna de un sitio web mediante la grabación del tráfico del navegador en un archivo HAR, para luego generar un cliente o CLI independiente que llame a los endpoints directamente, sin necesidad de navegador tras la primera grabación.

¿Qué es derive-client?

Esta habilidad permite a un agente de IA (como Claude Code o Cursor) realizar ingeniería inversa de la API interna de cualquier sitio web. En lugar de depender de un navegador para cada interacción repetitiva, graba el tráfico de red una sola vez mientras el usuario navega por el sitio, y luego genera un cliente autónomo (script, CLI o biblioteca) que se comunica directamente con los endpoints de la API. Esto es especialmente útil para automatizar flujos en sitios que no tienen una API pública oficial. El flujo de trabajo incluye cinco pasos: grabar el tráfico con `agent-browser`, identificar los endpoints reales entre el ruido de analíticas y recursos estáticos, extraer las formas de las peticiones y respuestas junto con el material de autenticación (cookies, tokens), generar el cliente con una función por flujo y, finalmente, verificar que cada endpoint funcione correctamente. La habilidad soporta plataformas como Claude Code, Cursor y otros agentes que ejecuten herramientas de línea de comandos. El archivo HAR captura cuerpos de respuesta JSON/HTML/JS de forma predeterminada, lo que permite estudiar las formas de los endpoints incluso después de cerrar el navegador. Se incluyen advertencias sobre la naturaleza inestable de las API internas y la necesidad de tratar los archivos HAR como secretos.

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

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

Derivar un cliente de API a partir de una sesión grabada

Conducir un navegador es la herramienta adecuada para la primera visita y la herramienta equivocada para la centésima. Esta habilidad graba el tráfico de red de un sitio una vez mientras lo usas, y luego convierte las solicitudes capturadas en un cliente independiente (script, CLI o biblioteca) que se comunica directamente con la API interna del sitio.

La grabación por sí sola contiene todo lo necesario: agent-browser incrusta los cuerpos de respuesta de texto (JSON/HTML/JS) en el HAR de forma predeterminada, por lo que las formas de los endpoints se pueden estudiar sin conexión después de cerrar el navegador.

Flujo de trabajo

1. Grabar      Iniciar la captura HAR, realizar los flujos deseados en el cliente
2. Identificar  Encontrar los endpoints reales de la API entre el ruido
3. Extraer     Obtener las formas de las solicitudes, esquemas de respuesta y material de autenticación
4. Generar     Escribir el cliente, una función por flujo
5. Verificar   Llamar a cada endpoint realmente antes de declarar que está terminado

1. Grabar

agent-browser network har start          # incrusta cuerpos de respuesta de texto de forma predeterminada
# ... navegar por el sitio: buscar, abrir una página de detalle, paginar, etc. ...
agent-browser network har stop /tmp/site.har
  • Ejecuta cada flujo que el cliente deba soportar y ejecuta cada uno al menos dos veces con entradas diferentes (dos términos de búsqueda, dos páginas de detalle). Diferenciar las URLs grabadas revela qué partes son parámetros.
  • Si el sitio requiere inicio de sesión, inicia sesión antes de comenzar el HAR para que las credenciales no terminen en la grabación innecesariamente. Las cookies de sesión se exportan por separado en el paso 3.
  • --content all también incrusta cuerpos binarios (base64); --content none deshabilita la incrustación. El límite por cuerpo es de 2 MB.

Mientras la sesión aún está abierta, agent-browser network requests y network request <id> proporcionan los mismos datos de forma interactiva, pero solo el HAR sobrevive a la navegación y al cierre del navegador, por lo que es preferible para cualquier cosa que abarque varias páginas.

2. Identificar endpoints

Consulta el HAR con jq:

# Todas las llamadas JSON de la API: método, URL, estado
jq -r '.log.entries[]
  | select(.response.content.mimeType | test("json"))
  | "\(.request.method) \(.response.status) \(.request.url)"' /tmp/site.har

Ignora el ruido de analíticas e infraestructura: endpoints de telemetría (/collect, /track, /beacon, /log), dominios de terceros (google-analytics, segment, sentry, datadog, intercom, hotjar) y activos estáticos. La API real suele ser propia, JSON y se correlaciona con las acciones que realizaste.

3. Extraer formas y autenticación

# Detalle completo de un endpoint: encabezados de solicitud, cuerpo POST, cuerpo de respuesta
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
  • Esquema de respuesta: lee .response.content.text — es la carga útil real, úsala para derivar tipos.
  • Autenticación: compara los encabezados de solicitud entre endpoints. Busca authorization, cookie, x-csrf-token, x-api-key y encabezados x-* específicos del sitio. Replica solo los que importan: pruébalos omitiéndolos en el paso 5.
  • Cookies: exporta la sesión activa con agent-browser cookies get --json > cookies.json para que el cliente las cargue en tiempo de ejecución. Nunca codifiques valores de cookies en el código fuente generado.

4. Generar el cliente

  • Una función por flujo grabado (search(query), getItem(id)), tipada a partir de los cuerpos de respuesta observados.
  • El material de autenticación (cookies, tokens Bearer) se carga desde un archivo o variable de entorno, con un error claro que le indique al usuario que vuelva a iniciar sesión en el navegador cuando caduque.
  • Reproduce los encabezados que la API realmente requiere: algunos sitios devuelven 403 sin un user-agent, referer o x-requested-with coincidentes.
  • Mantén los parámetros de paginación, ordenación y filtro que aparecieron en las cadenas de consulta grabadas como opciones de función.

5. Verificar

Llama a cada función generada contra la API real y compara la forma de la respuesta con la grabación. Fallos comunes:

SíntomaCausaSolución
401/403Sesión caducada o faltanteVuelve a iniciar sesión mediante agent-browser, reexporta las cookies
403/419 en escriturasEl token CSRF es por sesión o por formularioObtén primero el endpoint del token o mantén ese flujo basado en el navegador
Funciona y luego fallaParámetros de solicitud firmados/con caducidadRecae en el navegador para ese paso; deriva el resto
Forma diferente al HARPruebas A/B o respuestas dependientes de la ubicaciónRegraba y trata la unión como campos opcionales

Advertencias

  • Las API internas no tienen versión y cambian sin previo aviso: conserva el HAR para poder rederivar el cliente.
  • Respeta los términos de servicio y límites de velocidad del sitio; añade demoras para la obtención masiva.
  • Los archivos HAR contienen credenciales de sesión activa (cookies, tokens, cuerpos POST). Trátalos como secretos: mantenlos fuera del control de versiones y elimínalos cuando hayas terminado.

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 relacionados