Creatos Logo
Compare
Buy License

Guide · checked on

tldraw MCP in Claude: setup, a real run, and what the API can’t show

The tldraw MCP app gives Claude a whiteboard inside the chat. Claude draws by writing JavaScript against the tldraw editor, so it can move, restyle or delete any single shape later. It is free to connect and needs no account. This guide covers the setup in Claude, Claude Code, Cursor and ChatGPT, what one real Claude run did and cost, and the catch we found: without the canvas view, nothing comes back.

Short answer

  • Claude on the web or desktop: Customize › Connectors, search the directory for tldraw and connect it. No sign-in.
  • Cursor: add https://tldraw-mcp-app.tldraw.workers.dev/mcp as a global MCP server.
  • ChatGPT and Codex: install the tldraw plugin.
  • Claude Code or the API: it connects, but there is no canvas to see. In our run Claude drew, got no result back, and said so. Use the Excalidraw MCP there.

Which tldraw MCP do you need?

tldraw MCP apptldraw-mcp-server (AndresMuelas2004)tldraw-mcp-server (Mihai-Codes)
Made bytldrawCommunity, MIT licenceCommunity, MIT licence
Runs wheretldraw’s server; you add a URLYour computer (Node)Your computer (Node)
AccountNoneNoneNone
Where the drawing appearsA canvas view inside the chat.tldr files you open in tldrawA local canvas you start with npm run canvas
Tools2 for Claude (search, exec), 4 used by the canvas view30, in 7 groups, covering all 14 shape types (README)Not checked
Best forSketching with Claude in the Claude app, Cursor or ChatGPTClaude Code or Claude Desktop, with diagrams saved as filesClaude Code with a canvas you can watch

We listed the official server's tools ourselves (see the test below). The two community servers are described from their READMEs, read on 7 October 2026; we did not run them. Both have one or two GitHub stars, so treat them as experiments.

Set it up in Claude (web, desktop)

  1. Open Customize › Connectors in Claude and browse the directory.
  2. Search for tldraw. The listing is marked Anthropic verified, with sign-in not required.
  3. Connect it.
  4. In a new chat, ask for a diagram, for example "Sketch how a RAG pipeline answers a question, left to right." The canvas opens inside the chat, and you can edit it yourself; tldraw says Claude sees your changes.

To add it by hand: + Add › Add custom connector, paste https://tldraw-mcp-app.tldraw.workers.dev/mcp and leave sign-in empty. The Free plan allows one custom connector.

One thing will confuse you if you read tldraw's own docs. Its supported hosts page still lists Claude as "planned" and gives a testing-only Claude Desktop config that goes through mcp-remote. Claude's directory listing and tldraw's "text is not enough" post both say it is live in Claude, so use the directory. The config below is only for a Claude Desktop that can't use connectors:

"tldraw": {
  "command": "npx",
  "args": ["-y", "mcp-remote", "https://tldraw-mcp-app.tldraw.workers.dev/mcp"]
}

Set it up in Claude Code, Cursor and ChatGPT

Claude Code. Add it over HTTP, then run /mcp to check that it connected:

claude mcp add --transport http tldraw https://tldraw-mcp-app.tldraw.workers.dev/mcp

It will connect, but read the test below first: a terminal can't show the canvas, and without it we got nothing back. If you want diagrams as files from Claude Code, the AndresMuelas2004 server writes .tldr files. Its README installs it from source:

git clone https://github.com/AndresMuelas2004/tldraw-mcp-server.git
cd tldraw-mcp-server && npm install && npm run build

then points Claude Code or Claude Desktop at node /path/to/tldraw-mcp-server/dist/index.js. The Mihai-Codes server adds a canvas you open in the browser (npm run canvas). Clone it from that URL; the clone link in its README returned a 404 when we checked.

Cursor. tldraw launched the app in Cursor first. In Settings › MCP, add a new global MCP server:

{
  "mcpServers": {
    "tldraw": { "url": "https://tldraw-mcp-app.tldraw.workers.dev/mcp" }
  }
}

ChatGPT and Codex. tldraw publishes a plugin for both. Open its page and choose Install plugin. Its listing says it can draw diagrams, wireframes and data, mark up screenshots, and link work to tldraw.com files, and that it may share relevant chats and memories with tldraw.

What one real run did

On 7 October 2026 we sent one prompt to Claude Sonnet 5.5 through the Claude API, connected to https://tldraw-mcp-app.tldraw.workers.dev/mcp. We reused the prompt from our Excalidraw test word for word, including the last sentence, which asks for something tldraw can't do:

Draw a diagram of how a RAG pipeline answers a question: user question, embed the question, vector search, top-k chunks, prompt with context, LLM answer. Then export it to excalidraw.com and give me the link.

Claude called three tools, in this order:

  1. search, with code that pulled the helper functions and the rectangle and arrow shape specs: a 6,839-character answer.
  2. exec, with JavaScript that placed six coloured boxes in two rows of three, a title, a "Vector database" box to the side, and arrows between the steps. The server replied only that the canvas "is rendering and your code is executing", and that the canvas state would be attached to the conversation shortly.
  3. exec again, to read back every shape's position and check the layout. It got the same "is rendering" reply and no shapes.
