# Derive Client

> Reverse-engineerea la API interna de un sitio grabando el tráfico del navegador en un HAR, y genera un cliente o CLI standalone que llama a los endpoints sin necesitar navegador después.

Fuente: https://skillsagentes.com/skills/vercel-labs/agent-browser/derive-client
Markdown: https://skillsagentes.com/skills/vercel-labs/agent-browser/derive-client.md

Repositorio: https://github.com/vercel-labs/agent-browser
Autor: vercel-labs
Licencia: Apache-2.0
Actualizado: hace 2 meses
Coste de contexto: 121 tok instalada, 1.3k tok al activarse, 1.3k tok con todos los archivos del bundle
Bundle: 1 archivo, 5 KB
Permisos que pide: bash(agent-browser:*), bash(npx agent-browser:*)

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add vercel-labs/agent-browser --skill derive-client --agent claude-code
# Cursor
npx -y skills add vercel-labs/agent-browser --skill derive-client --agent cursor
# Codex
npx -y skills add vercel-labs/agent-browser --skill derive-client --agent codex
# Gemini CLI
npx -y skills add vercel-labs/agent-browser --skill derive-client --agent gemini
# Windsurf
npx -y skills add vercel-labs/agent-browser --skill derive-client --agent windsurf
# Cline
npx -y skills add vercel-labs/agent-browser --skill derive-client --agent cline
```

## Qué hace

- Grabas el tráfico de red del navegador en un archivo HAR mientras usas un sitio
- Identifica los endpoints reales de API entre el ruido de analítica e infraestructura
- Extrae esquemas de request/response y material de autenticación del HAR
- Genera un cliente o CLI standalone con una función por flujo grabado
- Verifica cada endpoint generado contra la API real antes de terminar

## Cuándo usarla

- Te piden "derive a client", "build a CLI for <site>", "reverse engineer this site's API" o "record network requests"
- El mismo sitio se va a automatizar repetidamente y llamadas HTTP directas serían mejores que manejar el navegador cada vez

## Qué la activa

- "Deriva un cliente de API para este sitio a partir de una grabación HAR"
- "Construye una CLI para este sitio usando su API interna"
- "Convierte este sitio en una API reutilizable sin navegador"
- "Reverse-engineer la API interna de este sitio web"

## Antes de instalar

- Requiere agent-browser (vía Bash(agent-browser:*) o npx agent-browser) y jq para consultar el HAR generado.
- Necesita en el PATH: jq

## Archivos

- SKILL.md — 5 KB

## SKILL.md

Reproducido tal cual desde vercel-labs/agent-browser bajo Apache-2.0. Esta sección es el documento original y está en inglés.

# Derive an API client from a recorded session

Driving a browser is the right tool for the first visit and the wrong tool for the hundredth. This skill records a site's network traffic once while you use it, then turns the captured requests into a standalone client (script, CLI, or library) that talks to the site's internal API directly.

The recording alone contains everything needed: agent-browser embeds text response bodies (JSON/HTML/JS) in the HAR by default, so endpoint shapes can be studied offline after the browser is closed.

## Workflow

```
1. Record     Start HAR capture, drive the flows you want in the client
2. Identify   Find the real API endpoints among the noise
3. Extract    Pull request shapes, response schemas, and auth material
4. Generate   Write the client, one function per flow
5. Verify     Call every endpoint for real before declaring done
```

## 1. Record

```bash
agent-browser network har start          # embeds text response bodies by default
# ... drive the site: search, open a detail page, paginate, etc. ...
agent-browser network har stop /tmp/site.har
```

- Exercise **every flow the client should support**, and run each one at least twice with different inputs (two search terms, two detail pages). Diffing the recorded URLs reveals which parts are parameters.
- If the site needs login, log in **before** starting the HAR so credentials don't land in the recording unnecessarily. The session cookies are exported separately in step 3.
- `--content all` embeds binary bodies too (base64); `--content none` disables embedding. Per-body cap is 2 MB.

While the session is still open, `agent-browser network requests` and `network request <id>` give the same data interactively — but only the HAR survives navigation and browser close, so prefer it for anything multi-page.

## 2. Identify endpoints

Query the HAR with `jq`:

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

Ignore analytics and infrastructure noise: telemetry endpoints (`/collect`, `/track`, `/beacon`, `/log`), third-party domains (google-analytics, segment, sentry, datadog, intercom, hotjar), and static assets. The real API is usually first-party, JSON, and correlates with the actions you performed.

## 3. Extract shapes and auth

```bash
# Full detail for one endpoint: request headers, POST body, response body
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
```

- **Response schema**: read `.response.content.text` — this is the real payload, use it to derive types.
- **Auth**: compare request headers across endpoints. Look for `authorization`, `cookie`, `x-csrf-token`, `x-api-key`, and site-specific `x-*` headers. Replay only the ones that matter — test by omission in step 5.
- **Cookies**: export the live session with `agent-browser cookies get --json > cookies.json` for the client to load at runtime. Never hardcode cookie values into generated source.

## 4. Generate the client

- One function per recorded flow (`search(query)`, `getItem(id)`), typed from the observed response bodies.
- Auth material (cookies, bearer tokens) loads from a file or environment variable, with a clear error telling the user to re-run the browser login when it expires.
- Reproduce the headers the API actually requires — some sites 403 without a matching `user-agent`, `referer`, or `x-requested-with`.
- Keep pagination, sort, and filter parameters that appeared in the recorded query strings as function options.

## 5. Verify

Call every generated function against the live API and compare the response shape with the recording. Common failures:

| Symptom | Cause | Fix |
|---------|-------|-----|
| 401/403 | Expired or missing session | Re-login via agent-browser, re-export cookies |
| 403/419 on writes | CSRF token is per-session or per-form | Fetch the token endpoint first, or keep that flow browser-driven |
| Works then breaks | Signed/expiring request params | Fall back to the browser for that step; derive the rest |
| Different shape than HAR | A/B tests or geo-dependent responses | Re-record and treat the union as optional fields |

## Caveats

- Internal APIs are unversioned and change without notice — keep the HAR so the client can be re-derived.
- Respect the site's terms of service and rate limits; add delays for bulk fetching.
- HAR files contain live session credentials (cookies, tokens, POST bodies). Treat them like secrets: keep them out of version control and delete them when done.

## Dónde encaja

- Categoría: [Automatización](https://skillsagentes.com/categorias/automatizacion.md) — Flujos de varios pasos que se ejecutan sin supervisión.
- Creador: [vercel-labs](https://skillsagentes.com/creators/vercel-labs.md) — 20 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Core](https://skillsagentes.com/skills/vercel-labs/agent-browser/core.md): Guía central de uso de agent-browser: snapshots con refs, navegación, interacción con elementos, extracción de datos, screenshots, pestañas, formularios/auth, esperas, sesiones paralelas y solución de fallos.
- [Agent Browser](https://skillsagentes.com/skills/vercel-labs/agent-browser/agent-browser.md): CLI de automatización de navegador para agentes de IA: navegar páginas, rellenar formularios, hacer clic, capturar pantallas, extraer datos, testear apps web o automatizar apps Electron y Slack.
- [Webmcp Gen](https://skillsagentes.com/skills/vercel-labs/agent-browser/webmcp-gen.md): Crea y valida herramientas WebMCP experimentales para una página web existente, exponiendo flujos reales del sitio como herramientas de página frente a la automatización por árbol de accesibilidad.”
- [Protected Vercel Deployments](https://skillsagentes.com/skills/vercel-labs/agent-browser/protected-vercel-deployments.md): Accede y prueba deployments de Vercel protegidos por Vercel Authentication, SSO o Deployment Protection con agent-browser, usando autenticación OIDC de Trusted Sources de corta duración en vez de un secreto de bypass estático.
- [Vercel Sandbox](https://skillsagentes.com/skills/vercel-labs/agent-browser/vercel-sandbox.md): Ejecuta agent-browser + Chrome dentro de microVMs de Vercel Sandbox para automatización de navegador desde cualquier app desplegada en Vercel.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)