Prepare the server locally
Run this once before adding it to Claude Code.
git clone https://github.com/antonpk1/excalidraw-mcp-app.git
cd excalidraw-mcp-app
npm install
npm run buildRegister it in Claude Code
claude mcp add excalidraw-mcp-7503 -- node /path/to/excalidraw-mcp-app/dist/index.js --stdioReplace any placeholder paths in the command with the real path on your machine.
Make your agent remember this setup
excalidraw-mcp-7503's config, env vars, and the gotchas you hit — recalled in every future Claude Code, Cursor, and Codex session.
npx conare@latestFree · one command · indexes the sessions already on disk. Set up in the browser instead →
What it does
- Streams hand-drawn Excalidraw diagrams directly into chat
- Provides smooth viewport camera control
- Supports interactive fullscreen editing
- Leverages MCP Apps for rich HTML interface rendering
Try it
Original README from functionstackx/excalidraw-mcp
Excalidraw MCP App Server
MCP server that streams hand-drawn Excalidraw diagrams with smooth viewport camera control and interactive fullscreen editing.
Install
In claude.ai:
- Go to Settings → Connectors → Add custom connector
- Server URL:
https://excalidraw-mcp-app.vercel.app/mcp - Done — start using Excalidraw in your conversations
Alternative: Local Server
Option A: Download Extension
- Download
excalidraw-mcp-app.mcpbfrom Releases - Double-click to install in Claude Desktop
Option B: Build from Source
git clone https://github.com/antonpk1/excalidraw-mcp-app.git
cd excalidraw-mcp-app
npm install && npm run build
Add to ~/Library/Application Support/Claude/claude_desktop_config.json:
{
"mcpServers": {
"excalidraw": {
"command": "node",
"args": ["/path/to/excalidraw-mcp-app/dist/index.js", "--stdio"]
}
}
}
Restart Claude Desktop.
Usage
Example prompts:
- "Draw a cute cat using excalidraw"
- "Draw an architecture diagram showing a user connecting to an API server which talks to a database"
Releasing a New Version
# 1. Make changes, commit, push
git add -A && git commit -m "..." && git push
# 2. Bump version in manifest.json and package.json
# 3. Rebuild
npm run build
# 4. Pack the .mcpb bundle
mcpb pack .
# 5. Create GitHub release with bundle attached
gh release create v0.2.0 excalidraw-mcp-app.mcpb --title "v0.2.0" --notes "What changed"
What are MCP Apps and how can I build one?
Text responses can only go so far. Sometimes users need to interact with data, not just read about it. MCP Apps is an official Model Context Protocol extension that lets servers return interactive HTML interfaces (data visualizations, forms, dashboards) that render directly in the chat.
- Getting started for humans: documentation
- Getting started for AIs: skill
Credits
Built with Excalidraw — a virtual whiteboard for sketching hand-drawn like diagrams.
License
MIT