Documentation

Domscribe bridges the gap between your running frontend and your AI coding agent. Click a DOM element to tell your agent what to change, or let the agent query any source location to see exactly what it looks like live in the browser. Build-time stable IDs, deep runtime context (props, state, DOM), framework-agnostic, any MCP-compatible agent. Zero production impact.

AI coding agents edit your source files blind -- they cannot see your running frontend, and your frontend cannot tell them where to look. Domscribe solves both directions: UI to Code (click an element, describe a change, and the agent implements it) and Code to UI (the agent queries a source file and line to see the live DOM snapshot, props, and state).

Key Features

  • Build-time stable IDs
    • deterministic data-ds attributes injected via AST, stable across HMR and fast refresh
  • Deep runtime capture
    • live props, state, and DOM snapshots via React fiber walking and Vue VNode inspection
  • Any MCP-compatible agent
    • 12 tools and 4 prompts exposed via MCP
  • Any bundler
    • Vite 5-7, Webpack 5, Turbopack
  • PII redaction
    • emails, tokens, and sensitive patterns automatically scrubbed before leaving the browser
  • Zero production impact
    • all instrumentation stripped in production builds