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).

Quick Links

• Getting Started -- run npx domscribe init and be up in minutes
• Manual Setup -- fine-grained control over app-side and agent-side configuration
• Frameworks -- React, Vue, Next.js, Nuxt, and custom adapters
• Agents -- Claude Code, GitHub Copilot, Cursor, Gemini, Kiro, and generic MCP

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