OpenCLI Adapter Author
jackwener/OpenCLI
Walks through writing an OpenCLI adapter for a new site or a new command on an existing one, from first recon and field decoding to coding and verification.
Official agent skill
Derive API Client from Browser Traffic
Records a site's browser traffic into a HAR file, then builds a standalone client or CLI that calls its internal endpoints directly with no browser.
Install Derive API Client from Browser Traffic
$ npx skills add vercel-labs/agent-browser --skill derive-client -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install vercel-labs/agent-browser derive-client --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/vercel-labs/agent-browser.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skill-data/derive-client .claude/skills/derive-client && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "derive-client" agent skill from https://github.com/vercel-labs/agent-browser/tree/main/skill-data/derive-client into .claude/skills/derive-client/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "derive-client", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/vercel-labs/agent-browser/tree/main/skill-data/derive-clientType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add vercel-labs/agent-browser --skill derive-client -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install vercel-labs/agent-browser derive-client --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vercel-labs/agent-browser.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skill-data/derive-client .agents/skills/derive-client && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "derive-client" agent skill from https://github.com/vercel-labs/agent-browser/tree/main/skill-data/derive-client into .agents/skills/derive-client/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "derive-client", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add vercel-labs/agent-browser --skill derive-client -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install vercel-labs/agent-browser derive-client --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vercel-labs/agent-browser.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skill-data/derive-client .cursor/skills/derive-client && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "derive-client" agent skill from https://github.com/vercel-labs/agent-browser/tree/main/skill-data/derive-client into .cursor/skills/derive-client/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "derive-client", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/vercel-labs/agent-browser.git --path skill-data/derive-client--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add vercel-labs/agent-browser --skill derive-client -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install vercel-labs/agent-browser derive-client --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vercel-labs/agent-browser.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skill-data/derive-client .gemini/skills/derive-client && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "derive-client" agent skill from https://github.com/vercel-labs/agent-browser/tree/main/skill-data/derive-client into .gemini/skills/derive-client/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "derive-client", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install vercel-labs/agent-browser derive-clientInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add vercel-labs/agent-browser --skill derive-client -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/vercel-labs/agent-browser.git skills-src && mkdir -p .github/skills && cp -r skills-src/skill-data/derive-client .github/skills/derive-client && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "derive-client" agent skill from https://github.com/vercel-labs/agent-browser/tree/main/skill-data/derive-client into .github/skills/derive-client/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "derive-client", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add vercel-labs/agent-browser --skill derive-client -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install vercel-labs/agent-browser derive-client --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vercel-labs/agent-browser.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skill-data/derive-client .opencode/skills/derive-client && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "derive-client" agent skill from https://github.com/vercel-labs/agent-browser/tree/main/skill-data/derive-client into .opencode/skills/derive-client/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "derive-client", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
derive-client- GitHub stars
- 44k
- Used in
- 2 other repos
- Token cost
- ~1.3k tokens
- SKILL.md length
- 536 words
- Files
- 1
- Skills in repo
- 10
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Records a site's browser traffic into a HAR file, then builds a standalone client or CLI that calls its internal endpoints directly with no browser.
- Works in 5 steps: Record → Identify endpoints → Extract shapes and auth → …
- Turning a site with no public API into a scriptable CLI
- SKILL.md covers Workflow, 1. Record, 2. Identify endpoints and 3. Extract shapes and auth, plus 3 more sections
- Calls jq
What it does
The idea is that driving a browser suits the first visit to a site and not the hundredth. You record the site's network traffic once with agent-browser's HAR capture, which embeds text response bodies such as JSON, HTML and JS by default, so endpoint shapes can be studied offline afterward. The workflow runs Record, Identify, Extract and then further steps; the excerpt shows the first three.
While recording, you exercise every flow the client should support and repeat each at least twice with different inputs, so that comparing the recorded URLs shows which parts are parameters. Log in before starting capture so credentials stay out of the recording. Flags control whether binary bodies are embedded, with a per-body cap of 2 MB. jq queries then pick out the JSON API calls, skipping telemetry paths, third-party analytics domains and static assets, and pull the request shapes, response schemas and auth material for each real endpoint.
When your agent uses it
- Turning a site with no public API into a scriptable CLI
- Recording browser traffic to study a site's endpoints offline
- Replacing repeated browser automation with direct HTTP calls
- Separating the real API calls from analytics noise in a recording
Example prompts
- “Derive a CLI for this site from a recorded session of searching and opening detail pages.”
- “Record the network requests while I paginate the results, then list the real API endpoints.”
- “Reverse engineer this dashboard's API so we can stop driving the browser each time.”
Requirements
- The agent-browser CLI
- jq for querying the HAR file
- Access to the target site, with a login if it needs one
- Pre-approved tools (allowed-tools): Bash(agent-browser:*), Bash(npx agent-browser:*)
Workflow steps
5 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 0207911. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves these tools, so the agent can use them without asking each time:
Bash(agent-browser:*)Bash(npx agent-browser:*)
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
jq
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Derive API Client from Browser Traffic loads about 1.3k tokens when it runs. Until then it costs about 125 tokens; SKILL.md has 536 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from vercel-labs/agent-browser at commit 0207911, republished under its Apache-2.0 licence (© vercel-labs). 536 words, ~1,343 tokens.
Download SKILL.mdSave it as
.claude/skills/derive-client/SKILL.md (or your agent's skills folder).- name
- derive-client
- description
- Reverse-engineer a website's internal API by recording browser traffic into a HAR file, then generate a standalone client or CLI that calls the endpoints directly, with no browser needed after the first recording. Use when asked to "derive a client", "build a CLI for <site>", "reverse engineer this site's API", "record network requests", "turn this site into an API", or when the same site will be automated repeatedly and direct HTTP calls would beat driving the browser every time.
- allowed-tools
- Bash(agent-browser:*), Bash(npx agent-browser:*)
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 done1. 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 allembeds binary bodies too (base64);--content nonedisables 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.harIgnore 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-specificx-*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.jsonfor the client to load at runtime. Never hardcode cookie values into generated source.
Show full SKILL.md (220 more words)Show less
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, orx-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.
© vercel-labs, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skill-data/derive-client of vercel-labs/agent-browser.
Open the folder on GitHubat commit 0207911
Used in 2 other repositories
We found 2 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 2 other GitHub owners. This page covers the copy in vercel-labs/agent-browser, which our catalogue first saw on October 7, 2026.
Compare with similar skills
Derive API Client from Browser Traffic next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Derive API Client from Browser Traffic this skillvercel-labs/agent-browser | 44k | 2 repos | ~1.3k | Automated safety check: Pass | Apache-2.0 | |
| OpenCLI Adapter Authorjackwener/OpenCLI | 30k | 1 repos | ~3.4k | Automated safety check: Pass | Apache-2.0 | |
| Firecrawl Interact Integrationfirecrawl/firecrawl | 190k | 1 repos | ~731 | Automated safety check: Pass | ISC | |
| OpenCLI Adapter Autofixjackwener/OpenCLI | 30k | 1 repos | ~3.2k | Automated safety check: Pass | Apache-2.0 | |
| Kimi WebbridgeMoonshotAI/kimi-code | 7.8k | — | ~3.6k | Automated safety check: Pass | MIT | |
| Readme GuidelinesCelestoAI/celesto | 1k | — | ~763 | Automated safety check: Pass | Apache-2.0 |
Similar skills
Firecrawl Interact Integration
firecrawl/firecrawl
Guides adding Firecrawl's /interact endpoint to product code for pages that need clicks, forms, pagination or logged-in flows beyond plain scraping.
OpenCLI Adapter Autofix
jackwener/OpenCLI
Repairs a broken OpenCLI site adapter after a command fails: collects a trace, patches only the adapter, retries, and files an upstream GitHub issue once fixed.
Kimi Webbridge
MoonshotAI/kimi-code
Kimi Browser Extension（Kimi 浏览器扩展，原 Kimi WebBridge）lets AI control the user's real browser — navigate, click, type, read, screenshot, and interact with any website using the user's actual login…
Readme Guidelines
CelestoAI/celesto
Review or write README content for open-source projects. An agent skill from CelestoAI/celesto.
Bun 1.4 Builtins Guide
code-yeongyu/senpi
Points the agent at Bun 1.4 built-in APIs before it installs an npm package, so image, browser, markdown, cron, PTY and test work uses what Bun already ships.
More from vercel-labs/agent-browser
All 10 skills in this repo- Official
Agent Browser CLI
vercel-labs/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…
- Official
Dogfood Exploratory QA
vercel-labs/agent-browser
Explores a web app with the agent-browser CLI to find bugs and UX problems, then writes a report with screenshots, repro videos and step-by-step reproduction for each issue.
- Official
Electron App Automation
vercel-labs/agent-browser
Automates Electron desktop apps such as VS Code, Slack or Discord by connecting agent-browser to their Chrome DevTools Protocol port.
- Official
Slack Browser Automation
vercel-labs/agent-browser
Drives the Slack web app with the agent-browser CLI to check unread channels, search, read channel details and extract information, with screenshots as evidence.
- Official
Core Guide for agent-browser
vercel-labs/agent-browser
Core usage guide for the agent-browser CLI: the snapshot-and-ref workflow for navigating, clicking, filling forms, extracting data and running parallel sessions.
- Official
WebMCP Tool Generator
vercel-labs/agent-browser
Builds and validates experimental WebMCP tools that expose a web page's real workflows to agents, with a manifest, init script and evals compared against accessibility-tree automation.
Related
Categories
Questions about Derive API Client from Browser Traffic
What does Derive API Client from Browser Traffic do?
Records a site's browser traffic into a HAR file, then builds a standalone client or CLI that calls its internal endpoints directly with no browser. The idea is that driving a browser suits the first visit to a site and not the hundredth. You record the site's network traffic once with agent-browser's HAR capture, which embeds text response bodies such as JSON, HTML and JS by default, so endpoint shapes can be studied offline afterward.
When should I use Derive API Client from Browser Traffic?
Derive API Client from Browser Traffic fits situations like: turning a site with no public API into a scriptable CLI; recording browser traffic to study a site's endpoints offline; replacing repeated browser automation with direct HTTP calls; separating the real API calls from analytics noise in a recording.
How do I install Derive API Client from Browser Traffic in Claude Code?
Run `npx skills add vercel-labs/agent-browser --skill derive-client -a claude-code`. Or copy the skill folder (skill-data/derive-client in vercel-labs/agent-browser) into .claude/skills/derive-client in your project. Claude Code loads it when a task matches its description.
How do I install Derive API Client from Browser Traffic in Codex?
Run `npx skills add vercel-labs/agent-browser --skill derive-client -a codex`. Or copy the skill folder (skill-data/derive-client in vercel-labs/agent-browser) into .agents/skills/derive-client in your project. Codex loads it when a task matches its description.
Can I use Derive API Client from Browser Traffic in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add vercel-labs/agent-browser --skill derive-client -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/derive-client, .gemini/skills/derive-client, .github/skills/derive-client and .opencode/skills/derive-client in your project.
What does Derive API Client from Browser Traffic need to run?
Going by SKILL.md and its folder, Derive API Client from Browser Traffic needs the command-line tools its instructions call (jq). Our summary lists: The agent-browser CLI; jq for querying the HAR file; Access to the target site, with a login if it needs one. Its frontmatter pre-approves these tools: Bash(agent-browser:*), Bash(npx agent-browser:*).
Does Derive API Client from Browser Traffic access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Derive API Client from Browser Traffic safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Derive API Client from Browser Traffic use?
Derive API Client from Browser Traffic is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Derive API Client from Browser Traffic use?
About 1.3k tokens (SKILL.md is roughly 5.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Derive API Client from Browser Traffic?
Skills that share tags, products or a category with Derive API Client from Browser Traffic: OpenCLI Adapter Author (jackwener/OpenCLI, 30k stars), Firecrawl Interact Integration (firecrawl/firecrawl, 190k stars), OpenCLI Adapter Autofix (jackwener/OpenCLI, 30k stars) and Kimi Webbridge (MoonshotAI/kimi-code, 7.8k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Derive API Client from Browser Traffic?
vercel-labs (a GitHub organization, an official publisher) maintains it in vercel-labs/agent-browser, which has 43,634 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on October 8, 2026.
Source: vercel-labs/agent-browser on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.