$ early access is open · MCP live

Debug. Build.
From the browser.

trace turns any browser into a software engineer. chat with your devtools to debug live state, then ship features the same way you vibe code in cursor — without ever leaving the tab.

$trace login_ See how it works
// six agents · one tab · zero context switching
--- // Redesigned two-column Trace simulation panel matching gettrace.dev (Monochrome Edition) ---
TRACE • LOCALHOST:3000
claude-4.5 / gemini-2.5 / gpt-5
01 — DEBUG MODE
Chat with your devtools

An agent on every
DevTools panel.

Six sub-agents fan out in parallel — one per panel. You ask, they investigate, the coordinator answers.

⚙ ELEMENTS
DOMAgent
3 nodes diff'd
>_ CONSOLE
ConsoleAgent
1 error • 4 warns
</> SOURCES
DebuggerAgent
paused • L48
⚡ NETWORK
NetworkAgent
POST 500 • 3x
◷ PERFORMANCE
PerfAgent
LCP 4.2s
💾 MEMORY
MemoryAgent
heap +12mb
TRACE COORDINATOR merge • 12ms
PARALLEL OBSERVATION 6 agents • 1 verdict
02 — BUILD MODE
Ship from the tab

Point at the pixel.
Trace ships the code.

The first IDE that sees your app. Select the rendered pixel, say what you want — Trace writes the patch, hot-reloads, opens the PR.

01 SEE pixel + source resolved
localhost:3000/dashboard dashboard/Page.tsx:82
132 × 32
02 ASK natural language
> make this primary, brand purple, and wire upgrade()▍
03 SHIP patched • reloaded • PR opened
UPGRADEBUTTON.TSX +12 / -3
11-<button className="bg-zinc-900 ...">
11+<button className="bg-purple-600 ...">
12+ onClick={() => upgrade()}
⑂ PR #218 fix/upgrade-cta HMR • 142ms
THE VISION-AWARE IDE see -> say -> ship
observes runtime → writes ~/your-repo
how it works

Two commands. Whole workflow.

Observe the live runtime, then ship straight into your local codebase — all from the tab you already have open.

01 · debug

Observe

$ trace observe
// 6 agents inspect console·network·dom·perf·sources·memory in parallel

Chat with your devtools to debug live state. Each agent owns a panel and reports back in plain language.

02 · build

Ship

$ trace ship
// edits your local codebase while watching the live runtime

Cursor, but it can see. Trace turns DOM mutations into real framework source code and opens the PR.

works inside

Lives where you already work.

ChromeEdgeBraveArcNext.jsReactVueNode.jsChromeEdgeBraveArcNext.jsReactVueNode.js
capabilities

Everything devtools should be.

A multi-agent engineer riding shotgun in your browser — reading the runtime, writing the code.

⌗

6-Agent Architecture

Six specialized agents each sit on a dedicated DevTools panel — console, network, DOM, performance, sources and memory — inspecting in parallel.

✎

Live UI Editing

Make real-time visual changes directly in the browser and watch them reflect against the running app instantly.

↦

DOM-to-Code Pipeline

Converts DOM mutations into actual framework source code in your local repo — not throwaway snippets.

◎

Live Runtime Debugging

Chat with your devtools to inspect live state, step breakpoints and trace network calls without leaving the tab.

⤓

Ships Real PRs

Edits your local codebase while watching the live runtime, then opens a pull request you can review.

✦

Bring Your Own Model

Routes across Claude, Gemini and GPT so the strongest model handles each step of the session.

guided & supported

Backed by builders who ship.

GoogleMicrosoftGoldman SachsNewton SchoolLaunch.co

Get early access.

Turn the tab you already have open into a software engineer. Debug live, ship real code, never context-switch.

Login Manage account