Excalidraw MCP App Server

Excalidraw MCP rápido e transmitível — Gere diagramas bonitos desenhados à mão diretamente no seu cliente de chat de IA.

---

📌 Visão Geral

Excalidraw MCP é um servidor open-source do Model Context Protocol (MCP) construído pela equipe Excalidraw. Ele preenche a lacuna entre modelos de linguagem de IA e diagramação visual, permitindo que clientes de IA (como Claude, ChatGPT, VS Code, Goose, etc.) gerem e renderizem diagramas interativos, no estilo desenhado à mão, alimentados por Excalidraw — tudo dentro da própria interface de chat.

Em vez de apenas retornar descrições textuais de um diagrama, este servidor MCP transmite um canvas HTML interativo de volta para o cliente, completo com controle suave da câmera de visualização e um modo de edição em tela cheia.

• GitHub: https://github.com/excalidraw/excalidraw-mcp
• Servidor ao Vivo: https://excalidraw-mcp-app.vercel.app/mcp
• Estrelas: 1.1k+ ⭐
• Licença: MIT
• Último Lançamento: v0.3.2 (9 de fevereiro de 2026)

---

✨ Principais Recursos

• Diagramas Transmissíveis: Retorna diagramas como HTML vivo e interativo renderizado diretamente na janela de chat — não imagens estáticas.
• Estética Desenhada à Mão: Utiliza o estilo visual característico e rabiscado do Excalidraw para todos os diagramas gerados.
• Controle Suave da Câmera: Suporta pan e zoom da visualização para que os usuários possam explorar diagramas grandes confortavelmente.
• Edição em Tela Cheia: Os usuários podem abrir o diagrama gerado em um editor em tela cheia para fazer ajustes manuais após a geração pela IA.
• Padrão MCP Apps: Construído sobre a extensão oficial MCP Apps, que permite aos servidores retornar componentes de UI interativos ricos em vez de texto simples.
• Suporte Multi-cliente: Funciona com qualquer cliente compatível com MCP — Claude, ChatGPT, VS Code Copilot, Goose e outros.
• Implantação Fácil: Implantação com um clique no Vercel sem a necessidade de variáveis de ambiente.

---

🏗️ Arquitetura

Prompt do Usuário (ex: "Desenhe um diagrama de arquitetura")
        │
        ▼
  Cliente de IA (Claude / ChatGPT / VS Code)
        │  Protocolo MCP
        ▼
  Servidor Excalidraw MCP (Node.js / TypeScript)
        │  Transmite HTML interativo
        ▼
  Canvas Excalidraw (renderizado na UI do chat)
        │
        ▼
  Usuário vê e edita o diagrama ao vivo

O servidor é escrito em TypeScript, servido via Vercel (serverless) e usa Vite para o empacotamento do frontend. Ele segue o protocolo MCP Apps para incorporar um canvas Excalidraw completo como uma resposta de artefato interativo.

---

🚀 Primeiros Passos

Opção 1: Remoto (Recomendado)

Nenhuma instalação necessária. Adicione o seguinte URL como um servidor MCP remoto no seu cliente:

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

Exemplo Claude.ai: Configurações → Conectores → Adicionar conector personalizado → cole o URL.

Opção 2: Local via Arquivo de Extensão

1. Baixe excalidraw-mcp-app.mcpb da Página de Lançamentos.
2. Clique duas vezes para instalar no Claude Desktop.

Opção 3: Compilar a partir do Código Fonte

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

Em seguida, adicione à sua configuração do Claude Desktop em ~/Library/Application Support/Claude/claude_desktop_config.json:

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

Reinicie o Claude Desktop e você estará pronto para começar.

---

💬 Exemplos de Prompts

Uma vez conectado, você pode usar prompts em linguagem natural como:

• "Desenhe um gato fofo usando Excalidraw"
• "Desenhe um diagrama de arquitetura mostrando um usuário se conectando a um servidor de API que se comunica com um banco de dados"
• "Crie um fluxograma de um pipeline CI/CD"
• "Esboce uma topologia de rede com 3 servidores e um balanceador de carga"

A IA chamará o servidor MCP, que gera o diagrama e o transmite de volta como um canvas interativo no chat.

---

🛠️ Pilha Tecnológica

Camada	Tecnologia
Linguagem	TypeScript (90.1%), JavaScript (4.7%)
Frontend	Excalidraw, Vite, CSS
Backend	Node.js (serverless estilo Express)
Implantação	Vercel
Protocolo	Model Context Protocol (MCP) + extensão MCP Apps

---

🌐 Auto-hospedagem / Implantação

Você pode implantar sua própria instância no Vercel em minutos:

1. Faça um fork do repositório.
2. Vá para vercel.com/new e importe seu fork.
3. Nenhuma variável de ambiente é necessária — basta clicar em Deploy.
4. Seu servidor estará disponível em https://your-project.vercel.app/mcp.

---

🤝 Contribuições

PRs são bem-vindos! O projeto é ativamente mantido pela equipe Excalidraw e por colaboradores da comunidade. Para contribuir:

1. Faça um fork do repositório e clone localmente.
2. Execute npm install && npm run build para configurar o ambiente de desenvolvimento.
3. Faça suas alterações e envie um pull request.

---

🔗 Recursos Relacionados

• Excalidraw (biblioteca principal)
• Model Context Protocol (MCP)
• Documentação da Extensão MCP Apps
• MCP Apps GitHub

---

🏷️ Resumo

MCP — Este é um servidor MCP construído sobre o Model Context Protocol, permitindo que clientes de IA gerem e editem interativamente diagramas no estilo desenhado à mão do Excalidraw diretamente na interface de chat.