excalidraw/excalidraw-mcp View GitHub Homepage for Latest Official Releases

A fast and streamable MCP server that enables AI clients to generate and render interactive hand-drawn Excalidraw diagrams with smooth viewport camera control and fullscreen editing directly in the chat.

TypeScriptexcalidraw-mcpexcalidraw 2.7k Last Updated: February 20, 2026

Excalidraw MCP App Server

Fast and streamable Excalidraw MCP App — Generate beautiful hand-drawn diagrams directly inside your AI chat client.

📌 Overview

Excalidraw MCP is an open-source Model Context Protocol (MCP) server built by the Excalidraw team. It bridges the gap between AI language models and visual diagramming by allowing AI clients (such as Claude, ChatGPT, VS Code, Goose, etc.) to generate and render interactive, hand-drawn-style diagrams powered by Excalidraw — all within the chat interface itself.

Instead of just returning text descriptions of a diagram, this MCP server streams an interactive HTML canvas back to the client, complete with smooth viewport camera control and a fullscreen editing mode.

✨ Key Features

  • Streamable Diagrams: Returns diagrams as live, interactive HTML rendered directly in the chat window — not static images.
  • Hand-drawn Aesthetic: Leverages Excalidraw's signature sketchy, hand-drawn visual style for all generated diagrams.
  • Smooth Camera Control: Supports viewport panning and zooming so users can explore large diagrams comfortably.
  • Fullscreen Editing: Users can open the generated diagram in a fullscreen editor to make manual tweaks after AI generation.
  • MCP Apps Standard: Built on the official MCP Apps extension, which enables servers to return rich interactive UI components rather than plain text.
  • Multi-client Support: Works with any MCP-compatible client — Claude, ChatGPT, VS Code Copilot, Goose, and others.
  • Easy Deployment: One-click deployment to Vercel with no environment variables required.

🏗️ Architecture

User Prompt (e.g., "Draw an architecture diagram")
        │
        ▼
  AI Client (Claude / ChatGPT / VS Code)
        │  MCP Protocol
        ▼
  Excalidraw MCP Server (Node.js / TypeScript)
        │  Streams interactive HTML
        ▼
  Excalidraw Canvas (rendered in chat UI)
        │
        ▼
  User sees & edits the diagram live

The server is written in TypeScript, served via Vercel (serverless), and uses Vite for frontend bundling. It follows the MCP Apps protocol to embed a full Excalidraw canvas as an interactive artifact response.

🚀 Getting Started

Option 1: Remote (Recommended)

No installation needed. Add the following URL as a remote MCP server in your client:

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

Claude.ai example: Settings → Connectors → Add custom connector → paste the URL.

Option 2: Local via Extension File

  1. Download excalidraw-mcp-app.mcpb from the Releases page.
  2. Double-click to install in Claude Desktop.

Option 3: Build from Source

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

Then add to your Claude Desktop config at ~/Library/Application Support/Claude/claude_desktop_config.json:

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

Restart Claude Desktop and you're ready to go.

💬 Example Prompts

Once connected, you can use natural language prompts like:

  • "Draw a cute cat using Excalidraw"
  • "Draw an architecture diagram showing a user connecting to an API server which talks to a database"
  • "Create a flowchart of a CI/CD pipeline"
  • "Sketch a network topology with 3 servers and a load balancer"

The AI will call the MCP server, which generates the diagram and streams it back as an interactive canvas in the chat.

🛠️ Tech Stack

Layer Technology
Language TypeScript (90.1%), JavaScript (4.7%)
Frontend Excalidraw, Vite, CSS
Backend Node.js (Express-style serverless)
Deployment Vercel
Protocol Model Context Protocol (MCP) + MCP Apps extension

🌐 Self-Hosting / Deployment

You can deploy your own instance to Vercel in minutes:

  1. Fork the repository.
  2. Go to vercel.com/new and import your fork.
  3. No environment variables are needed — just click Deploy.
  4. Your server will be available at https://your-project.vercel.app/mcp.

🤝 Contributing

PRs are welcome! The project is actively maintained by the Excalidraw team and community contributors. To contribute:

  1. Fork the repo and clone locally.
  2. Run npm install && npm run build to set up the dev environment.
  3. Make your changes and submit a pull request.

🔗 Related Resources

🏷️ Summary

MCP — This is an MCP server built on the Model Context Protocol, enabling AI clients to generate and interactively edit Excalidraw hand-drawn style diagrams directly within the chat interface.

Star History Chart