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.

What it solves

Coding agents often struggle to understand what actually happens when an app runs: server output, browser console messages, network requests, and user interactions are scattered or invisible. d3k gives the agent a single shared timeline of these events, plus a managed browser it can control, so the agent can run the project, reproduce an issue, and inspect evidence without needing a separate dashboard or binary.

How it works

You install the d3k skill (for example with pnpm dlx skills add vercel-labs/dev3000 --skill d3k). The skill owns a small background JavaScript runtime. After you start it, the runtime launches the app's dev server and a Chrome browser using a stable local URL like https://my-app.localhost. The agent can then issue commands such as browser snapshot, browser click, and events to read server logs, console messages, exceptions, network requests, and interactions. Events share sequence numbers assigned at collection time, and you query them by session and cursor. The timeline holds up to 5,000 events or 8 MiB; no log files are written, and evidence disappears when the runtime exits. Only browser profile and session discovery data persist under ~/.d3k/<project>/, and control uses authenticated local IPC rather than a network listener.

Who it's for

Developers and teams who use coding agents (like Claude or similar) to debug web applications. It requires Node.js 24+, pnpm, and Chrome. It is especially useful when you want the agent to run your project, reproduce a reported issue, and inspect what happened without manually collecting logs.

Highlights

  • Gives the agent a managed browser and a shared, timestamped timeline of server and browser activity.
  • No global binary or terminal dashboard needed—just a small JavaScript runtime that runs under Node.
  • Commands like browser snapshot, browser click, and events let the agent inspect state and history.
  • Filters by source or error level, with cursors to page through event streams.
  • Preserves privacy: request headers/body are omitted, URL query values redacted, and only minimal data persists.
  • Supports --headless for CI and --servers-only when you don't need browser monitoring.

Related

  • Project
    google/adk-web

    A web‑based developer console for Google’s Agent Development Kit, offering visual debugging (events, tracing, artifacts, evaluations) and an agent‑builder UI. Run the Angular front‑end locally and connect it to the ADK backend (`adk web`).

  • Project
    iii-hq/iii

    iii is a unified runtime and integration framework that simplifies backend service composition, observability, and agentic tool use by mapping all services to a common set of workers, triggers, and functions.

  • Project
    rajudandigam/agent-inspect

    A local-first observability and testing toolkit for TypeScript AI agents that enables debugging, CI/CD trajectory validation, and secure evidence sharing without external dependencies.

  • Project
    canwhite/AgentEval

    A transparent HTTP proxy that captures Agent-LLM traffic to provide automated grading, behavioral diagnosis, and source-code probing for AI agent evaluation.

  • Project
    a2aproject/a2a-inspector

    A2A Inspector is a web-based debugging and validation tool for developers building agents on the Agent2Agent protocol, allowing them to test communication, monitor traffic, and manage tasks.