Excalidraw MCP App Server

Excalidraw MCP rápido y transmitible — Genere hermosos diagramas dibujados a mano directamente dentro de su cliente de chat de IA.

---

📌 Descripción general

Excalidraw MCP es un servidor de Protocolo de Contexto de Modelo (MCP) de código abierto creado por el equipo de Excalidraw. Cierra la brecha entre los modelos de lenguaje de IA y la diagramación visual al permitir que los clientes de IA (como Claude, ChatGPT, VS Code, Goose, etc.) generen y rendericen diagramas interactivos, al estilo de dibujo a mano, impulsados por Excalidraw — todo dentro de la propia interfaz de chat.

En lugar de simplemente devolver descripciones textuales de un diagrama, este servidor MCP transmite un lienzo HTML interactivo de vuelta al cliente, completo con un control de cámara de vista fluida y un modo de edición a pantalla completa.

• GitHub: https://github.com/excalidraw/excalidraw-mcp
• Servidor en vivo: https://excalidraw-mcp-app.vercel.app/mcp
• Estrellas: 1.1k+ ⭐
• Licencia: MIT
• Última versión: v0.3.2 (9 de febrero de 2026)

---

✨ Características clave

• Diagramas transmitibles: Devuelve diagramas como HTML en vivo e interactivo renderizado directamente en la ventana de chat, no imágenes estáticas.
• Estética de dibujo a mano: Aprovecha el estilo visual distintivo, esbozado y dibujado a mano de Excalidraw para todos los diagramas generados.
• Control de cámara fluido: Admite el desplazamiento y zoom de la vista para que los usuarios puedan explorar diagramas grandes cómodamente.
• Edición a pantalla completa: Los usuarios pueden abrir el diagrama generado en un editor a pantalla completa para realizar ajustes manuales después de la generación de IA.
• Estándar de aplicaciones MCP: Construido sobre la extensión oficial de aplicaciones MCP, que permite a los servidores devolver componentes de interfaz de usuario interactivos enriquecidos en lugar de texto plano.
• Soporte multi-cliente: Funciona con cualquier cliente compatible con MCP: Claude, ChatGPT, VS Code Copilot, Goose y otros.
• Despliegue fácil: Despliegue con un solo clic en Vercel sin necesidad de variables de entorno.

---

🏗️ Arquitectura

Indicación del usuario (por ejemplo, "Dibuja un diagrama de arquitectura")
        │
        ▼
  Cliente de IA (Claude / ChatGPT / VS Code)
        │  Protocolo MCP
        ▼
  Servidor Excalidraw MCP (Node.js / TypeScript)
        │  Transmite HTML interactivo
        ▼
  Lienzo Excalidraw (renderizado en la interfaz de chat)
        │
        ▼
  El usuario ve y edita el diagrama en vivo

El servidor está escrito en TypeScript, se sirve a través de Vercel (sin servidor) y utiliza Vite para la agrupación del frontend. Sigue el protocolo de aplicaciones MCP para incrustar un lienzo Excalidraw completo como un artefacto de respuesta interactivo.

---

🚀 Primeros pasos

Opción 1: Remoto (Recomendado)

No se necesita instalación. Agregue la siguiente URL como un servidor MCP remoto en su cliente:

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

Ejemplo de Claude.ai: Configuración → Conectores → Agregar conector personalizado → pegue la URL.

Opción 2: Local a través del archivo de extensión

1. Descargue excalidraw-mcp-app.mcpb de la página de Lanzamientos.
2. Haga doble clic para instalar en Claude Desktop.

Opción 3: Compilar desde el código fuente

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

Luego, agréguelo a la configuración de su Claude Desktop en ~/Library/Application Support/Claude/claude_desktop_config.json:

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

Reinicie Claude Desktop y estará listo para usar.

---

💬 Ejemplos de indicaciones

Una vez conectado, puede usar indicaciones en lenguaje natural como:

• "Dibuja un gato lindo usando Excalidraw"
• "Dibuja un diagrama de arquitectura que muestre a un usuario conectándose a un servidor API que habla con una base de datos"
• "Crea un diagrama de flujo de un pipeline CI/CD"
• "Esboza una topología de red con 3 servidores y un balanceador de carga"

La IA llamará al servidor MCP, que generará el diagrama y lo transmitirá de vuelta como un lienzo interactivo en el chat.

---

🛠️ Pila tecnológica

Capa	Tecnología
Idioma	TypeScript (90.1%), JavaScript (4.7%)
Frontend	Excalidraw, Vite, CSS
Backend	Node.js (serverless estilo Express)
Despliegue	Vercel
Protocolo	Protocolo de Contexto de Modelo (MCP) + extensión MCP Apps

---

🌐 Autoalojamiento / Despliegue

Puede desplegar su propia instancia en Vercel en minutos:

1. Bifurque el repositorio.
2. Vaya a vercel.com/new e importe su bifurcación.
3. No se necesitan variables de entorno; simplemente haga clic en Desplegar.
4. Su servidor estará disponible en https://your-project.vercel.app/mcp.

---

🤝 Contribuciones

¡Las PR son bienvenidas! El proyecto es mantenido activamente por el equipo de Excalidraw y los colaboradores de la comunidad. Para contribuir:

1. Bifurque el repositorio y clónelo localmente.
2. Ejecute npm install && npm run build para configurar el entorno de desarrollo.
3. Realice sus cambios y envíe una solicitud de extracción.

---

🔗 Recursos relacionados

• Excalidraw (biblioteca principal)
• Protocolo de Contexto de Modelo (MCP)
• Documentación de la extensión MCP Apps
• GitHub de MCP Apps

---

🏷️ Resumen

MCP — Este es un servidor MCP construido sobre el Protocolo de Contexto de Modelo, que permite a los clientes de IA generar e interactuar con diagramas al estilo de dibujo a mano de Excalidraw directamente dentro de la interfaz de chat.