Domscribe
AI coding agents edit your source files blind — they can't see your running frontend, and your frontend can't tell them where to look.
Domscribe bridges both directions: click a DOM element to tell your agent what to change, or let your 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.
Getting Started
npx domscribe init
The setup wizard walks you through two steps:
- Connect your coding agent — select your agent (Claude Code, Copilot, Gemini, Kiro, or others) and the wizard installs the plugin automatically.
- Add to your app — select your framework and bundler, the wizard installs the right package and shows you the config snippet to add.
That's it. Start your dev server and you're ready to go.
Prefer to set things up manually, or need finer control? See the manual setup instructions below.
Features
Code → UI: Let the agent see the browser
Your agent calls domscribe.query.bySource with a file path and line number and gets back the live DOM snapshot, current props, component state, and rendered attributes — directly from the running browser. No human interaction needed.
patchorbit