# tldraw

Connects an interactive tldraw canvas to an AI agent for drawing, editor actions, and saved canvas state.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed · ★ 51091
- Author: tldraw
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/tldraw/tldraw/tree/HEAD/apps/mcp-app
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/mcp/tldraw

## What it 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.

## Requirements
- Remote server: `https://tldraw-mcp-app.tldraw.workers.dev/mcp`

## Install

### Claude Code (native platform)

**Platform CLI: remote server**
```bash
claude mcp add --transport http tldraw https://tldraw-mcp-app.tldraw.workers.dev/mcp
```

### Codex

**Platform CLI: remote server**
```bash
codex mcp add mcp-app --url https://tldraw-mcp-app.tldraw.workers.dev/mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "mcp-app": {
            "url": "https://tldraw-mcp-app.tldraw.workers.dev/mcp"
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "mcp-app": {
            "type": "http",
            "url": "https://tldraw-mcp-app.tldraw.workers.dev/mcp"
        }
    }
}
```

### Gemini CLI

**Platform CLI: remote server**
```bash
gemini mcp add -t http mcp-app https://tldraw-mcp-app.tldraw.workers.dev/mcp
```

## When to use it
- 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
- 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.

## Similar
- [GitHub](https://affpapa.org/en/nevibecode/mcp/github.md) — MCP server · ★ 33918
- [Netdata](https://affpapa.org/en/nevibecode/mcp/netdata.md) — MCP server · ★ 81115
- [browser-use](https://affpapa.org/en/nevibecode/mcp/browser-use.md) — MCP server · ★ 119160
- [Codebase Memory](https://affpapa.org/en/nevibecode/mcp/codebase-memory.md) — MCP server · ★ 47392
- [mcp-server](https://affpapa.org/en/nevibecode/mcp/mcp-server.md) — MCP server · ★ 43872
- [AIHawk](https://affpapa.org/en/nevibecode/mcp/aihawk.md) — MCP server · ★ 32221

From the same set: [tldraw/tldraw](https://affpapa.org/en/nevibecode/by/tldraw/tldraw.md) — 10 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md