Skip to main content
Glama

excalidraw-ai — MCP-Server (KI-Schnittstelle zu Excalidraw)

Die saubere, nicht klobige Schnittstelle für eine KI, um einen Live-Excalidraw-Raum zu lesen, zu beobachten und zu bearbeiten. Statt Browser-Automatisierung (Faser-Lesen + Drag-and-Drop + Remote-Browser-Drops) tritt es dem Raum als Socket-Bot über das Kollaborations-Relay bei und spricht das AES-GCM-verschlüsselte Szenenprotokoll direkt — deterministisch, kopflos, skalierbar.

POC-Status: Kern-Bridge + MCP-Stdio-Oberfläche funktioniert Ende-zu-Ende gegen ein selbst gehostetes excalidraw-room-Relay (Selbsttest + MCP-Smoke-Test bestanden).

Warum ein Relay, das wir kontrollieren

Der Bot spricht mit einem Relay. Das gehostete Relay von Excalidraw (oss-collab.excalidraw.com) schützt Nicht-Browser-Bots durch Ursprungsprüfung (403/400), daher betreiben wir für unsere eigenen Räume excalidraw/excalidraw-room (MIT, gleicher Code wie Produktion) und richten eine Excalidraw-Benutzeroberfläche darauf aus über VITE_APP_WS_SERVER_URL.

Related MCP server: Excalidraw MCP Server

Architektur

Excalidraw UI (fork) ──socket.io──▶ relay (excalidraw-room) ◀──socket-bot── excalidraw-ai (MCP)
   (humans)                           self-hosted                 (the AI's interface)

Werkzeuge

Werkzeug

Was es tut

create_room

Neue Raum-ID/-Schlüssel für unser Relay

join_room

Raum betreten, Szene lesen, Lauschen starten

leave_room

Verbindung trennen

get_scene

Board-Elemente + Texte

get_changes

Hinzugefügte/aktualisierte/entfernte Deltas seit letztem Aufruf („Raum hören")

add_elements

Elemente anhängen (live ausstrahlen)

update_elements

Vorhandene verschieben/umbetiteln/umfärben (Versionserhöhung)

delete_elements

Als gelöscht markieren

Ausführen

npm install
# relay (one terminal):
cd /tmp/excalidraw-room && PORT=3002 node dist/index.js
# self-test the bridge core:
npm run selftest
# MCP smoke (stdio handshake + join + get_scene):
npm run mcp-smoke
# start the MCP server (stdio) — wire into Hermes/Copilot/Claude:
node src/server.js

In Hermes einbinden (~/.hermes/config.yaml)

mcp_servers:
  excalidraw_ai:
    command: "node"
    args: ["/root/workspace/mcclawd-org/excalidraw-ai/src/server.js"]

Hermes neu starten → Werkzeuge erscheinen als mcp_excalidraw_ai_*.

Aufbau

  • src/crypto.js — AES-GCM-E2E-Helfer (Node Web Crypto)

  • src/elements.js — Element-Builder + Szenen-Zusammenführung/Diff (ID+Versions-Semantik)

  • src/room.js — RoomClient: Socket-Beitritt, Lesen, Schreiben, Änderungs-Feed

  • src/server.js — MCP-Server (Stdio), Werkzeug-Registrierung

  • scripts/selftest.mjs, scripts/mcp-smoke.mjs — Verifizierung

Related MCP Connectors

Related MCP Servers

  • A
    license
    Not graded
    quality
    D
    maintenance
    Enables AI agents to programmatically control a live Excalidraw canvas through element-level CRUD operations and real-time synchronization. It allows agents to iteratively build, inspect, and refine diagrams while providing visual feedback via screenshots and scene descriptions.
    3,166 npm
    MIT
  • A
    license
    Not graded
    quality
    D
    maintenance
    Enables AI agents to programmatically control a live Excalidraw canvas with element-level CRUD operations and real-time synchronization. It supports iterative diagramming through scene descriptions, screenshots, and advanced layout tools for collaborative AI-human workflows.
    3,166 npm
    2
    MIT
  • F
    license
    Not graded
    quality
    B
    maintenance
    Standalone backend for a self-hosted Excalidraw fork with per-board access control, providing an MCP remote endpoint that lets AI agents draw on real collaboration boards as specific users.
    -