Domscribe

Domscribe is an open-source tool that maps each DOM element in a running front end to the exact file, line and column that produced it. You can click an element to tell your AI coding agent what to change, and the agent can query what a source location currently renders.

A bundler plugin walks JSX and Vue templates at build time, injects stable IDs that survive hot reload, and writes a manifest of ID-to-source mappings. Framework adapters read live props, state and DOM snapshots from React and Vue, and that context is exposed to agents through MCP.

It supports React, Vue, Next.js and Nuxt with Vite, Webpack or Turbopack, and works with Claude Code, Cursor, GitHub Copilot, Gemini CLI, Kiro and other MCP agents. Sensitive values like emails and tokens are scrubbed before leaving the browser, and all attributes are stripped from production builds.