What is the tldraw remote MCP server?
The tldraw remote MCP server is a hosted Model Context Protocol endpoint at https://tldraw-mcp-app.tldraw.workers.dev/mcp, so AI assistants can connect to it without installing or running anything locally.
tldraw MCP Server
@tldraw
Basic information
About tldraw MCP Server
tldraw is a collaborative whiteboard and canvas SDK. Its remote MCP server lets assistants draw and edit diagrams — flowcharts, architecture sketches, wireframes — on a live tldraw canvas while you work.
Connection details
https://tldraw-mcp-app.tldraw.workers.dev/mcpSetup
claude mcp add tldraw --transport http https://tldraw-mcp-app.tldraw.workers.dev/mcptldraw MCP Server tools
6Search 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")
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' })
App-only: widget calls this to resolve a pending exec request.
App-only: get the latest checkpoint for a canvas by its canvasId.
App-only: read shapes from a checkpoint by ID.
App-only: save shapes to a checkpoint (from user edits). shapesJson and assetsJson must be JSON array strings.
Frequently asked questions
How do I connect to the tldraw MCP server?
Add the endpoint https://tldraw-mcp-app.tldraw.workers.dev/mcp to any MCP-compatible client such as Claude Code, Cursor, or VS Code. The setup snippets on this page configure each client in one step.
Does the tldraw MCP server require authentication?
Authentication requirements for tldraw have not been confirmed in this listing. Check the provider’s documentation before connecting.
Which transport does the tldraw MCP server use?
tldraw exposes a Streamable HTTP endpoint, the transport used by remote MCP servers and supported by all major MCP clients.
More remote MCP servers
AQL PropertyCheck — Physical check of one exact address
Check one exact Gold Coast or Brisbane City property address. Free address/coverage check and short summary; paid structured Agent JSON adds available building, street and surrounding context, with Brisbane routed journe
A
AIS Gateway
CVE prioritization using exploitation signals, plus agent heartbeat monitoring and state capsules. Some tools use API-key or x402 access.
42min
Official 42min MCP server: let Claude, ChatGPT, Cursor or any MCP client manage your meeting scheduling. Check availability, find free slots, book, cancel and reschedule meetings, manage recurring series, secret booking
API Direct
Search and read public data from X/Twitter, Reddit, YouTube, Instagram, TikTok, Facebook, Threads, Bluesky, Trustpilot, Amazon, Google Maps, news, forums and the web. 90+ read-only tools plus ready-made research playbook
%20-%20Sarah%20Xu.svg){kind=icon}
Adobe Experience Manager
Manage your Adobe Experience Manager content
Comments