MCPcopy
hub / github.com/excalidraw/excalidraw-mcp

github.com/excalidraw/excalidraw-mcp @v0.3.2 sqlite

repository ↗ · DeepWiki ↗ · release v0.3.2 ↗
65 symbols 146 edges 11 files 5 documented · 8%
README

Excalidraw MCP App Server

MCP server that streams hand-drawn Excalidraw diagrams with smooth viewport camera control and interactive fullscreen editing.

Demo

Install

Works with any client that supports MCP Apps — Claude, ChatGPT, VS Code, Goose, and others. If something doesn't work, please open an issue.

Remote (recommended)

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

Add as a remote MCP server in your client. For example, in claude.ai: SettingsConnectorsAdd custom connector → paste the URL above.

Local

Option A: Download Extension

  1. Download excalidraw-mcp-app.mcpb from Releases
  2. 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"

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.

Contributing

PRs welcome! See Local above for build instructions.

Deploy your own instance

You can deploy your own copy to Vercel in a few clicks:

  1. Fork this repo
  2. Go to vercel.com/new and import your fork
  3. No environment variables needed — just deploy
  4. Your server will be at https://your-project.vercel.app/mcp

Release checklist

For maintainers

# 1. Bump version in manifest.json and package.json
# 2. Build and pack
npm run build && mcpb pack .

# 3. Create GitHub release
gh release create v0.3.0 excalidraw-mcp-app.mcpb --title "v0.3.0" --notes "What changed"

# 4. Deploy to Vercel
vercel --prod

Credits

Built with Excalidraw — a virtual whiteboard for sketching hand-drawn like diagrams.

License

MIT

Extension points exported contracts — how you extend this code

CheckpointStore (Interface)
(no doc) [6 implementers]
src/checkpoint-store.ts
ViewportRect (Interface)
(no doc)
src/mcp-app.tsx

Core symbols most depended-on inside this repo

load
called by 8
src/checkpoint-store.ts
fsLog
called by 7
src/mcp-app.tsx
convertRawElements
called by 4
src/mcp-app.tsx
createServer
called by 3
src/server.ts
parsePartialElements
called by 2
src/mcp-app.tsx
fixViewBox4x3
called by 2
src/mcp-app.tsx
extractViewportAndElements
called by 2
src/mcp-app.tsx
save
called by 2
src/checkpoint-store.ts

Shape

Function 47
Method 10
Class 6
Interface 2

Languages

TypeScript100%

Modules by API surface

src/mcp-app.tsx20 symbols
src/checkpoint-store.ts18 symbols
src/edit-context.ts7 symbols
scripts/setup-bun.mjs7 symbols
src/main.ts5 symbols
src/pencil-audio.ts4 symbols
src/server.ts3 symbols
api/mcp.ts1 symbols

Dependencies from manifests, versioned

@modelcontextprotocol/ext-apps0.4.0 · 1×
@modelcontextprotocol/sdk1.24.0 · 1×
@types/cors2.8.19 · 1×
@types/express5.0.0 · 1×
@types/node22.0.0 · 1×
@types/react19.2.2 · 1×
@types/react-dom19.2.2 · 1×
@upstash/redis1.34.0 · 1×
@vitejs/plugin-react4.3.4 · 1×
concurrently9.2.1 · 1×
cors2.8.5 · 1×

For agents

$ claude mcp add excalidraw-mcp \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact