Excalidraw MCP App Server

Excalidraw MCP rapide et en streaming — Générez de magnifiques diagrammes dessinés à la main directement dans votre client de chat IA.

---

📌 Aperçu

Excalidraw MCP est un serveur open-source de Model Context Protocol (MCP) créé par l'équipe Excalidraw. Il comble le fossé entre les modèles linguistiques IA et la création de diagrammes visuels en permettant aux clients IA (tels que Claude, ChatGPT, VS Code, Goose, etc.) de générer et de rendre des diagrammes interactifs de style dessinés à la main, alimentés par Excalidraw — le tout dans l'interface de chat elle-même.

Au lieu de simplement renvoyer des descriptions textuelles d'un diagramme, ce serveur MCP diffuse un canevas HTML interactif au client, avec un contrôle fluide de la caméra de visualisation et un mode d'édition en plein écran.

• GitHub : https://github.com/excalidraw/excalidraw-mcp
• Serveur en direct : https://excalidraw-mcp-app.vercel.app/mcp
• Étoiles : 1.1k+ ⭐
• Licence : MIT
• Dernière version : v0.3.2 (9 février 2026)

---

✨ Caractéristiques principales

• Diagrammes en streaming : Renvoie les diagrammes sous forme de HTML interactif et en direct, rendu directement dans la fenêtre de chat — pas d'images statiques.
• Esthétique dessinée à la main : Utilise le style visuel caractéristique d'Excalidraw, esquissé et dessiné à la main, pour tous les diagrammes générés.
• Contrôle fluide de la caméra : Prend en charge le panoramique et le zoom de la visualisation, permettant aux utilisateurs d'explorer confortablement de grands diagrammes.
• Édition en plein écran : Les utilisateurs peuvent ouvrir le diagramme généré dans un éditeur en plein écran pour apporter des modifications manuelles après la génération par l'IA.
• Standard MCP Apps : Construit sur l'extension officielle MCP Apps, qui permet aux serveurs de renvoyer des composants d'interface utilisateur interactifs riches plutôt que du texte brut.
• Support multi-clients : Fonctionne avec n'importe quel client compatible MCP — Claude, ChatGPT, VS Code Copilot, Goose, et d'autres.
• Déploiement facile : Déploiement en un clic sur Vercel sans variables d'environnement requises.

---

🏗️ Architecture

Invite utilisateur (ex: "Dessine un diagramme d'architecture")
        │
        ▼
  Client IA (Claude / ChatGPT / VS Code)
        │  Protocole MCP
        ▼
  Serveur Excalidraw MCP (Node.js / TypeScript)
        │  Diffuse du HTML interactif
        ▼
  Canevas Excalidraw (rendu dans l'interface de chat)
        │
        ▼
  L'utilisateur voit et modifie le diagramme en direct

Le serveur est écrit en TypeScript, servi via Vercel (serverless), et utilise Vite pour le regroupement frontend. Il suit le protocole MCP Apps pour intégrer un canevas Excalidraw complet en tant que réponse d'artefact interactif.

---

🚀 Démarrage

Option 1 : À distance (Recommandé)

Aucune installation nécessaire. Ajoutez l'URL suivante comme serveur MCP distant dans votre client :

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

Exemple Claude.ai : Paramètres → Connecteurs → Ajouter un connecteur personnalisé → collez l'URL.

Option 2 : Local via fichier d'extension

1. Téléchargez excalidraw-mcp-app.mcpb depuis la page des versions.
2. Double-cliquez pour installer dans Claude Desktop.

Option 3 : Compiler à partir des sources

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

Ajoutez ensuite à la configuration de votre Claude Desktop à ~/Library/Application Support/Claude/claude_desktop_config.json :

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

Redémarrez Claude Desktop et vous êtes prêt.

---

💬 Exemples d'invites

Une fois connecté, vous pouvez utiliser des invites en langage naturel comme :

• "Dessine un chat mignon en utilisant Excalidraw"
• "Dessine un diagramme d'architecture montrant un utilisateur se connectant à un serveur API qui communique avec une base de données"
• "Crée un organigramme d'un pipeline CI/CD"
• "Esquisse une topologie réseau avec 3 serveurs et un répartiteur de charge"

L'IA appellera le serveur MCP, qui générera le diagramme et le diffusera sous forme de canevas interactif dans le chat.

---

🛠️ Pile technologique

Couche	Technologie
Langage	TypeScript (90.1%), JavaScript (4.7%)
Frontend	Excalidraw, Vite, CSS
Backend	Node.js (serverless style Express)
Déploiement	Vercel
Protocole	Model Context Protocol (MCP) + extension MCP Apps

---

🌐 Auto-hébergement / Déploiement

Vous pouvez déployer votre propre instance sur Vercel en quelques minutes :

1. Forkez le dépôt.
2. Allez sur vercel.com/new et importez votre fork.
3. Aucune variable d'environnement n'est nécessaire — cliquez simplement sur Déployer.
4. Votre serveur sera disponible à l'adresse https://your-project.vercel.app/mcp.

---

🤝 Contributions

Les PR sont les bienvenus ! Le projet est activement maintenu par l'équipe Excalidraw et les contributeurs de la communauté. Pour contribuer :

1. Forkez le dépôt et clonez-le localement.
2. Exécutez npm install && npm run build pour configurer l'environnement de développement.
3. Apportez vos modifications et soumettez une pull request.

---

🔗 Ressources connexes

• Excalidraw (bibliothèque principale)
• Model Context Protocol (MCP)
• Documentation de l'extension MCP Apps
• GitHub MCP Apps

---

🏷️ Résumé

MCP — Il s'agit d'un serveur MCP basé sur le Model Context Protocol, permettant aux clients IA de générer et d'éditer interactivement des diagrammes de style dessinés à la main Excalidraw directement dans l'interface de chat.