Domscribe — Give your AI coding agent eyes on the frontend

Works with your stack

Any MCP-compatible agent works.

The blind spot

AI coding agents are good at reading and editing source files. But when you ask one to fix a UI bug, it has no idea which file owns the element you're looking at. It guesses, greps, and sometimes edits the wrong thing. Every agent-assisted frontend change is a search problem before it's a coding problem.

> "Make the hero button blue"

✗ Searching for button in src/...
✗ Found 12 files with <button>
✗ Editing src/components/Nav.tsx
  → Wrong file

A source address for every element

Domscribe runs at build time. It walks your JSX and Vue templates, assigns each element a stable ID, and writes a manifest that maps every ID to its exact file, line, and column. Your agent reads the manifest, resolves the element instantly, and edits the right file on the first try.

{
  "id": "A1B2C3D4",
  "file": "src/components/Button.tsx",
  "start": { "line": 12, "column": 4 },
  "tagName": "button",
  "componentName": "Button"
}

Your agent can see what it's editing

Before making a change, your agent queries Domscribe to see exactly what's rendering at a given source location — the live DOM snapshot, component props, and state. After editing, it can verify the result. No screenshots, no guessing, no human in the loop.

Code to UI — agent queries Domscribe to see what renders at a source location

See it in action

Your agent asks Domscribe what's rendering, gets back the live DOM tree, component props, and state — then edits with full context.

Point at the UI, describe what you want

Click any element in your running app, type a change in plain English, and submit. Domscribe resolves the element to its exact source location and your coding agent edits the right file and line — no searching, no context-switching.

UI to Code — click an element, describe a change, and the agent edits the right file

Built for real-world agent workflows

🎯

Build-time stable IDs

Deterministic data-ds attributes injected via AST, stable across HMR and fast refresh. No runtime heuristics.

🔍

Deep runtime capture

Live props, state, and DOM snapshots via React fiber walking and Vue VNode inspection. Not just HTML — full component context.

🔒

PII redaction

Emails, tokens, and sensitive patterns are automatically scrubbed before leaving the browser. Your data stays safe.

📁

Annotations live in your repo

Stored as JSON files in .domscribe/annotations/, exposed via REST APIs that MCP wraps for agent access. No external dependencies.

📡

Real-time feedback

WebSocket relay pushes agent responses to the browser overlay as they happen. See your agent's work in real time.

🛡️

Zero production impact

All data-ds attributes, overlay scripts, and relay connections are stripped in production builds. Enforced by CI.

How it works

1

Inject

The bundler plugin parses each source file, injects HMR-stable data-ds IDs via xxhash64, and records each mapping in .domscribe/manifest.jsonl.

2

Capture

Framework adapters (React fiber walking, Vue VNode inspection) extract live props, state, and component metadata. The overlay lets you click any element and see its full context.

3

Relay

A localhost Fastify daemon connects the browser and your agent via REST, WebSocket, and MCP stdio. A file lock prevents duplicate instances across dev server restarts.

4

Agent

Your coding agent connects via MCP to query by source (see what any line looks like live) or process annotations (claim, implement, and respond to UI change requests).

How Domscribe compares

Verified against each project's source code and npm packages.

Feature	Domscribe	Stagewise	DevInspector MCP	React Grab	Frontman
Build-time stable IDs	✓data-ds via AST	✗Runtime (CDP)	✗No stable IDs	✗_debugSource	✗Runtime framework introspection
DOM→source manifest	✓JSONL, append-only	✗	✗	✗	✗
Code→live DOM query	✓Agent queries source, gets live runtime	✗	✗	✗	✗
Runtime props/state	✓Fiber + VNode walking	⚠Shallow	⚠DOM-level + JS eval	✗HTML + component names only	⚠Props only (framework APIs)
Multi-framework	✓React · Vue · Next.js · Nuxt · extensible	⚠React only	✓React · Vue · Svelte · Solid · Preact	✗React only	⚠Next.js · Astro · Vite
Multi-bundler	✓Vite · Webpack · Turbopack	✗N/A (Electron browser)	✓Vite · Webpack · Turbopack	✗N/A	✗Dev server middleware
MCP tools	✓12 tools · 4 prompts	✗Proprietary protocol (Karton)	✓9 tools	⚠Lightweight add-on	✗Internal MCP only
Agent-agnostic	✓Any MCP client	✗Bundled Electron agent	✓	✓	✗Bundled Elixir agent
In-app element picker	✓Lit shadow DOM	✓Built-in browser selector	✓Inspector bar	✓Hover-to-capture	✓Chat interface
Source mapping	✓Deterministic (AST IDs)	⚠AI-inferred	⚠AST-injected (not stable)	⚠_debugSource (workaround needed)	⚠Runtime framework introspection
Zero cloud dependency	✓Fully local	✗OAuth + cloud	✓	✓	✓
License	✓MIT	⚠AGPL	✓MIT	✓MIT	⚠Apache + AGPL

No single competitor combines build-time stable IDs, deep runtime capture, bidirectional source↔DOM querying, and an MCP tool surface in a framework-agnostic way.

Get started

The setup wizard handles everything — framework detection, bundler config, and agent plugin installation.

$npx domscribe init

Interactive wizard — connects your agent and adds Domscribe to your app in under a minute.

Prefer manual setup?

Step 1 — Add to your app

npm install -D @domscribe/next

next.config.ts

import type { NextConfig } from 'next';
import { withDomscribe } from '@domscribe/next';

const nextConfig: NextConfig = {};

export default withDomscribe()(nextConfig);

Step 2 — Connect your agent

claude plugin marketplace add patchorbit/domscribe
claude plugin install domscribe@domscribe

Installs the Domscribe plugin with MCP config and skills.

Your coding agent can read your code.It can't see your frontend.