tldraw — Claude Code MCP server: what it does, how to install
Connects an interactive tldraw canvas to an AI agent for drawing, editor actions, and saved canvas state.
claude mcp add --transport http tldraw https://tldraw-mcp-app.tldraw.workers.dev/mcpWhat tldraw does
The server exposes an interactive tldraw canvas through the MCP app specification. An agent can query the extracted Editor API with search and run JavaScript against the live editor with exec. A React widget renders the canvas inside the MCP host iframe and maps simple shape data to tldraw’s internal types.
Canvas state is stored in SQLite inside a Durable Object and in browser local storage. The widget uses checkpoint tools to save and read that state. Local ChatGPT development needs cloudflared, a Cloudflare login, and an HTTPS tunnel, so a plain local HTTP server is not enough.
What it helps with
- draw a flow on the canvas
- edit objects in the live editor
- query the extracted Editor API
- save and read canvas checkpoints
- connect tldraw to an MCP client
Example prompts for the agent
- Draw an authorization flow on the canvas and label each step.
- Open the current canvas and change the color of every shape linked to the API.
- Find the Editor API method for selected objects and run it on the canvas.
How to install tldraw
Platform CLI: remote server
claude mcp add --transport http tldraw https://tldraw-mcp-app.tldraw.workers.dev/mcpPlatform CLI: remote server
codex mcp add mcp-app --url https://tldraw-mcp-app.tldraw.workers.dev/mcpConfig file
{
"mcpServers": {
"mcp-app": {
"url": "https://tldraw-mcp-app.tldraw.workers.dev/mcp"
}
}
}Config file
{
"servers": {
"mcp-app": {
"type": "http",
"url": "https://tldraw-mcp-app.tldraw.workers.dev/mcp"
}
}
}Platform CLI: remote server
gemini mcp add -t http mcp-app https://tldraw-mcp-app.tldraw.workers.dev/mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about tldraw
How do I install tldraw in Claude Code?
Run claude mcp add --transport http tldraw https://tldraw-mcp-app.tldraw.workers.dev/mcp, then run claude mcp add --transport http mcp-app https://tldraw-mcp-app.tldraw.workers.dev/mcp.
What does tldraw do?
This MCP server gives an agent an interactive tldraw canvas. The agent can query the Editor API, run JavaScript in the live editor, and work with saved checkpoints.
What is required for local tldraw development?
Local ChatGPT development requires the cloudflared CLI, cloudflared tunnel login, and pnpm dev:tunnel run from apps/mcp-app.
