domscribe

= 20" />

---

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.

---

Getting Started

npx domscribe init

The setup wizard walks you through two steps:

1. Connect your coding agent — select your agent (Claude Code, Copilot, Gemini, Kiro, or others) and the wizard installs the plugin automatically.
2. 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 the manual setup instructions below.

---

Features

Code → UI: Let the agent see the browser

Your agent calls domscribe.query.bySource with a file path and line number and gets back the live DOM snapshot, current props, component state, and rendered attributes — directly from the running browser. No human interaction needed.

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.

UI → Code: Point and tell

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.

More

• 🎯 Build-time stable IDs — deterministic data-ds attributes injected via AST, stable across HMR and fast refresh
• 🧩 Framework-agnostic — React 18-19, Vue 3, Next.js 15-16, Nuxt 3+, with an extensible adapter interface
• 📦 Any bundler — Vite 5-8, Webpack 5, Turbopack (Vite 8 support requires Domscribe 0.7.0 or later)
• 🔍 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

---

Manual Setup

Note npx domscribe init handles both steps below automatically. Use manual setup only if you need finer control.

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

App-Side — Add to Your Bundler

Next.js (15 + 16) — 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);

Nuxt 3+ — npm install -D @domscribe/nuxt

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

React 18–19 — npm install -D @domscribe/react

Vite plugin:

// 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 plugin:

// 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,
    }),
  ],
};

Vue 3+ — npm install -D @domscribe/vue

Vite plugin:

// 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 plugin:

// 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,
    }),
  ],
};

Any framework — npm install -D @domscribe/transform (DOM→source mapping only, no runtime capture)

Vite plugin:

// vite.config.ts
import { defineConfig } from 'vite';
import { domscribe } from '@domscribe/transform/plugins/vite';

export default defineConfig({
  plugins: [domscribe()],
});

Webpack plugin:

// 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: See packages/domscribe-test-fixtures/fixtures/ for complete app setups across every supported framework and bundler combination.

For plugin configuration options, see the @domscribe/transform README.

Monorepos

If your frontend app is in a subdirectory (e.g. apps/web), pass --app-root during init:

npx domscribe init --app-root apps/web

Or run npx domscribe init and follow the prompts — the wizard asks if you're in a monorepo.

This creates a domscribe.config.json at your repo root that tells all Domscribe tools where your app lives. CLI commands (serve, stop, status) and agent MCP connections automatically resolve the app root from this config — no extra flags needed.

Agent-Side — Connect Your Coding Agent

Domscribe exposes 12 tools and 4 prompts via MCP. Agent plugins bundle the MCP config and a skill file that teaches the agent how to use the tools effectively.

Claude Code

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

GitHub Copilot

copilot plugin install patchorbit/domscribe

Gemini CLI

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

Amazon Kiro

Open the Powers panel → Add power from GitHub → enter https://github.com/patchorbit/domscribe/tree/main/domscribe-power.

Cursor