Domscribe

Domscribe solves the blind spot in AI-assisted frontend development: coding agents can read source files but cannot see your running UI. It injects deterministic data-ds IDs at build time via AST, maps every element to its exact file, line, and column, and exposes live DOM snapshots, component props, and state to any MCP-compatible agent. The result is bidirectional context — click a UI element to tell your agent what to change, or let the agent query a source location to see exactly what renders live in the browser.

• Build-time stable IDs — deterministic data-ds attributes injected via AST using xxhash64, stable across HMR and fast refresh, with a JSONL manifest mapping every ID to its source location.
• Deep runtime capture — live props, state, and DOM snapshots extracted via React fiber walking and Vue VNode inspection, not just shallow HTML.
• Bidirectional workflow — UI to Code: click any element in your running app, describe a change, and the agent edits the right file; Code to UI: the agent queries any source line to see what renders live.
• Any MCP-compatible agent — 12 MCP tools and 4 prompts work with Claude Code, GitHub Copilot, Cursor, Gemini CLI, Amazon Kiro, and any other MCP client.
• Framework-agnostic — supports React, Vue, Next.js, and Nuxt with extensible adapter architecture.
• Multi-bundler support — works with Vite 5–7, Webpack 5, and Turbopack.
• PII redaction — emails, tokens, and sensitive patterns are automatically scrubbed before leaving the browser.
• Zero production impact — all data-ds attributes, overlay scripts, and relay connections are stripped in production builds, enforced by CI.
• Fully local — a localhost Fastify daemon connects the browser and agent via REST, WebSocket, and MCP stdio; no cloud dependency or OAuth required.
• Quick setup — run npx domscribe init for an interactive wizard that handles framework detection, bundler config, and agent plugin installation in under a minute.