draw2agent ✏️

Zeichne auf deiner Website. Dein KI-Agent sieht es.

draw2agent ist ein MCP-Server, mit dem du Anmerkungen direkt auf deiner lokalen Entwicklungsseite zeichnen kannst. Wenn du sie übermittelst, erhält dein IDE-Agent einen Screenshot, strukturierte DOM-Daten und den Anmerkungskontext, um präzise Codeänderungen vorzunehmen.

👉 Probiere es aus unter: draw2agent.vercel.app

Demo

Related MCP server: Browser Feedback MCP

Schnellstart

1. Zu deiner IDE hinzufügen (einmalig)

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

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

2. Verwenden

Sag deinem Agenten:

„Verwende draw2agent, um die Navigationsleiste zu korrigieren"

1. 🌐 Der Agent öffnet deinen Browser mit Zeichenwerkzeugen auf deiner Seite

2. ✏️ Zeichne Kreise, Pfeile oder Text direkt auf deiner Website

3. 📸 Klicke auf Übermitteln

4. 🤖 Der Agent liest den visuellen Kontext und wendet die Codeänderungen an

So funktioniert es

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

Tools

Der MCP-Server stellt die folgenden Tools bereit:

launch_canvas

Das Kern-Tool – es proxyt deinen lokalen Entwicklungsserver und fügt eine Excalidraw-Overlay-Ebene ein. Zeichne Anmerkungen direkt in deiner laufenden App und übermittle sie, um dem Agenten den visuellen Kontext zu senden. Das Tool blockiert, bis du übermittelst.

launch_ipad_canvas

Wie launch_canvas, stellt den Proxy jedoch über die lokale Netzwerkadresse (LAN) deines Computers bereit. Öffnet automatisch einen neuen Browser-Tab mit einem QR-Code. Scanne ihn von deinem iPad oder Telefon – verbunden mit dem selben WLAN-Netzwerk – um mit dem Finger zu zeichnen. Ideal für Whiteboard-Feedback-Sitzungen. Kein Internet-Tunnel erforderlich, daher schnell und zuverlässig.

launch_scratch

Öffnet ein leeres Excalidraw-Whiteboard – keine Ziel-URL erforderlich. Skizziere UI-Entwürfe, Wireframes oder Diagramme von Grund auf. Dein Agent erhält die Zeichnung und setzt sie um.

get_drawing_state

Liefert den zuletzt erfassten Zeichnungszustand (Screenshot, DOM-Knoten, Anmerkungen), ohne eine neue Sitzung zu starten. Nützlich, um den Kontext erneut abzurufen.

Veröffentlichung

Die Veröffentlichung auf npm wird über GitHub Actions automatisiert (.github/workflows/publish.yml). Um ein Release zu erstellen, erhöhe einfach die Version und pushe auf main:

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

Wenn sich die version in package.json auf main ändert, erstellt der Workflow den Server + das Overlay und veröffentlicht die neue Version auf npm. Du kannst ihn auch manuell über den Tab Actions auslösen (z. B. um die aktuelle Version zu veröffentlichen).

Einmalige Einrichtung: npm Trusted Publishing

Der Workflow authentifiziert sich über OIDC bei npm – kein NPM_TOKEN-Geheimnis erforderlich. Richte den vertrauenswürdigen Herausgeber einmalig ein:

1. Gehe zu npmjs.com/package/draw2agent → Einstellungen → Trusted Publisher.

2. Wähle GitHub Actions und gib Folgendes ein:

   • Organisation oder Benutzer: zero-abd

   • Repository: draw2agent

   • Workflow-Dateiname: publish.yml

3. Speichern.

Dies erfüllt auch die 2FA-Anforderung von npm, sodass die Veröffentlichung auch mit aktiviertem Konto-2FA funktioniert. (Alternative: Erstelle ein npm-Granular Access Token mit Veröffentlichungsrechten, füge es als NPM_TOKEN-Repository-Geheimnis hinzu und setze NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} im Veröffentlichungsschritt stattdessen.)

Lizenz

MIT