New to Claude Skills? Learn how to install them →

vercel-labs on GitHub

Derive Client

OfficialFree

Create API clients from recorded browser sessions.

Get this skill

Free · Opens the source repo

What Derive Client does

Derive Client is a powerful tool designed for developers and designers who need to reverse-engineer a website's internal API. By recording network traffic through a browser and generating a standalone client, this skill allows users to bypass the browser for subsequent interactions, streamlining automation and improving efficiency. The process begins with capturing a site's network traffic into a HAR file, which contains all necessary data, including response bodies. This enables users to analyze API endpoints offline, ensuring they can create a functional client without needing to revisit the website multiple times.

The workflow is straightforward and consists of five key steps: recording the traffic, identifying the relevant API endpoints, extracting request shapes and authentication details, generating the client, and verifying its functionality. During the recording phase, users drive the site to capture all flows they want the client to support. Once the HAR file is created, users can filter through the data to pinpoint the actual API calls, ignoring irrelevant traffic such as analytics or third-party requests. This precise identification is crucial for building an effective client.

After extracting the necessary information, the skill generates a client that includes one function for each recorded flow, ensuring that the client is tailored to the specific needs of the project. This includes handling authentication seamlessly by loading session credentials from a secure location. Finally, users can verify the generated client by calling each endpoint against the live API, ensuring that the responses match the expected shapes. This verification step is essential for catching potential issues early in the development process.

Derive Client is ideal for developers looking to automate interactions with websites that lack official APIs or for those who need to frequently interact with existing APIs without the overhead of a browser. However, users should be mindful of the site's terms of service and the potential for internal APIs to change without notice, necessitating periodic re-recording of the HAR file.

When to use it

Use this skill when you need to derive an API client from a website's internal API for automation purposes.

When not to use it

Avoid using this skill for sites with strict API usage policies or when the API is well-documented and stable.

What you can build with it

Automating Data Retrieval

Use Derive Client to automate the retrieval of data from a web application that lacks an official API, allowing for efficient data processing.

Building Custom Integrations

Leverage this skill to create custom integrations with third-party services by deriving clients from their web interfaces.

Testing and Development

Utilize the generated client in testing environments to simulate API interactions without the need for a browser.

How to install Derive Client

View source

1. Install with the skills CLI

npx skills add vercel-labs/agent-browser/derive-client --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by vercel-labs

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.

Frequently asked questions about Derive Client

Similar skills