# tldraw MCP server

Draw and visually collaborate with your agents on tldraw's canvas.

## Links
- Registry page: https://www.getdrio.com/mcp/io-github-tldraw-tldraw
- Repository: https://github.com/tldraw/tldraw

## Install
- Endpoint: https://tldraw-mcp-app.tldraw.workers.dev/mcp
- Auth: Not captured

## Setup notes
- Remote endpoint: https://tldraw-mcp-app.tldraw.workers.dev/mcp
- Remote endpoint: https://tldraw-mcp-app.tldraw.workers.dev/sse

## Tools
- search (Search Editor API) - Search the tldraw Editor API spec by writing JavaScript that receives a `spec` object and returns a result. The spec contains: spec.members (all Editor methods/properties with name, kind, signature, description, category), spec.categories (category names), spec.types.shapes (focused shape type definitions with props), spec.types.shapeTypes (list of all shape type strings), spec.helpers (exec helper functions with descriptions, params, examples).

Examples:
- Find shape methods: return spec.members.filter(m => m.category === "shapes").map(m => ({ name: m.name, signature: m.signature }))
- Get arrow shape props: return spec.types.shapes.find(s => s.shapeType === "arrow")
- List all categories: return spec.categories
- Find a helper: return spec.helpers.find(h => h.name === "createArrowBetweenShapes") Endpoint: https://tldraw-mcp-app.tldraw.workers.dev/mcp
- exec (Execute Code) - Execute JavaScript code on a tldraw canvas. The code runs in the widget with access to the live `editor` instance, helper functions, and normal js. Use the `search` tool first to discover available Editor methods and shape types.

Each canvas has a unique `canvasId`. Omit `canvasId` to create a new blank canvas. To edit an existing canvas, pass the `canvasId` that was returned by a previous exec call.

Shapes and text grow depending on the amount of text they have. Use clever scripting to ensure there are no unintended overlaps.

Examples:
- Create a rectangle: editor.createShape({ _type: 'rectangle', shapeId: 'box1', x: 200, y: 120, w: 320, h: 180, text: 'Hello' })
- Connect shapes with an arrow: editor.createShape({ _type: 'arrow', shapeId: 'a1', fromId: 'box1', toId: 'box2', x1: 0, y1: 0, x2: 100, y2: 0 })
- Select and zoom: editor.select('box1'); editor.zoomToSelection()
- Read shapes: return editor.getCurrentPageShapes()
- Distribute evenly: editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal')
- Box around shapes: boxShapes(['box1', 'box2'], { text: 'Group label', color: 'blue' })
- Stack shapes dynamically: editor.createShape({ _type: 'rectangle', shapeId: 'a', x: 0, y: 0, w: 300, h: 200, text: 'First box\nwith wrapping text' }); const bounds = editor.getShapePageBounds('a'); editor.createShape({ _type: 'rectangle', shapeId: 'b', x: 0, y: bounds.maxY + 20, w: 300, h: 200, text: 'Below first' }) Endpoint: https://tldraw-mcp-app.tldraw.workers.dev/mcp
- _exec_callback (Exec Callback) - App-only: widget calls this to resolve a pending exec request. Endpoint: https://tldraw-mcp-app.tldraw.workers.dev/mcp
- _get_canvas_state (Get Canvas State) - App-only: get the latest checkpoint for a canvas by its canvasId. Endpoint: https://tldraw-mcp-app.tldraw.workers.dev/mcp
- read_checkpoint (Read Checkpoint) - App-only: read shapes from a checkpoint by ID. Endpoint: https://tldraw-mcp-app.tldraw.workers.dev/mcp
- save_checkpoint (Save Checkpoint) - App-only: save shapes to a checkpoint (from user edits). shapesJson and assetsJson must be JSON array strings. Endpoint: https://tldraw-mcp-app.tldraw.workers.dev/mcp

## Resources
- ui://show-canvas/mcp-app.html - tldraw Canvas Interactive tldraw canvas. MIME type: text/html;profile=mcp-app

## Prompts
Not captured

## Metadata
- Owner: io.github.tldraw
- Version: 0.1.0
- Runtime: Sse, Streamable Http
- Transports: HTTP
- License: Not captured
- Language: Not captured
- Stars: Not captured
- Updated: Mar 6, 2026
- Source: https://registry.modelcontextprotocol.io