Some ideas just don’t fit in a chat box.

Over the last few months, I’ve found myself asking AI agents to tackle more complex work, take on longer tasks, and work more abstractly with my files, code, and ideas. Most of the time, the format of the chat works fine, especially when I can augment the chat with information from my environment, like which files I have open, my selected text, and any recent changes.

Some topics, however, are hard to work with through chat alone. It might be something inherently visual, like describing an adjustment to a particular part of a design, or else complex and abstract, like a process or workflow. In cases like these, a drawing or diagram would be so much easier.

So we gave LLMs a way to draw for you.

With tldraw’s new MCP App, we’ve put a full tldraw canvas inside your conversations. Your agent can draw, diagram, and wireframe. You can edit the canvas too—and the agent can see your changes.

It's live now in Claude and Cursor.

Try it

To use the tldraw MCP app in Cursor, open the plugin marketplace (cmd shift P, search Marketplace), search for tldraw, and click Add to Cursor. Restart Cursor, open an agent, and ask it to draw something.

To use the tldraw MCP app in Claude (both the web or desktop app), click on Settings, then Connectors, then Browse Connectors. Search for tldraw and click Connect. Open a chat and ask it to draw something.

For anything else, try adding this to your settings:

{
	"mcpServers": {
		"tldraw": {
			"transport": "http",
			"url": "<https://tldraw-mcp-app.tldraw.workers.dev/mcp>"
		}
	}
}

{
	"mcpServers": {
		"tldraw": {
			"transport": "http",
			"url": "<https://tldraw-mcp-app.tldraw.workers.dev/mcp>"
		}
	}
}

{
	"mcpServers": {
		"tldraw": {
			"transport": "http",
			"url": "<https://tldraw-mcp-app.tldraw.workers.dev/mcp>"
		}
	}
}

Once you've installed the tldraw MCP app, you can put it to work: diagram your codebase architecture, walk through a PR, or sketch out a system design together.

What it can do

Last week, while working on an issue that would change how tldraw calculates curves, I asked the Cursor agent to show me how the change worked—visually. Cursor spun up a tldraw to show me, with the old approach on the left, the new approach on the right, and annotations to highlight the key optimization. I had the idea in a moment and was able to give the model much better steering as we continued.

This one’s a little recursive: I needed to document the MCP App itself and wanted to show how it worked, so I asked the agent to show me a diagram. Cursor's agent spun up the MCP app and produced a full layout of the interactions between clients, the transport layer, the tool dispatch system, and the tldraw editor instance. After some tweaks for visual design, the diagram went right into our docs.

Going further

Building tldraw's MCP app taught us a lot about the protocol and the quirks of each platform that implements it. In a future article, we'll share more about what we learned, the issues we faced, and where we want to go next.

If you're using the tldraw MCP app, let us know your thoughts! You can connect with the team on Discord, post at us on Twitter/X, or learn more about the tldraw SDK at tldraw.dev.