domscribe

Overview

Domscribe is a pixel-to-code development tool that provides bidirectional communication between AI coding agents and running web applications. It allows agents to query DOM elements by source location and lets developers click UI elements to guide agents to the exact code locations. The tool supports multiple frameworks (React, Vue, Next.js, Nuxt) and bundlers (Vite, Webpack, Turbopack) while maintaining zero production impact through build-time instrumentation stripping.

Try asking AI

After installing, here are 5 things you can ask your AI assistant:

• domscribe.query.bySourcedomscribe.query.bySource(file: string, line: number)

  Query live DOM snapshot, props, state, and attributes from a specific source file location

  Try:Check what the button at src/components/Button.tsx:15 looks like in the browserTry:Show me the props and state of the component at src/components/Header.tsx:23
• domscribe.process.annotationsdomscribe.process.annotations()

  Process annotations submitted via the browser overlay for implementing changes

  Try:Process any pending UI change requestsTry:Check if there are any new annotations to implement

Note: The README mentions '12 tools and 4 prompts via MCP' but only details two main functions (query.bySource and process.annotations). The other 10 tools aren't explicitly named in the provided text.

Comparable tools

Installation

npx domscribe init

npm install -D @domscribe/react

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

{
  "mcpServers": {
    "domscribe": {
      "command": "npx",
      "args": ["domscribe", "mcp"]
    }
  }
}

FAQ

Does this work with production applications?

No, Domscribe is designed for development only and is completely stripped from production builds with zero runtime impact.

Which AI coding agents are supported?

Domscribe provides plugins for Claude Code, GitHub Copilot, Gemini CLI, Amazon Kiro, and Cursor, with an MCP interface for any compatible agent.

On Hacker News

Recent discussion from the developer community.

• Show HN: Domscribe – Deterministic DOM-to-source mapping for AI coding agents▲ 2
  Story by NarratorTD · 2026-03-31

Compare domscribe with