GitHub - excalidraw/excalidraw-mcp: Fast and streamable Excalidraw MCP App
Key Points
- 1The Excalidraw MCP App is a server that streams interactive, hand-drawn Excalidraw diagrams directly into compatible chat clients.
- 2It operates as an official Model Context Protocol (MCP) extension, enabling applications like Claude or ChatGPT to display and allow interaction with rich HTML interfaces.
- 3This allows users to create and edit diagrams within their chat environment using simple text prompts, enhancing communication beyond traditional text responses.
The Excalidraw MCP App is a server-side application designed to stream interactive, hand-drawn Excalidraw diagrams directly within Model Context Protocol (MCP)-enabled chat interfaces. Its primary function is to provide smooth viewport camera control and interactive fullscreen editing capabilities for these diagrams.
The core methodology of this application relies on the Model Context Protocol (MCP), an official extension that enables servers to return rich, interactive HTML interfaces—such as data visualizations, forms, and dashboards—that render natively within supporting conversational AI platforms. Instead of merely generating static text or image responses, the Excalidraw MCP App leverages this protocol to embed a dynamic Excalidraw canvas, allowing users to draw, edit, and manipulate diagrams directly within the chat window. This effectively transforms a text-based interaction into a visual and interactive experience. The server component manages the streaming of diagram data and camera states, ensuring a fluid user experience even for complex drawings.
The application is compatible with various MCP-supporting clients, including Claude, ChatGPT, VS Code, and Goose. Installation can be performed either remotely by adding https://excalidraw-mcp-app.vercel.app/mcp as a custom connector URL in a client's settings (e.g., in claude.ai), or locally. Local installation offers two methods: downloading a pre-built .mcpb package for direct installation, or building from source using git clone, npm install, and npm run build. For Claude Desktop, local installation requires manual configuration by adding a JSON entry to ~/Library/Application Support/Claude/claude_desktop_config.json, specifying the command as node and args to execute the built dist/index.js with --stdio.
Once installed, users can interact with the app using natural language prompts such as "Draw a cute cat using excalidraw" or "Draw an architecture diagram showing a user connecting to an API server which talks to a database," triggering the interactive Excalidraw canvas within the chat environment.
The project encourages contributions, with build instructions provided for local development. Users can also deploy their own instances to Vercel by forking the repository and importing it into Vercel, requiring no specific environment variables for a self-hosted server at https://your-project.vercel.app/mcp. The application is built upon the Excalidraw virtual whiteboard library and is released under the MIT License.