Communitygithub.com

vercel-labs/derive-client

透過錄製瀏覽器流量產生 HAR 檔案,逆向工程網站內部 API,並生成獨立客戶端或 CLI,無需瀏覽器即可直接呼叫端點。

derive-client 是什麼?

此技能專為需要反覆與同一網站互動而設計,它能將首次手動操作時錄製的網路流量(HAR 檔案)轉換成可直接呼叫內部 API 的獨立客戶端(腳本、CLI 或函式庫)。支援的平台包括 agent-browser 等瀏覽器自動化工具。運作流程包含錄製、識別端點、提取請求/回應結構與驗證,能產出型別安全的函式,並處理 Cookie、CSRF Token 等驗證機制。主要優勢在於省去每次操作都啟動瀏覽器的開銷,讓重複任務(如搜尋、分頁)更有效率。

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

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

從錄製的工作階段推導 API 客戶端

首次造訪網站時使用瀏覽器是正確的工具,但第一百次造訪時就不是了。此技能會在使用網站時錄製一次網路流量,然後將捕捉到的請求轉換成可直接與網站內部 API 溝通的獨立客戶端(腳本、CLI 或函式庫)。

錄製內容本身就包含所有必要資訊:agent-browser 預設會將文字回應內容(JSON/HTML/JS)嵌入 HAR 中,因此即使關閉瀏覽器後,仍可離線研究端點結構。

工作流程

1. 錄製     啟動 HAR 捕捉,在客戶端中操作你需要的流程
2. 識別     在雜訊中找出真正的 API 端點
3. 提取     擷取請求結構、回應結構與驗證資料
4. 生成     撰寫客戶端,每個流程對應一個函式
5. 驗證     實際呼叫每個端點,確認皆能正常運作

1. 錄製

agent-browser network har start          # 預設會嵌入文字回應內容
# ... 操作網站:搜尋、開啟詳細頁面、分頁等 ...
agent-browser network har stop /tmp/site.har
  • 每個客戶端應支援的流程都要操作過,且每個流程至少執行兩次,使用不同的輸入(例如兩個搜尋詞、兩個詳細頁面)。比對錄製的 URL 可發現哪些部分是參數。
  • 若網站需要登入,請在啟動 HAR 之前先登入,以免不必要的憑證被錄製下來。工作階段 Cookie 會在步驟 3 中另行匯出。
  • --content all 會同時嵌入二進位內容(base64);--content none 停用嵌入功能。每個內文的上限為 2 MB。

工作階段仍在開啟時,agent-browser network requests 與 network request <id> 可互動式提供相同資料,但只有 HAR 能在導航與瀏覽器關閉後繼續存在,因此多頁面操作時建議使用 HAR。

2. 識別端點

使用 jq 查詢 HAR:

# 所有 JSON API 呼叫:方法、URL、狀態
jq -r '.log.entries[]
  | select(.response.content.mimeType | test("json"))
  | "\(.request.method) \(.response.status) \(.request.url)"' /tmp/site.har

忽略分析與基礎設施雜訊:遙測端點(/collect、/track、/beacon、/log)、第三方網域(google-analytics、segment、sentry、datadog、intercom、hotjar)以及靜態資源。真正的 API 通常是第一方、JSON 格式,且與你執行的動作相關。

3. 提取結構與驗證資料

# 單一端點的完整詳細資訊:請求標頭、POST 內文、回應內文
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.content.text —— 這是實際的酬載,可用來推導型別。
  • 驗證:比較各端點的請求標頭。尋找 authorization、cookie、x-csrf-token、x-api-key 以及網站特有的 x-* 標頭。只保留必要的部分——在步驟 5 中透過省略測試來確認。
  • Cookie:使用 agent-browser cookies get --json > cookies.json 匯出目前工作階段的 Cookie,供客戶端在執行時期載入。絕對不要將 Cookie 值硬編碼到產生的原始碼中。

4. 生成客戶端

  • 每個錄製的流程對應一個函式(search(query)、getItem(id)),並根據觀察到的回應內文定義型別。
  • 驗證資料(Cookie、Bearer Token)從檔案或環境變數載入,當過期時顯示明確錯誤訊息,告知使用者需重新執行瀏覽器登入。
  • 重現 API 實際需要的標頭——某些網站若缺少相符的 user-agent、referer 或 x-requested-with 會回傳 403。
  • 將錄製的查詢字串中出現的分頁、排序與篩選參數保留為函式選項。

5. 驗證

對實際 API 呼叫每個生成的函式,並將回應結構與錄製內容進行比對。常見失敗情形:

症狀原因修正方法
401/403工作階段過期或遺失透過 agent-browser 重新登入,重新匯出 Cookie
寫入時 403/419CSRF Token 是每個工作階段或每個表單獨一無二的先擷取 Token 端點,或維持該流程由瀏覽器驅動
有時正常有時失敗帶有簽名/會過期的請求參數針對該步驟改用瀏覽器;其餘部分仍可推導
與 HAR 結構不同A/B 測試或地理位置相關回應重新錄製,並將差異視為選用欄位

注意事項

  • 內部 API 通常無版本號且隨時可能變更——請保留 HAR 以便日後重新推導客戶端。
  • 請遵守網站的服務條款與速率限制;大量擷取時請加入延遲。
  • HAR 檔案包含即時工作階段憑證(Cookie、Token、POST 內文)。請視為機密資訊:避免放入版本控制系統,並在使用完畢後刪除。

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.

相關技能