MeasuredResult
Time, prompt to answer50.0 seconds
Input tokens20,144
Output tokens1,784, of which 400 thinking
Cost at API prices ($2 / $10 per million)About $0.06

Claude's answer, shortened:

I drew the RAG diagram, but I can't give you an excalidraw.com link. My tools only reach the tldraw canvas… and a link I made up wouldn't work. I haven't looked at the rendered canvas, so I can't promise the layout is free of overlaps.

What the run tells you:

  • The canvas view is the whole product. The state comes back through tools that only the view calls, so through the API there was no drawing, no link and nothing to screenshot. Our reading of the server's reply is that the code runs inside the view itself. We expect the same in any client that can't show MCP Apps, but tested only the API.
  • It is light on tokens. 20,144 input tokens against 53,557 for the same diagram with Excalidraw, because search returns only the parts of the API Claude asks for instead of a full format guide.
  • Claude didn't bluff. It said it couldn't export, didn't invent a link, and said it hadn't seen the result.
  • We didn't test the view inside the Claude app. That is why this page has no screenshot of the canvas.

How tldraw’s MCP draws

Most drawing servers give Claude one tool per action: add a box, add an arrow. tldraw gives it two. search lets Claude write a little JavaScript that looks things up in the tldraw Editor API spec, and exec runs JavaScript on the canvas with the live editor. Whatever the editor can do, Claude can do, one shape at a time.

Four more tools are marked for the app only, so the canvas view calls them, not Claude: _exec_callback, _get_canvas_state, save_checkpoint and read_checkpoint. That is how the drawing and your own edits get back into the conversation.

This is newer than most write-ups. tldraw's launch post from March, its tools page and Claude's directory listing still describe diagram_drawing_read_me, create_shapes, update_shapes and delete_shapes. The live server we queried on 6 and 7 October 2026 had switched to search and exec. It identifies itself as "tldraw Canvas" 1.0.0, "an interactive tldraw canvas with tools for diagramming, drawing, and more".

Prompts that work with tldraw

  • List the boxes and arrows and say the direction: "question → embed → vector search → top-k → prompt → answer, left to right".
  • Ask for one change at a time once the first draft is there. Because Claude edits with code, "make the vector database box red and move it under step 3" touches only that shape.
  • Ask Claude to check the layout. In our run it wrote a second call to read every shape's position. With the canvas view, that check returns real positions.
  • Don't ask for things the tools can't do. tldraw's MCP has no export to another site. Claude told us so instead of inventing a link.

tldraw vs. Excalidraw MCP

tldrawExcalidraw
Looks likeClean whiteboard shapesA hand-drawn sketch
How Claude drawsWrites JavaScript against the editorSends a list of elements
Later editsAny single shape, by codeSends the whole diagram again
Our API run: input tokens20,14453,557 (most of it the 26,943-character format guide)
Our API run: time and cost50.0 s, about $0.0649.5 s, about $0.19
Our API run: what came backNothing to see: the canvas needs the viewAn excalidraw.com link
Works without the viewNoYes, through the export

Same prompt, same model, run through the Claude API one day apart. Setup and the Excalidraw run are in our Excalidraw MCP guide, which also covers Miro's MCP.

FAQ

Is there an official tldraw MCP?

Yes. tldraw runs the tldraw MCP app at https://tldraw-mcp-app.tldraw.workers.dev/mcp. It is listed in Claude’s connector directory, works in Cursor, and tldraw also publishes a plugin for ChatGPT and Codex.

Is the tldraw MCP free?

Connecting cost nothing when we tested it on 6 and 7 October 2026: the server asked for no account, sign-in or API key, and Claude’s directory lists sign-in as not required. tldraw does not publish a price or a usage limit for it.

How do I add tldraw to Claude?

In Claude on the web or the desktop app, open Customize › Connectors, search the directory for tldraw and connect it. To add it by hand, choose Add custom connector and paste https://tldraw-mcp-app.tldraw.workers.dev/mcp. Then ask for a diagram in a new chat.

Can I use the tldraw MCP in Claude Code?

You can add it with claude mcp add --transport http tldraw https://tldraw-mcp-app.tldraw.workers.dev/mcp, but the canvas is a view that a terminal cannot show. In our API run, which had no view either, Claude’s drawing code never came back with a result. For diagrams in Claude Code, the Excalidraw MCP, which can return an excalidraw.com link, is the safer pick.

What tools does the tldraw MCP have?

Two that Claude calls: search, which looks up the tldraw Editor API, and exec, which runs JavaScript on the canvas. Four more are used only by the canvas view, including save_checkpoint and read_checkpoint. Some directory pages still list the older create_shapes, update_shapes and delete_shapes tools.

Should I use tldraw or Excalidraw MCP?

Pick tldraw for editing a diagram back and forth with Claude inside the Claude app, because Claude can change any single shape with code. Pick Excalidraw when you need a link to share, a hand-drawn look, or a client that cannot show the canvas view, such as Claude Code or the API.

Who wrote this

We make Creatos, a desktop canvas where you put PDFs, YouTube videos and notes next to several AI models and compare their answers. See a research canvas or our model tests.