dev3000 (d3k)

repository·main·Indexed 23 days ago

https://github.com/vercel-labs/dev3000

An agent-first local web debugging runtime that orchestrates a development server and a monitored Chrome browser. It provides coding agents with a unified stream of logs, network activity, and screenshots. The system includes a d3k skill for autonomous agent use and a suite of example Next.js applications designed to trigger specific optimization workflows, including bundle size, client-side fetch, CLS, design guidelines, and React performance.

Tokens
22.6K
Snippets
38
Records
148
Agent score
82%

What's inside dev3000

  1. Overview of example apps and their target workflows

    main

    The example-apps repository contains small, intentionally imperfect Next.js applications designed to validate d3k agent workflows. Each app contains specific performance, design, or architectural issues meant to be identified and fixed by specialized agents.

    App Workflows and Intentional Issues

    App NameWorkflow TypeExpected SkillsIntentional Issues
    design-guidelinesdesign-guidelinesd3k, vercel-design-guidelinesLow contrast, inconsistent spacing/typography, long line lengths, CTA hierarchy issues
    react-performancereact-performanced3k, vercel-react-best-practicesSequential data fetching (waterfalls), expensive render loops, large in-memory arrays
    eliminate-waterfallsEliminate Waterfallsd3k, vercel-react-best-practicesSequential server fetching on main routes, per-item fetch loops, delayed async work
    bundle-size-optimizerBundle Size Optimizerd3k, vercel-react-best-practicesUnnecessary top-level client components, large static imports, heavy widgets loaded early
    server-side-perf-optimizerServer-Side Perf Optimizerd3k, vercel-react-best-practicesDuplicate server fetches, sequential request-time work, oversized serialized payloads
    client-side-fetch-optimizerClient-Side Fetch Optimizerd3k, vercel-react-best-practicesMultiple widgets fetching same endpoint, duplicate resize listeners, repeated localStorage reads
    re-render-optimizerRe-render Optimizerd3k, vercel-react-best-practicesRebuilding large arrays on render, derived state in effects, high-frequency transient values in state
    cls-fixcls-fixd3kBanners inserted without reserved space, large images without explicit dimensions
    turbopack-bundle-analyzerturbopack-bundle-analyzerd3k, analyze-bundleUnnecessary client components on /, large static JSON imports, expensive client-side filtering
  2. Manage browser profiles and authentication safety

    main

    d3k uses a per-project Chrome profile to preserve login state, cookies, and local storage. This is critical for handling sensitive authentication flows like Google OAuth or Supabase.

    Warning: Do not attempt to substitute the managed browser with raw Chrome, Playwright, manual CDP attachment, or agent-browser --profile. Using these alternative methods uses a different profile and may trigger security blocks (e.g., "This browser or app may not be secure").

    If the managed browser becomes unavailable, stop the d3k process and restart it cleanly rather than attempting to work around it with a different browser.

  3. Security constraints for Sponsored DeepSec runs

    main

    Sponsored runs are highly restricted to protect Vercel Labs infrastructure. Key constraints include:

    • Repository Access: Only public repositories are allowed. Cloning is performed via public Git URL and a pinned commit SHA.
    • Environment: No user-provided secrets, no custom runner environment variables, and no reuse of user project environment variables.
    • Execution: No arbitrary scripts and no private repo access tokens.
    • Permissions: No write access to the user's repository and no PR creation (in the initial version).
    • Resource Limits: Hard limits are enforced on repository size, file count, token usage, runtime, and concurrency.
  4. Changelog entry format and version types

    main

    Each entry in the changelog consists of a version number, a date (YYYY-MM-DD), a release type, and 3-4 key highlights. The system classifies releases into three types:

    • Major (x.0.0): Breaking changes or major new features.
    • Minor (x.y.0): New features or significant improvements.
    • Patch (x.y.z): Bug fixes or small improvements.
  5. Understand the difference between "Let me test" and "Test this"

    main

    When interacting with an agent using d3k, the phrasing changes the agent's behavior:

    • "Let me test this project with d3k": The agent prepares the headed monitored browser and hands control to you. It waits for you to reproduce the issue, then inspects the captured evidence.
    • "Test/debug this with d3k": The agent is authorized to drive the managed browser and investigate the issue autonomously.
  6. Understand the d3k-skill-runner architecture

    main

    The d3k-skill-runner architecture is split into two distinct planes to separate the user interface from the execution compute:

    1. Control Plane (dev3000-www): Responsible for authentication, team selection, the /skill-runner catalog UI, skill search/import, managing team settings, initiating run requests, and rendering reports by polling the worker.
    2. Data Plane (per-team d3k-skill-runner worker project): A dedicated project provisioned within the user's Vercel team. It hosts durable workflows, manages sandboxes, installs d3k and skill packages, executes observation/verification, generates report payloads, and writes artifacts/run state to team-owned storage.

    This split allows teams to own their execution costs (compute, storage, and potentially AI) while using dev3000-www as a unified management interface.

  7. Versioning Strategy for Workers and Protocols

    main

    To maintain compatibility between the control plane and workers, three distinct versions must be tracked:

    1. Worker app version: The version of the runner shell artifact.
    2. Wrapper generation version
    3. Workflow schema version

    When the control plane communicates with a worker, it must include the expected protocol version. The worker returns its own version; if these are incompatible, the control plane should mark the worker as needing an upgrade.

  8. Understand DeepSec execution modes

    main

    DeepSec runs in one of three execution modes depending on the user and project type:

    • self-hosted: The default mode. Users install d3k-skill-runner in their own team. The user's team is responsible for billing, logs, and AI Gateway usage.
    • hosted: Reserved for internal Vercel/Vercel Labs execution for trusted internal teams.
    • sponsored: Available for allowlisted public repositories. Vercel Labs owns the billing, logs, AI Gateway usage, and report storage. Users see this as a "free DeepSec report" and do not need to install a team runner.
  9. Configure authentication between Control Plane and Worker

    main

    Authentication between dev3000-www and the d3k-skill-runner worker must be server-to-server. Do not use browser session cookies.

    Recommended Implementation:

    • Shared Secret: Store a per-team worker secret in the control plane.
    • HMAC Signing: All outgoing requests from the control plane to the worker must be signed using this secret and include a timestamp to prevent replay attacks.
    • Validation: The worker validates the signature and ensures the request matches the expected installation/team context.
  10. Maintain browser and authentication safety

    main

    d3k uses a project-specific Chrome profile to preserve login states, cookies, and local storage. This is critical for handling sensitive authentication flows like Google OAuth or Supabase.

    Important Safety Rules:

    • Do not substitute the managed browser: Never use raw Chrome, Playwright, manual CDP attachment, or agent-browser --profile for auth-sensitive tasks. Doing so uses a different profile and may trigger security warnings like "This browser or app may not be secure."
    • Handle unavailability correctly: If the managed browser is unavailable, stop the current d3k process and restart d3k cleanly. Do not attempt to work around it by creating a separate browser instance.
    • Headless mode: Use --headless only for CI environments or when explicitly requested. Use --servers-only if you want to monitor the server but do not want browser monitoring.
  11. How the d3k agent workflow works

    main

    When an agent uses d3k, it follows a specific lifecycle to ensure a stable debugging environment:

    1. Check Status: Run d3k status --json to see if an active project session already exists.
    2. Start Runtime: If no session exists, start d3k in the background using d3k --no-agent --no-tui -t.
    3. Wait for Ready: Wait for d3k to provide a Portless URL and a managed browser.
    4. Browser Interaction: The agent can either hand the headed browser to the user or drive it autonomously using d3k agent-browser.
    5. Inspect Evidence: After reproducing an issue, the agent reads d3k errors --context and unified logs.

    Crucial Rule: Do not run npm run dev or bun run dev manually while using d3k; d3k owns the dev-server session.

    d3k status --json
    d3k --no-agent --no-tui -t
  12. Eligibility requirements for Sponsored DeepSec runs

    main

    To qualify for a sponsored DeepSec run, the following conditions must all be met:

    1. The skill must be exactly deepsec.
    2. The selected Vercel project must have a Git repository.
    3. The repository must be public.
    4. The repository or project must be on an explicit allowlist.
    5. The run must be within the quota defined for the allowlist entry.
    6. The run must not provide custom runner environment variables.
    7. The run must use bounded DeepSec settings.