til/…/browser-to-api
browser-to-api.mdupdated 2026-08-012,538 chars

browser-to-api —— CDP トレースから​ OpenAPI スペックを​自動生成する​ Browserbase の​スキル

browser-to-api は、​任意の​ Web サイトを​ドキュメント付き API に​変換する​ Browserbase​（＝ブラウザ自動化プラットフォーム）の​公式エージェントスキルである。​自分では​クロールも​通信キャプチャも​行わない。browser-traceが​記録した​通信ログを​オフラインで​後処理するだけであり、​CDP​（Chrome DevTools Protocol＝ブラウザの​内部​通信を​取得する​規格）の​リクエスト／レスポンスを​ペアリングし、​観測された​ URL を​テンプレート化し、​レスポンスの​サンプルから​ JSON スキーマを​推論し、​OpenAPI 3.1 スペックと​カバレッジレポート、​すぐ​使える​クライアントを​出力する。browser-trace（キャプチャ）​→browser-to-api（合成）と​いう​2スキル構成で​使う。​Codex​（＝OpenAI の​コーディングエージェント）が​単一プロンプトから​ OpenTable の​ドキュメント付き API クライアントを​ワンショットで​生成した​手法が​これである。

きっかけは、​Browserbase の​エンジニアである​ @derekmeegan に​よる​ 2026-05-14 の​投稿である。​「/browser-to-api が​任意の​サイトを​ API に​変える​ —— Codex が​単一プロンプトから​ OpenTable の​ API クライアントを​ワンショットで​生成した」と​いう​内容で、​71.1万回の​閲覧を​集めた。

何を​する​スキルか

ドキュメントの​存在しない​非公式 Web API に​対して、​ブラウザ操作の​記録から​逆算して​ OpenAPI スペックの​草案を​作る​エージェントスキルである。​Browserbase の​公式スキル集browserbase/skillsの​一つであり、​Claude Code・Codex・Cursor などの​コーディングエージェントから​呼び出せる。

重要な​前提と​して、​この​スキル自体は​通信を​一切キャプチャしない。browser-traceが​記録した​ CDP の​ネットワークログを​純粋に​オフラインで​後処理するだけである。​だから​こそ​安全に​実行できる​——実行しても​副作用が​なく、​決定論的​（＝​同じ​入力なら​常に​同じ​結果に​なる）だからである。

2スキル構成の​パイプライン

  1. browser-trace（キャプチャ）​—— ブラウザ自動化の​実行中に、​DevTools プロトコルの​全通​信​（CDP の​ログ・スクリーンショット・DOM ダンプ）を​記録する。​出力先は.o11y/<run>/cdp/network/{requests,responses}.jsonlである。
  2. browser-to-api（合成）​—— 上記の​ jsonl を​読み込み、​CDP の​リクエスト／レスポンスイベントを​ペアリングし、​観測された​ URL を​テンプレート化し​（動的な​部分を​変数化する。​例：/users/123 → /users/{id}）、​サンプルから​ JSON スキーマを​推論し、​OpenAPI 3.1 ドキュメントと​人間が​読める​カバレッジレポートを​出力する。

出力物

  • .o11y/<run>/api-spec/index.html —— ドキュメント
  • openapi.yaml —— OpenAPI 3.1 スペック本体
  • client.mjs —— すぐに​呼び出せる​クライアントモジュール

使いどころ

  • サードパーティ製あるいは​ドキュメントが​存在しない​ Web API に​ついて、​きちんと​した​ OpenAPI スペックが​欲しい​場合
  • 既存の​ブラウザ自動化の​記録から​エンドポイントと​スキーマを​抽出したい​場合
  • スペックを​公開していない​サイトに​対して​クライアント／SDK を​作りたい​場合

導入と​呼び出し方

npx skills add browserbase/skillsで​インストールする。​Claude Code では/pluginで​マーケットプレイスを​追加し、browseプラグインを​導入したうえで​自然言語で​依頼する。​エージェントの​文脈では/browser-to-apiのように​スキルを​直接呼び出す。

近縁・類似の​ツール

  • AndrewWalsh/openapi-devtools —— 任意の​アプリや​サイトの​ API スペックを​生成する​ブラウザ拡張。​同じ​発想を​手動・ローカル形式で​先行実現した​近い​事例。
  • Browserbase Stagehand —— OpenAPI スペックや​ SDK を​生成する​機能を​持つ。​Browserbase 内の​関連系統。
  • browse.sh —— Browserbase が​公開する​「ブラウザスキルの​カタログ」。​browser-to-api は​この​エコシステムの​一部である。

所感

「サイトを​ API に​変える」と​いう​発想自体は​目新しくなく、​openapi-devtools などが​既に​実現していた。​しかし​設計は​堅実であり、​エージェントスキルと​して​合成処理を​オフライン・決定論的に​完結させ、​browser-trace と​作業を​分担している。​副作用の​ある​キャプチャと​副作用の​ない​合成を​分離する​ことで、​後処理を​何度でも​安全に​再実行できる。​GEO​（＝AI検索最適化）や​スクレイピング​（＝サイトから​機械的に​データを​収集する​こと）の​文脈でも、​対象サイトの​ API 構造を​素早く​把握する​偵察ツールと​して​有効に​機能する。

出典・参考

関連ノート

148 notestil