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.

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 themanual setupinstructions below.

[!TIP] Agents don't spontaneously query runtime state — prompt them explicitly:"Fix the button color — use domscribe to check what CSS classes it has before changing anything."Your dev server must be running with the target page open in the browser.

Click any element in the browser overlay, describe the change in plain English, and submit. Domscribe captures the element's source location, runtime context, and your instruction as an annotation. The agent claims it, navigates to the exact file and line, and implements the change. The overlay shows the agent's response in real time via WebSocket.

- 🎯Build-time stable IDs— deterministicdata-dsattributes injected via AST, stable across HMR and fast refresh
- 🧩Framework-agnostic— React 18-19, Vue 3, Next.js 15-16, Nuxt 3+, with anextensible adapter interface
- 📦Any bundler— Vite 5-7, Webpack 5, Turbopack
- 🔍Deep runtime capture— live props, state, and DOM snapshots via React fiber walking and Vue VNode inspection
- 🛡️Zero production impact— all instrumentation stripped in production builds, enforced in CI
- 🔒PII redaction— emails, tokens, and sensitive patterns automatically scrubbed before leaving the browser
- 📁Annotations live in your repo— stored as JSON files in.domscribe/annotations/, exposed via REST APIs that MCP wraps for agent access
- 📡Real-time feedback— WebSocket relay pushes agent responses to the browser overlay as they happen

[!NOTE]npx domscribe inithandles both steps below automatically. Use manual setup only if you need finer control.

Domscribe has two sides:app-side(bundler + framework plugins) andagent-side(MCP for your coding agent). Both are needed for the full workflow.

// next.config.ts import type { NextConfig } from 'next'; import { withDomscribe } from '@domscribe/next'; const nextConfig: NextConfig = {}; export default withDomscribe()(nextConfig);

// nuxt.config.ts export default defineNuxtConfig({ modules: ['@domscribe/nuxt'], });

// vite.config.ts import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import { domscribe } from '@domscribe/react/vite'; export default defineConfig({ plugins: [react(), domscribe()], });

// webpack.config.js const { DomscribeWebpackPlugin } = require('@domscribe/react/webpack'); const isDevelopment = process.env.NODE_ENV !== 'production'; module.exports = { module: { rules: [ { test: /\.[jt]sx?$/, exclude: /node_modules/, enforce: 'pre', use: [ { loader: '@domscribe/transform/webpack-loader', options: { enabled: isDevelopment }, }, ], }, ], }, plugins: [ new DomscribeWebpackPlugin({ enabled: isDevelopment, overlay: true, }), ], };

// vite.config.ts import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import { domscribe } from '@domscribe/vue/vite'; export default defineConfig({ plugins: [vue(), domscribe()], });

// webpack.config.js const { DomscribeWebpackPlugin } = require('@domscribe/vue/webpack'); const isDevelopment = process.env.NODE_ENV !== 'production'; module.exports = { module: { rules: [ { test: /\.[jt]sx?$/, exclude: /node_modules/, enforce: 'pre', use: [ { loader: '@domscribe/transform/webpack-loader', options: { enabled: isDevelopment }, }, ], }, ], }, plugins: [ new DomscribeWebpackPlugin({ enabled: isDevelopment, overlay: true, }), ], };

// vite.config.ts import { defineConfig } from 'vite'; import { domscribe } from '@domscribe/transform/plugins/vite'; export default defineConfig({ plugins: [domscribe()], });

// webpack.config.js const { DomscribeWebpackPlugin, } = require('@domscribe/transform/plugins/webpack'); const isDevelopment = process.env.NODE_ENV !== 'production'; module.exports = { module: { rules: [ { test: /\.[jt]sx?$/, exclude: /node_modules/, enforce: 'pre', use: [ { loader: '@domscribe/transform/webpack-loader', options: { enabled: isDevelopment }, }, ], }, ], }, plugins: [ new DomscribeWebpackPlugin({ enabled: isDevelopment, overlay: true, }), ], };

Working examples:Seepackages/domscribe-test-fixtures/fixtures/for complete app setups across every supported framework and bundler combination.

For plugin configuration options, see the@domscribe/transformREADME.

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

copilot plugin install patchorbit/domscribe

gemini extensions install https://github.com/patchorbit/domscribe

{ "mcpServers": { "domscribe": { "type": "stdio", "command": "npx", "args": ["-y", "@domscribe/mcp"] } } }

1. Inject.The bundler plugin parses each source file, injects HMR-stabledata-dsIDs 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 UI 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 toquery by source(see what any line looks like live) orprocess annotations(claim, implement, and respond to UI change requests).

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.

The agent-facing surface — tools, prompts, wire schemas, and error envelope — is listed below as a human-readable index.

See the@domscribe/mcpREADMEfor detailed tool schemas, response formats, and prompt definitions.

pnpm install nx run-many -t build test lint typecheck

Build and deploy full-stack Next.js apps with 98 tools for React, AWS, and MongoDB