Excalidraw MCP App Server

Schnelle und streamfähige Excalidraw MCP App — Erstellen Sie wunderschöne handgezeichnete Diagramme direkt in Ihrem KI-Chat-Client.

---

📌 Übersicht

Excalidraw MCP ist ein Open-Source Model Context Protocol (MCP) Server, der vom Excalidraw-Team entwickelt wurde. Er schließt die Lücke zwischen KI-Sprachmodellen und visueller Diagrammerstellung, indem er es KI-Clients (wie Claude, ChatGPT, VS Code, Goose usw.) ermöglicht, interaktive, handgezeichnete Diagramme zu generieren und zu rendern, die von Excalidraw angetrieben werden – alles innerhalb der Chat-Oberfläche selbst.

Anstatt nur Textbeschreibungen eines Diagramms zurückzugeben, streamt dieser MCP-Server eine interaktive HTML-Leinwand an den Client, komplett mit reibungsloser Steuerung der Ansichtskamera und einem Vollbild-Bearbeitungsmodus.

• GitHub: https://github.com/excalidraw/excalidraw-mcp
• Live-Server: https://excalidraw-mcp-app.vercel.app/mcp
• Sterne: 1,1k+ ⭐
• Lizenz: MIT
• Neuestes Release: v0.3.2 (9. Februar 2026)

---

✨ Hauptmerkmale

• Streamfähige Diagramme: Gibt Diagramme als live, interaktive HTML-Elemente zurück, die direkt im Chatfenster gerendert werden – keine statischen Bilder.
• Handgezeichnete Ästhetik: Nutzt den charakteristischen skizzenhaften, handgezeichneten visuellen Stil von Excalidraw für alle generierten Diagramme.
• Reibungslose Kamerasteuerung: Unterstützt das Schwenken und Zoomen der Ansicht, damit Benutzer große Diagramme bequem erkunden können.
• Vollbildbearbeitung: Benutzer können das generierte Diagramm in einem Vollbildeditor öffnen, um nach der KI-Generierung manuelle Anpassungen vorzunehmen.
• MCP Apps Standard: Basiert auf der offiziellen MCP Apps-Erweiterung, die es Servern ermöglicht, reichhaltige interaktive UI-Komponenten anstelle von einfachem Text zurückzugeben.
• Multi-Client-Unterstützung: Funktioniert mit jedem MCP-kompatiblen Client – Claude, ChatGPT, VS Code Copilot, Goose und anderen.
• Einfache Bereitstellung: Ein-Klick-Bereitstellung auf Vercel ohne erforderliche Umgebungsvariablen.

---

🏗️ Architektur

Benutzeraufforderung (z. B. "Zeichne ein Architekturdiagramm")
        │
        ▼
  KI-Client (Claude / ChatGPT / VS Code)
        │  MCP-Protokoll
        ▼
  Excalidraw MCP Server (Node.js / TypeScript)
        │  Streamt interaktives HTML
        ▼
  Excalidraw Canvas (gerendert in der Chat-UI)
        │
        ▼
  Benutzer sieht und bearbeitet das Diagramm live

Der Server ist in TypeScript geschrieben, wird über Vercel (serverless) bereitgestellt und verwendet Vite für das Frontend-Bundling. Er folgt dem MCP Apps-Protokoll, um eine vollständige Excalidraw-Leinwand als interaktive Artefaktantwort einzubetten.

---

🚀 Erste Schritte

Option 1: Remote (Empfohlen)

Keine Installation erforderlich. Fügen Sie die folgende URL als Remote-MCP-Server in Ihrem Client hinzu:

https://excalidraw-mcp-app.vercel.app/mcp

Beispiel für Claude.ai: Einstellungen → Konnektoren → Benutzerdefinierten Konnektor hinzufügen → URL einfügen.

Option 2: Lokal über Erweiterungsdatei

1. Laden Sie excalidraw-mcp-app.mcpb von der Releases-Seite herunter.
2. Doppelklicken Sie darauf, um sie in Claude Desktop zu installieren.

Option 3: Aus dem Quellcode erstellen

git clone https://github.com/excalidraw/excalidraw-mcp.git
cd excalidraw-mcp
npm install && npm run build

Fügen Sie dann Ihre Claude Desktop-Konfiguration unter ~/Library/Application Support/Claude/claude_desktop_config.json hinzu:

{
  "mcpServers": {
    "excalidraw": {
      "command": "node",
      "args": ["/path/to/excalidraw-mcp/dist/index.js", "--stdio"]
    }
  }
}

Starten Sie Claude Desktop neu und Sie sind bereit.

---

💬 Beispiel-Prompts

Sobald Sie verbunden sind, können Sie natürliche Sprachaufforderungen verwenden wie:

• "Zeichne eine süße Katze mit Excalidraw"
• "Zeichne ein Architekturdiagramm, das zeigt, wie ein Benutzer sich mit einem API-Server verbindet, der mit einer Datenbank spricht"
• "Erstelle ein Flussdiagramm einer CI/CD-Pipeline"
• "Skizziere eine Netzwerktopologie mit 3 Servern und einem Load Balancer"

Die KI ruft den MCP-Server auf, der das Diagramm generiert und es als interaktive Leinwand im Chat zurückstreamt.

---

🛠️ Tech Stack

Ebene	Technologie
Sprache	TypeScript (90,1%), JavaScript (4,7%)
Frontend	Excalidraw, Vite, CSS
Backend	Node.js (Express-ähnlicher Serverless)
Bereitstellung	Vercel
Protokoll	Model Context Protocol (MCP) + MCP Apps-Erweiterung

---

🌐 Self-Hosting / Bereitstellung

Sie können Ihre eigene Instanz in wenigen Minuten auf Vercel bereitstellen:

1. Forken Sie das Repository.
2. Gehen Sie zu vercel.com/new und importieren Sie Ihren Fork.
3. Es sind keine Umgebungsvariablen erforderlich – klicken Sie einfach auf Deploy.
4. Ihr Server wird unter https://your-project.vercel.app/mcp verfügbar sein.

---

🤝 Mitwirkung

Pull-Requests sind willkommen! Das Projekt wird aktiv vom Excalidraw-Team und Community-Mitwirkenden gepflegt. Um mitzuwirken:

1. Forken Sie das Repository und klonen Sie es lokal.
2. Führen Sie npm install && npm run build aus, um die Entwicklungsumgebung einzurichten.
3. Nehmen Sie Ihre Änderungen vor und reichen Sie einen Pull-Request ein.

---

🔗 Verwandte Ressourcen

• Excalidraw (Kernbibliothek)
• Model Context Protocol (MCP)
• MCP Apps Extension Docs
• MCP Apps GitHub

---

🏷️ Zusammenfassung

MCP — Dies ist ein MCP-Server, der auf dem Model Context Protocol basiert und es KI-Clients ermöglicht, handgezeichnete Diagramme im Excalidraw-Stil direkt in der Chat-Oberfläche zu generieren und interaktiv zu bearbeiten.