# 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