vercel-labs/dev3000

Captures your web app's complete development timeline - server logs, browser events, console messages, network requests, and automatic screenshots - in a unified, timestamped feed for AI debugging.

解決する問題

コーディングエージェントは、アプリの実行時に実際に何が起こっているかを理解するのに苦労することがよくあります。サーバー出力、ブラウザコンソールメッセージ、ネットワークリクエスト、ユーザーインタラクションは散在しているか見えません。d3k は、これらのイベントの単一の共有タイムラインと、エージェントが制御できる管理されたブラウザを提供するため、エージェントはプロジェクトを実行し、問題を再現し、別のダッシュボードやバイナリを必要とせずに証拠を検査できます。

仕組み

d3k スキルをインストールします(例:pnpm dlx skills add vercel-labs/dev3000 --skill d3k)。スキルは小さなバックグラウンド JavaScript ランタイムを所有します。起動後、ランタイムはアプリの開発サーバーと Chrome ブラウザを、https://my-app.localhost のような安定したローカル URL で起動します。エージェントは browser snapshot、browser click、events などのコマンドを発行して、サーバーログ、コンソールメッセージ、例外、ネットワークリクエスト、インタラクションを読み取ることができます。イベントは収集時に割り当てられたシーケンス番号を共有し、セッションとカーソルでクエリできます。タイムラインは最大 5,000 イベントまたは 8 MiB を保持します。ログファイルは書き込まれず、ランタイムが終了すると証拠は消えます。ブラウザプロファイルとセッション検出データのみが ~/.d3k/<project>/ に永続化され、制御はネットワークリスナーではなく認証されたローカル IPC を使用します。

対象読者

コーディングエージェント(Claude など)を使用して Web アプリケーションをデバッグする開発者とチーム。Node.js 24+、pnpm、Chrome が必要です。エージェントにプロジェクトを実行させ、報告された問題を再現させ、手動でログを収集せずに何が起こったかを検査させたい場合に特に役立ちます。

ハイライト

  • エージェントに管理されたブラウザと、サーバーおよびブラウザアクティビティの共有タイムスタンプ付きタイムラインを提供します。
  • グローバルバイナリやターミナルダッシュボードは不要で、Node で実行される小さな JavaScript ランタイムのみです。
  • browser snapshot、browser click、events などのコマンドで、エージェントが状態と履歴を検査できます。
  • ソースまたはエラーレベルでフィルタリングし、カーソルでイベントストリームをページングできます。
  • プライバシーを保護:リクエストヘッダーとボディは省略され、URL クエリ値は編集され、最小限のデータのみが永続化されます。
  • CI 用の --headless と、ブラウザ監視が不要な場合の --servers-only をサポートします。

関連

  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト