derive-client

작성자: vercel

웹사이트의 내부 API를 리버스 엔지니어링하여 브라우저 트래픽을 HAR 파일로 기록한 다음, 엔드포인트를 호출하는 독립형 클라이언트 또는 CLI를 생성합니다…

npx skills add https://github.com/vercel-labs/agent-browser --skill derive-client

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

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:

# 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

# 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:

SymptomCauseFix
401/403Expired or missing sessionRe-login via agent-browser, re-export cookies
403/419 on writesCSRF token is per-session or per-formFetch the token endpoint first, or keep that flow browser-driven
Works then breaksSigned/expiring request paramsFall back to the browser for that step; derive the rest
Different shape than HARA/B tests or geo-dependent responsesRe-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.

vercel의 다른 스킬

vercel
vercel
로컬 개발 및 테스트를 위한 Vercel REST API 에뮬레이션입니다. 사용자가 로컬에서 Vercel API 엔드포인트와 상호작용하거나 Vercel 통합을 테스트해야 할 때 사용합니다.
cron-jobs
vercel
Vercel Cron Jobs 구성 및 모범 사례. vercel.json에서 예약된 작업을 추가, 편집 또는 디버깅할 때 사용합니다.
codegen
vercel
json-render을 위한 코드 생성 유틸리티입니다. UI 명세서에서 코드를 생성하거나, 사용자 정의 코드 내보내기를 구축하거나, 명세서를 탐색하거나, props를 직렬화할 때 사용합니다.
next-best-practice
vercel
Next.js 모범 사례 - 파일 규칙, RSC 경계, 데이터 패턴, 비동기 API, 메타데이터, 오류 처리, 라우트 핸들러, 이미지/폰트 최적화,…
benchmark-sandbox
vercel
Vercel Sandbox에서 vercel-plugin eval 시나리오를 로컬 WezTerm 패널 대신 실행합니다. Claude Code와 플러그인이 사전 설치된 임시 마이크로VM을 프로비저닝합니다.
write-guide
vercel
점진적인 예제를 통해 실제 사용 사례를 가르치는 기술 가이드를 제작합니다. 개념은 독자가 필요로 할 때만 소개됩니다.
benchmark-testing
vercel
벤치마크 테스트 프로젝트를 생성하고 실행하여 실제 시나리오에서 vercel-plugin 스킬 인젝션을 테스트합니다. 격리된 디렉토리를 설정하고, 설치하며…
ai-gateway
vercel
Vercel AI Gateway 전문가 안내. 모델 라우팅, 제공업체 장애 조치, 비용 추적 또는 통합된 방식을 통해 여러 AI 제공업체를 관리할 때 사용합니다.