CanvasKeep

CanvasKeep MCP Server

An MCP (Model Context Protocol) server that lets AI tools like Claude Code and Codex generate Excalidraw diagrams and save them directly into your CanvasKeep workspace.

[npm] [license]

Setup

1. Get an API key

1. Log in to CanvasKeep
2. Click your profile menu (top right) and select API Keys
3. Generate a new key and copy it immediately (you won't see it again)

2. Install and register

Claude Code:

claude mcp add canvaskeep \  -e CANVASKEEP_API_KEY=ck_your_key_here \  -- npx canvaskeep-mcp

Codex / other MCP clients:

{  "mcpServers": {    "canvaskeep": {      "command": "npx",      "args": ["canvaskeep-mcp"],      "env": {        "CANVASKEEP_API_KEY": "ck_your_key_here"      }    }  }}

3. Environment variables

Available tools

Encryption

Diagrams you encrypt in CanvasKeep stay encrypted when an AI tool works with them. When get_diagram_scene or save_diagram_scene touches an encrypted diagram, this server decrypts and re-encrypts it locally (AES-GCM, see src/encryption.ts) using CANVASKEEP_MASTER_KEY. The master key never leaves your machine.

generate_diagram sends the nodes and edges you give it to CanvasKeep, which lays them out on the server, so diagrams generated this way are stored unencrypted.

Example usage

Ask Claude Code something like:

"Draw an architecture diagram of a web app with a React frontend, Node API, PostgreSQL database, and Redis cache"

Claude will use the MCP tools to create a diagram in your CanvasKeep workspace with properly laid-out boxes and labeled arrows.

Development

git clone https://github.com/CanvasKeep/canvaskeep-mcp.gitcd canvaskeep-mcpnpm installnpm run buildCANVASKEEP_API_KEY=ck_... CANVASKEEP_API_URL=http://localhost:3000 node dist/index.js

To run your local build from Claude Code:

claude mcp add canvaskeep \  -e CANVASKEEP_API_KEY=ck_your_key_here \  -- node /path/to/canvaskeep-mcp/dist/index.js

License

MIT