Domscribe

Domscribe is a frontend development assistance tool designed specifically for AI coding agents, aiming to solve the problem of agents struggling to locate source code positions when modifying the UI. AI coding agents are good at reading and editing source files, but when asked to fix UI defects, they often do not know which file the element they are currently seeing belongs to, and can only guess, search, or even modify the wrong content. Domscribe bridges source code and the browser DOM bidirectionally, enabling agents to complete frontend modifications precisely and efficiently.

Main capabilities

• Build-time stable IDs: During the build phase, Domscribe traverses JSX and Vue templates, assigns a stable ID to each element, and generates a manifest file that maps each ID to the exact file, line, and column. After reading the manifest, the agent can instantly resolve elements and edit the correct file on the first try.
• Runtime deep context: Before making changes, the agent can query Domscribe to see what is actually rendered at a specified source code location, including live DOM snapshots, component props, and state. After changes, it can also verify the results without screenshots or manual intervention.
• Bidirectional querying: You can either click a DOM element to tell the agent what to modify, or let the agent query any source code location to view the live rendering result.
• Framework-agnostic: Supports React and Vue, extracting live props, state, and component metadata through React fiber traversal and Vue VNode inspection.
• Compatible with any MCP agent: Any MCP-compatible agent can use it.
• Zero production impact: All data-ds attributes, overlay scripts, and relay connections are stripped from production builds, and this is enforced by CI.

How to use

1. Installation wizard: An interactive wizard can automatically detect the framework, configure the bundler, and install the agent plugin, completing in less than a minute.
2. Add to the app: Install the Domscribe plugin and configure MCP and skills.
3. Connect the agent: Connect the agent through MCP so it can query by source code or handle annotations.
4. Point to the UI and describe the requirement: Click any element in the running app, enter the modification requirement in natural language, and submit. Domscribe resolves the element to the exact source code location, and the agent edits the correct file and line.

Technical implementation

• The bundler plugin parses each source file, injects HMR-stable data-ds IDs via xxhash64, and records the mapping in in .domscribe/manifest.jsonl.
• Framework adapters extract live props, state, and component metadata, and the overlay allows clicking any element to view the full context.
• A local Fastify daemon connects the browser and agents via REST, WebSocket, and MCP stdio, with file locks preventing duplicate instances when the development server restarts.
• Annotations are stored as JSON files in .domscribe/annotations/, exposed via a REST API, and wrapped by MCP for agent access, with no external dependencies.
• A WebSocket relay pushes agent responses to the browser overlay in real time.

Use cases

• Agent-assisted front-end UI modifications and bug fixes.
• Development workflows that need to quickly map visual elements in the browser to source code locations.
• Development teams using React or Vue frameworks and wanting to integrate MCP agents.

Limitations

• The official materials do not provide specific pricing models, prices, platform support scope, or performance data.
• React and Vue are currently explicitly supported; support for other frameworks is not yet provided.
• An MCP-compatible agent is required to use it.