draw2agent ✏️

Dibuja en tu sitio web. Tu agente de IA lo ve.

draw2agent es un servidor MCP que te permite dibujar anotaciones directamente sobre tu página de desarrollo local. Cuando envías, tu agente de IDE recibe una captura de pantalla, datos DOM estructurados y contexto de anotaciones para realizar ediciones de código precisas.

👉 Pruébalo en: draw2agent.vercel.app

Demo

Related MCP server: Peek

Inicio rápido

1. Añádelo a tu IDE (una sola vez)

Cursor (~/.cursor/mcp.json):

{
  "mcpServers": {
    "draw2agent": {
      "command": "npx",
      "args": ["-y", "draw2agent@latest"]
    }
  }
}

2. Úsalo

Dile a tu agente:

"Usa draw2agent para arreglar la barra de navegación"

1. 🌐 El agente abre tu navegador con herramientas de dibujo en tu página

2. ✏️ Dibuja círculos, flechas, texto directamente en tu sitio web

3. 📸 Haz clic en Enviar

4. 🤖 El agente lee el contexto visual y aplica los cambios de código

Cómo funciona

Your Dev Page (proxied)
├── Your original page content
└── Excalidraw overlay (transparent, on top)
    ├── Draw mode: annotate directly on the page
    ├── Select mode: interact with the page normally (Esc)
    └── Submit: screenshot + DOM + annotations → agent

Herramientas

El servidor MCP expone las siguientes herramientas:

launch_canvas

La herramienta principal: hace de proxy a tu servidor de desarrollo local e inyecta una superposición de Excalidraw. Dibuja anotaciones directamente en tu aplicación en ejecución y luego envía para proporcionar contexto visual a tu agente. La herramienta se bloquea hasta que envías.

launch_ipad_canvas

Igual que launch_canvas, pero sirve el proxy en la dirección de red local (LAN) de tu computadora. Abre automáticamente una nueva pestaña del navegador en tu computadora con un código QR. Escanéalo desde tu iPad o teléfono — conectado a la misma red Wi-Fi — para dibujar anotaciones con el tacto. Perfecto para sesiones de retroalimentación estilo pizarra. No se necesita túnel de internet, por lo que es rápido y confiable.

launch_scratch

Abre una pizarra Excalidraw en blanco — no se necesita URL de destino. Dibuja maquetas de UI, wireframes o diagramas desde cero. Tu agente recibe el dibujo e implementa el diseño.

get_drawing_state

Devuelve el último estado de dibujo capturado (captura de pantalla, nodos DOM, anotaciones) sin iniciar una nueva sesión. Útil para volver a obtener contexto.

Publicación

La publicación a npm está automatizada mediante GitHub Actions (.github/workflows/publish.yml). Para hacer un lanzamiento, solo aumenta la versión y haz push a main:

npm version patch   # or minor / major — updates package.json
git push origin main

Cuando la version de package.json cambia en main, el flujo de trabajo compila el servidor + la superposición y publica la nueva versión en npm. También puedes activarlo manualmente desde la pestaña Actions (por ejemplo, para publicar la versión actual).

Configuración única: npm Trusted Publishing

El flujo de trabajo se autentica con npm mediante OIDC — no se necesita el secreto NPM_TOKEN. Configura el editor de confianza una vez:

1. Ve a npmjs.com/package/draw2agent → Settings → Trusted Publisher.

2. Elige GitHub Actions e introduce:

   • Organización o usuario: zero-abd

   • Repositorio: draw2agent

   • Nombre del archivo de flujo de trabajo: publish.yml

3. Guarda.

Esto también satisface el requisito de 2FA de npm, por lo que la publicación funciona incluso con la 2FA de la cuenta habilitada. (Alternativa: crea un Granular Access Token de npm con derechos de publicación, añádelo como secreto del repositorio NPM_TOKEN y establece NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} en el paso de publicación en su lugar).

Licencia

MIT