LabscoMCP early access ↗
patchorbitMCP SERVER · OFFICIAL PROJECT

Domscribe

Let a coding agent see your running frontend — query any source line for its live DOM, props and state, or click an element in the browser to tell the agent what to change.

by patchorbit ↗Runtime Debugging & Crash Analysis✓ Official

LABSCO SUMMARY

The missing link between the page you see and the file the agent edits.

Two directions matter here: the agent can ask what a given source line looks like live, and you can point at something on screen and have that become a task with its source location attached. The verification pair closes the loop — a baseline before the edit and a comparison after gives a verdict rather than an opinion about whether the change landed. Agents do not reach for runtime state unprompted, so the project's own advice holds: tell it explicitly to check the element before it edits.

What it is

A bridge between a running dev server and an MCP-capable coding agent. Build-time stable IDs map DOM elements to source locations, and a localhost relay carries queries and annotations between the browser and the agent.

What you get

  • A source file and line queried for its live runtime context — DOM snapshot, current props, component state and rendered attributes — with no human in the loop
  • Element IDs resolved back to file, line, column and component, one at a time or in a batch
  • The DOM-to-source manifest searchable by path, component or element id, with coverage statistics
  • An in-browser overlay to click an element and describe the change; the agent claims that annotation atomically, implements it, and answers back over a WebSocket
  • Annotations stored as files in your own repo, listed, searched and transitioned through their statuses
  • A before-and-after check: capture an element's style and geometry, then compare after the edit for a deterministic verdict with per-property deltas
  • IDs injected at build time through the AST, so they survive hot reload, and all instrumentation stripped from production builds
  • Runtime capture for React 18-19 and Vue 3, plus Next.js and Nuxt, across Vite, Webpack and Turbopack
  • Emails, tokens and similar patterns scrubbed before anything leaves the browser

Requirements

Node 18 or newer, and both halves installed: the bundler plugin for your framework in the app, and the MCP server registered with your agent — npx domscribe init walks through both and writes the config. Runtime queries need the dev server running with the target page open in the browser. In a monorepo, point init at the app directory so the tools resolve the right root. No account or key. MIT.

Setup effort

One command — npx domscribe init

See installation options