integrations.sh
← all integrations

tldraw

MCP server claude productivitydesign

Draw and diagram while you work with tldraw + Claude. Ask for a flowchart, architecture diagram, wireframe, or mind map and it appears. Edit it, and the AI sees your changes in real time, building on them, refining them, or using them as a starting point for other tasks.

Homepage
https://tldraw.notion.site/tldraw-mcp-app
Remote URL
https://tldraw-mcp-app.tldraw.workers.dev/mcp
Transport
streamable-http

Tools (6)

Extracted live via the executor SDK.

  • search

    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")
  • exec

    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' })
  • _exec_callback

    App-only: widget calls this to resolve a pending exec request.

  • _get_canvas_state

    App-only: get the latest checkpoint for a canvas by its canvasId.

  • read_checkpoint

    App-only: read shapes from a checkpoint by ID.

  • save_checkpoint

    App-only: save shapes to a checkpoint (from user edits). shapesJson and assetsJson must be JSON array strings.