Domscribe

Domscribe

Los agentes de codificación con IA editan tus archivos fuente a ciegas: no pueden ver tu frontend en ejecución, y tu frontend no puede indicarles dónde buscar.

Domscribe conecta ambas direcciones: haz clic en un elemento del DOM para decirle a tu agente qué cambiar, o deja que tu agente consulte cualquier ubicación del código fuente para ver exactamente cómo se ve en vivo en el navegador. IDs estables en tiempo de compilación, contexto de ejecución profundo (props, estado, DOM), independiente del framework, compatible con cualquier agente MCP. Cero impacto en producción.

Primeros pasos

npx domscribe init

El asistente de configuración te guía por dos pasos:

1. Conecta tu agente de codificación — selecciona tu agente (Claude Code, Copilot, Gemini, Kiro u otros) y el asistente instala el plugin automáticamente.
2. Añádelo a tu aplicación — selecciona tu framework y bundler, el asistente instala el paquete correcto y te muestra el fragmento de configuración que debes añadir.

Eso es todo. Inicia tu servidor de desarrollo y estarás listo.

¿Prefieres configurar todo manualmente o necesitas un control más preciso? Consulta las instrucciones de configuración manual a continuación.

Características

Código → UI: Deja que el agente vea el navegador

Tu agente llama a domscribe.query.bySource con una ruta de archivo y un número de línea, y recibe la instantánea del DOM en vivo, las props actuales, el estado del componente y los atributos renderizados, directamente desde el navegador en ejecución. No se necesita interacción humana.

[!TIP] Los agentes no consultan el estado de ejecución espontáneamente; indícales explícitamente: "Arregla el color del botón: usa domscribe para comprobar qué clases CSS tiene antes de cambiar nada." Tu servidor de desarrollo debe estar en ejecución con la página objetivo abierta en el navegador.

UI → Código: Señala y di

Haz clic en cualquier elemento de la superposición del navegador, describe el cambio en lenguaje natural y envíalo. Domscribe captura la ubicación del elemento en el código fuente, el contexto de ejecución y tu instrucción como anotación. El agente la reclama, navega al archivo y la línea exactos, e implementa el cambio. La superposición muestra la respuesta del agente en tiempo real mediante WebSocket.

Más

• 🎯 IDs estables en tiempo de compilación — atributos data-ds deterministas inyectados mediante AST, estables en HMR y fast refresh
• 🧩 Independiente del framework — React 18-19, Vue 3, Next.js 15-16, Nuxt 3+, con una interfaz de adaptadores extensible
• 📦 Cualquier bundler — Vite 5-7, Webpack 5, Turbopack
• 🔍 Captura de ejecución profunda — props en vivo, estado e instantáneas del DOM mediante recorrido de fibras de React e inspección de VNodes de Vue
• 🛡️ Cero impacto en producción — toda la instrumentación se elimina en las compilaciones de producción, garantizado en CI
• 🔒 Redacción de PII — correos electrónicos, tokens y patrones sensibles se eliminan automáticamente antes de salir del navegador
• 📁 Las anotaciones viven en tu repositorio — se almacenan como archivos JSON en .domscribe/annotations/, expuestos mediante APIs REST que MCP envuelve para el acceso del agente
• 📡 Retroalimentación en tiempo real — el relé WebSocket envía las respuestas del agente a la superposición del navegador a medida que ocurren

Configuración manual

[!NOTE] npx domscribe init maneja ambos pasos a continuación automáticamente. Usa la configuración manual solo si necesitas un control más preciso.

Domscribe tiene dos lados: lado de la aplicación (plugins de bundler + framework) y lado del agente (MCP para tu agente de codificación). Ambos son necesarios para el flujo de trabajo completo.

Lado de la aplicación — Añádelo a tu bundler

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

Ejemplos funcionales: Consulta packages/domscribe-test-fixtures/fixtures/ para configuraciones completas de aplicaciones en cada combinación de framework y bundler compatible.

Para opciones de configuración del plugin, consulta el README de @domscribe/transform.

Monorepos

Si tu aplicación frontend está en un subdirectorio (p. ej., apps/web), pasa --app-root durante la inicialización:

npx domscribe init --app-root apps/web

O ejecuta npx domscribe init y sigue las indicaciones: el asistente pregunta si estás en un monorepo.

Esto crea un domscribe.config.json en la raíz de tu repositorio que indica a todas las herramientas de Domscribe dónde está tu aplicación. Los comandos CLI (serve, stop, status) y las conexiones MCP del agente resuelven automáticamente la raíz de la aplicación desde esta configuración, sin necesidad de banderas adicionales.

Lado del agente — Conecta tu agente de codificación

Domscribe expone 12 herramientas y 4 prompts mediante MCP. Los plugins del agente incluyen la configuración MCP y un archivo de habilidades que enseña al agente a usar las herramientas de manera efectiva.

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

Abre el panel de Powers → Añadir power desde GitHub → introduce https://github.com/patchorbit/domscribe/tree/main/domscribe-power.

Cursor

Cualquier agente (Skills y MCP)

Instala las skills de Domscribe:

npx skills add patchorbit/domscribe

Luego añade esta configuración MCP a tu agente:

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

Cómo funciona

1. Inyección. El plugin del bundler analiza cada archivo fuente, inyecta IDs data-ds estables en HMR mediante xxhash64 y registra cada mapeo en .domscribe/manifest.jsonl.

2. Captura. Los adaptadores de framework (recorrido de fibras de React, inspección de VNodes de Vue) extraen props en vivo, estado y metadatos del componente. La interfaz de superposición te permite hacer clic en cualquier elemento y ver su contexto completo.

3. Relé. Un daemon Fastify en localhost conecta el navegador y tu agente mediante REST, WebSocket y MCP stdio. Un bloqueo de archivo evita instancias duplicadas entre reinicios del servidor de desarrollo.

4. Agente. Tu agente de codificación se conecta mediante MCP para consultar por código fuente (ver cómo se ve cualquier línea en vivo) o procesar anotaciones (reclamar, implementar y responder a solicitudes de cambio de la UI).

Comparación

Ningún competidor combina IDs estables en tiempo de compilación, captura de ejecución profunda, consultas bidireccionales código fuente↔DOM y una superficie de herramientas MCP de forma independiente del framework.

Herramientas MCP

La superficie orientada al agente — herramientas, prompts, esquemas de cableado y envoltura de errores — se enumera a continuación como un índice legible por humanos.

Consulta el @domscribe/mcp README para ver esquemas detallados de herramientas, formatos de respuesta y definiciones de prompts.

Paquetes

Contribuciones

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

Las convenciones están en .claude/rules/. Se aceptan PRs.

Licencia

MIT