Communitygithub.com

derivar-cliente

Engenharia reversa da API interna de um site gravando o tráfego do navegador em um arquivo HAR e gerando um cliente autônomo ou CLI que chama os endpoints diretamente, sem necessidade de navegador após a primeira gravação.

O que é derivar-cliente?

Esta skill permite que um agente de IA extraia a API interna de um site gravando o tráfego de rede durante uma sessão real no navegador e, em seguida, gere um cliente autônomo (script, CLI ou biblioteca) que chama esses endpoints diretamente, eliminando a necessidade de um navegador para operações repetitivas. É útil para cenários como 'derivar um cliente', 'criar uma CLI para um site', 'fazer engenharia reversa da API', 'gravar requisições de rede' ou 'transformar este site em uma API'. A skill suporta plataformas como Claude Code, Cursor e Codex, aproveitando ferramentas como `agent-browser` e `jq` para capturar, extrair e inspecionar o tráfego HAR. O fluxo de trabalho consiste em cinco etapas: gravar, identificar endpoints, extrair esquemas e autenticação, gerar o cliente e verificar sua funcionalidade contra a API ao vivo.

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

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Derivar um cliente de API a partir de uma sessão gravada

Dirigir um navegador é a ferramenta certa para a primeira visita e a ferramenta errada para a centésima. Esta skill grava o tráfego de rede de um site uma vez enquanto você o utiliza e, em seguida, transforma as requisições capturadas em um cliente autônomo (script, CLI ou biblioteca) que se comunica diretamente com a API interna do site.

A gravação sozinha contém tudo o que é necessário: o agent-browser incorpora corpos de resposta de texto (JSON/HTML/JS) no HAR por padrão, permitindo que os formatos dos endpoints sejam estudados offline após o navegador ser fechado.

Fluxo de Trabalho

1. Gravar      Iniciar a captura HAR, executar os fluxos desejados no cliente
2. Identificar  Encontrar os endpoints reais da API em meio ao ruído
3. Extrair     Extrair formatos de requisição, esquemas de resposta e material de autenticação
4. Gerar       Escrever o cliente, uma função por fluxo
5. Verificar   Chamar cada endpoint para validação antes de declarar concluído

1. Gravar

agent-browser network har start          # incorpora corpos de resposta de texto por padrão
# ... use o site: pesquise, abra uma página de detalhes, pagine, etc. ...
agent-browser network har stop /tmp/site.har
  • Execute todos os fluxos que o cliente deve suportar e execute cada um pelo menos duas vezes com entradas diferentes (dois termos de pesquisa, duas páginas de detalhes). Diferenciar as URLs gravadas revela quais partes são parâmetros.
  • Se o site exigir login, faça login antes de iniciar o HAR para que as credenciais não sejam gravadas desnecessariamente. Os cookies de sessão são exportados separadamente na etapa 3.
  • --content all também incorpora corpos binários (base64); --content none desabilita a incorporação. O limite por corpo é de 2 MB.

Enquanto a sessão ainda estiver ativa, agent-browser network requests e network request <id> fornecem os mesmos dados de forma interativa — mas apenas o HAR sobrevive à navegação e ao fechamento do navegador, portanto, prefira-o para qualquer coisa que envolva várias páginas.

2. Identificar endpoints

Consulte o HAR com jq:

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

Ignore telemetria e ruído de infraestrutura: endpoints de telemetria (/collect, /track, /beacon, /log), domínios de terceiros (google-analytics, segment, sentry, datadog, intercom, hotjar) e ativos estáticos. A API real geralmente é própria, JSON e correlacionada com as ações que você executou.

3. Extrair formatos e autenticação

# Detalhes completos para um endpoint: cabeçalhos da requisição, corpo POST, corpo da resposta
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 da resposta: leia .response.content.text — este é o payload real; use-o para derivar tipos.
  • Autenticação: compare os cabeçalhos das requisições entre os endpoints. Procure por authorization, cookie, x-csrf-token, x-api-key e cabeçalhos x-* específicos do site. Replique apenas os que são importantes — teste por omissão na etapa 5.
  • Cookies: exporte a sessão ativa com agent-browser cookies get --json > cookies.json para o cliente carregar em tempo de execução. Nunca codifique valores de cookie no código-fonte gerado.

4. Gerar o cliente

  • Uma função por fluxo gravado (search(query), getItem(id)), tipada a partir dos corpos de resposta observados.
  • O material de autenticação (cookies, tokens bearer) é carregado de um arquivo ou variável de ambiente, com um erro claro informando ao usuário para refazer o login no navegador quando expirar.
  • Reproduza os cabeçalhos que a API realmente exige — alguns sites retornam 403 sem um user-agent, referer ou x-requested-with correspondente.
  • Mantenha os parâmetros de paginação, ordenação e filtro que apareceram nas strings de consulta gravadas como opções de função.

5. Verificar

Chame cada função gerada contra a API ativa e compare o formato da resposta com a gravação. Falhas comuns:

SintomaCausaCorreção
401/403Sessão expirada ou ausenteRefazer login via agent-browser, reexportar cookies
403/419 em escritasToken CSRF é por sessão ou por formulárioBuscar o endpoint do token primeiro, ou manter esse fluxo baseado no navegador
Funciona e depois quebraParâmetros de requisição assinados/com expiraçãoRecorrer ao navegador para essa etapa; derivar o restante
Formato diferente do HARTestes A/B ou respostas dependentes de localizaçãoRegravar e tratar a união como campos opcionais

Advertências

  • APIs internas não têm versão e mudam sem aviso — mantenha o HAR para que o cliente possa ser rederivado.
  • Respeite os termos de serviço e limites de taxa do site; adicione atrasos para buscas em massa.
  • Arquivos HAR contêm credenciais de sessão ativas (cookies, tokens, corpos POST). Trate-os como segredos: mantenha-os fora do controle de versão e exclua-os quando terminar.

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.

Habilidades Relacionadas