Domscribe

Product Introduction

1. Definition: Domscribe is an open-source, MIT-licensed Model Context Protocol (MCP) server and developer toolchain designed to provide AI coding agents with bidirectional visibility between source code and the live browser DOM. It acts as a bridge that allows LLM-based agents (like Claude Code, Cursor, or GitHub Copilot) to inspect the runtime state of a frontend application and map UI elements directly to their precise source code locations (file:line:column).

2. Core Value Proposition: Domscribe eliminates the "frontend blind spot" in AI-assisted development. While modern AI agents are proficient at reading static source files, they lack visual and runtime context of the running application. Domscribe provides this context through build-time stable IDs and runtime framework introspection, enabling "Point-and-Edit" workflows and "Source-to-UI" querying. This ensures that agents edit the correct files on the first attempt, reducing the hallucination and "search-before-code" overhead common in frontend engineering.

Main Features

1. Build-time Stable ID Injection: Domscribe utilizes a specialized bundler plugin (supporting Vite, Webpack, and Turbopack) that parses JSX and Vue templates during the build process. It injects deterministic, HMR-stable data-ds attributes into every element using xxhash64 via Abstract Syntax Tree (AST) manipulation. This creates a permanent, non-volatile mapping between the rendered DOM and the repository source, which is stored in a local .domscribe/manifest.jsonl file for agent consumption.

2. Deep Runtime Context Capture: Unlike traditional scrapers or screenshot-based tools, Domscribe performs deep inspection of the application’s runtime. For React applications, it traverses the React Fiber tree; for Vue, it inspects VNodes. This allows the tool to extract live component props, internal state, and metadata. When an agent queries a specific source location, Domscribe returns the exact DOM snapshot and the current data state driving that UI, providing a high-fidelity "live view" without requiring vision-based LLM processing.

3. Bidirectional Workflow (Code ↔ UI): Domscribe facilitates two primary interaction patterns. The "UI → Code" path allows developers to click an element in the browser overlay and describe a change in natural language; Domscribe resolves the element's ID to its exact file and line number for the agent to patch. The "Code → UI" path allows the agent to use MCP tools to query any source location, retrieving a live representation of what that specific code block looks like in the browser, complete with PII-redacted runtime data.

4. Framework-Agnostic Local Infrastructure: The system operates via a localhost Fastify daemon that manages communication between the browser, the file system, and the AI agent via REST, WebSockets, and the MCP stdio protocol. It supports a wide array of modern stacks, including React, Vue, Next.js, and Nuxt, and ensures zero production impact by stripping all Domscribe-related attributes and scripts during production CI/CD builds.

Problems Solved

1. The "Generic Component" Ambiguity: AI agents often struggle to distinguish between multiple instances of the same component (e.g., a generic <Button /> used in twelve different files). Domscribe solves this by providing unique, build-time IDs, ensuring the agent edits src/components/Hero.tsx instead of src/components/Nav.tsx.

2. Manual Context Retrieval Fatigue: Developers traditionally spend significant time "grepping" the codebase to find the specific file responsible for a UI bug. Domscribe automates this search process, allowing the agent to find the relevant code instantly via the DOM-to-source manifest.

3. Target Audience: The product is specifically designed for Frontend Engineers, Full-stack Developers, and teams utilizing AI-native IDEs (Cursor, Windsurf) or CLI-based agents (Claude Code, Gemini CLI). It is also a critical utility for organizations looking to automate UI testing and bug fixing using autonomous agents.

4. Use Cases: Common scenarios include "Make this specific button blue," "Fix the padding on this header instance," "Debug why this component state isn't updating correctly," and verifying that a code change resulted in the intended visual output without manual browser checks.

Unique Advantages

1. Deterministic Mapping vs. Heuristic Guessing: Most competitors rely on runtime heuristics or _debugSource properties which can be unstable or missing. Domscribe uses AST-injected IDs that are stable across Hot Module Replacement (HMR) and Fast Refresh, providing 100% accuracy in file resolution.

2. No Vision Model Required: By providing the live DOM tree and component props directly to the agent’s text-based context, Domscribe bypasses the need for expensive and often inaccurate vision-language models (VLM) for UI understanding. This results in faster, more precise, and lower-cost agent operations.

3. Zero Cloud Dependency and PII Security: Domscribe runs entirely on the developer's local machine. It includes built-in PII redaction that automatically scrubs sensitive data like emails and tokens before the agent sees the runtime state, ensuring enterprise-grade privacy and compliance with data protection standards.

4. MCP-First Architecture: By strictly adhering to the Model Context Protocol, Domscribe is compatible with any MCP-enabled agent out of the box. This future-proofs the tool against the rapidly evolving landscape of AI coding assistants.

Frequently Asked Questions (FAQ)

1. Does Domscribe slow down my production application? No. Domscribe is designed with a "zero production impact" philosophy. Its bundler plugins (for Next.js, Nuxt, Vite, and Webpack) are configured to only run in development environments. All data-ds attributes, overlay scripts, and WebSocket connections are automatically stripped during the production build process, ensuring no performance overhead for end-users.

2. Which AI agents are compatible with Domscribe? Domscribe works with any agent that supports the Model Context Protocol (MCP). This includes Claude Code, Cursor, GitHub Copilot, Gemini CLI, and Amazon Kiro. It can also be integrated into custom agent workflows via its standard MCP tool surface, which includes 12 specialized tools for querying and editing UI components.

3. How does Domscribe handle sensitive data in my app's state? Domscribe features an automated PII (Personally Identifiable Information) redaction layer. Before the framework adapters (React Fiber/Vue VNode) send state or prop data to the agent, the system scrubs sensitive patterns such as email addresses, auth tokens, and credit card numbers, ensuring that sensitive user data is never exposed to the LLM.

4. Can I use Domscribe with both React and Vue? Yes. Domscribe is framework-agnostic and provides first-class support for React (including Next.js) and Vue (including Nuxt). It uses specialized framework adapters to walk the internal component trees of each library, ensuring that deep runtime context is available regardless of your choice of frontend framework.