# tldraw MCP App

> Gives your agent a live tldraw canvas in the chat, so it can draw diagrams, flows and sketches with you.

tldraw's own MCP App. Instead of only answering in text, it opens a full, interactive tldraw canvas in your chat, and your agent draws on it: diagrams, flows, state machines and sketches. You can draw on the same canvas, and the agent sees the canvas as it changes, so you can work an idea out together without leaving the conversation.

What you can do with it
- Have your agent draw a diagram, a state machine or a quick sketch
- Diagram the file you're working on
- Map out a flow, such as a login flow, then ask for changes and have the agent revise its plan
- Sketch an idea yourself and have the agent build on it
- Keep working on the same canvas across turns

How it works
The server gives your agent two tools. search looks things up in tldraw's Editor API, and exec runs JavaScript against the live editor in the canvas to create, change, arrange or read shapes. Each canvas has its own ID, so the agent can start a new one or keep editing one it made earlier.

How it connects
tldraw hosts it at https://tldraw-mcp-app.tldraw.workers.dev/mcp, with no sign-in. The canvas only appears in agents that support MCP Apps, the MCP extension for interactive interfaces. tldraw launched it in Cursor, and its docs also cover adding it to Claude Desktop as a custom connector.

Good to know
- Canvas snapshots are saved on tldraw's server and in your browser's local storage. A session's canvases are removed after seven days without a save.
- It's built with the tldraw SDK, and its source is in the tldraw repository on GitHub.

- Type: Plugin
- Made by: tldraw
- Category: Design
- Formats: Remote MCP
- Version: 0.1.0
- Website: https://tldraw.dev/blog/tldraw-mcp-app
- Source: https://github.com/tldraw/tldraw/tree/HEAD/apps/mcp-app
- Page: https://pluginboard.ai/plugins/tldraw

## Works with

- ChatGPT
- Claude
- Muse
- Grok Bot
- Gemini
- Grok
- GitHub Copilot
- Cursor
- Claude Code
- Codex
- Antigravity
- Gemini CLI
- Replit
- OpenClaw
- OpenCode
- Hermes Agent

## Install

### ChatGPT

In ChatGPT on the web: Plugins → + → Add custom MCP server, then paste https://tldraw-mcp-app.tldraw.workers.dev/mcp under Connection. Business and Enterprise plans; Pro can add read-only servers.

### Claude

In Claude (web or desktop): Customize → Connectors → Add custom connector, then paste https://tldraw-mcp-app.tldraw.workers.dev/mcp

### Muse

In Muse: In a Muse chat, ask it to create a custom connector for the MCP server at https://tldraw-mcp-app.tldraw.workers.dev/mcp. Then tap Connect on the card it shows and sign in, or add your key.

### Grok Bot

In Grok Bot: In a chat with your Bot, say "Add this MCP server: https://tldraw-mcp-app.tldraw.workers.dev/mcp". It confirms the details with you and sets it up, and the tools are ready from your next message.

### Gemini

In Gemini: At gemini.google.com: Settings → Connected Apps → Add a custom app, then paste https://tldraw-mcp-app.tldraw.workers.dev/mcp

### Grok

In Grok on the web: At grok.com/connectors: New Connector → Custom, then enter https://tldraw-mcp-app.tldraw.workers.dev/mcp and sign in if it asks.

### GitHub Copilot

Add to VS Code: vscode:mcp/install?%7B%22name%22%3A%22tldraw-mcp-app%22%2C%22type%22%3A%22http%22%2C%22url%22%3A%22https%3A%2F%2Ftldraw-mcp-app.tldraw.workers.dev%2Fmcp%22%7D

Copilot CLI:

```shell
copilot mcp add --transport http tldraw-mcp-app https://tldraw-mcp-app.tldraw.workers.dev/mcp
```

### Cursor

Add to Cursor: cursor://anysphere.cursor-deeplink/mcp/install?name=tldraw-mcp-app&config=eyJ1cmwiOiJodHRwczovL3RsZHJhdy1tY3AtYXBwLnRsZHJhdy53b3JrZXJzLmRldi9tY3AifQ%3D%3D

Add to .cursor/mcp.json:

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

### Claude Code

Run in your terminal:

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

### Codex

Run in your terminal:

```shell
codex mcp add tldraw-mcp-app --url https://tldraw-mcp-app.tldraw.workers.dev/mcp
```

### Antigravity

Add to ~/.gemini/config/mcp_config.json:

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

### Gemini CLI

Run in your terminal:

```shell
gemini mcp add --transport http tldraw-mcp-app https://tldraw-mcp-app.tldraw.workers.dev/mcp
```

### Replit

In Replit: At replit.com/integrations, open MCP Servers → + Add MCP server, paste https://tldraw-mcp-app.tldraw.workers.dev/mcp (add any headers under Advanced settings), then click Test & save.

### OpenClaw

Run in your terminal:

```shell
openclaw mcp add tldraw-mcp-app --url https://tldraw-mcp-app.tldraw.workers.dev/mcp --transport streamable-http
```

If it needs a key or sign-in: For https://tldraw-mcp-app.tldraw.workers.dev/mcp, add --header NAME=value for each header it needs, or --auth oauth and then run openclaw mcp login tldraw-mcp-app.

### OpenCode

Run in your terminal:

```shell
opencode mcp add tldraw-mcp-app --url https://tldraw-mcp-app.tldraw.workers.dev/mcp
```

If it needs a key: For https://tldraw-mcp-app.tldraw.workers.dev/mcp, add --header 'NAME=value' for each header it needs. Add --global to use it in every project.

### Hermes Agent

Run in your terminal:

```shell
hermes mcp add tldraw-mcp-app --url https://tldraw-mcp-app.tldraw.workers.dev/mcp
```

Add to ~/.hermes/config.yaml:

```json
{
  "mcp_servers": {
    "tldraw-mcp-app": {
      "url": "https://tldraw-mcp-app.tldraw.workers.dev/mcp"
    }
  }
}
```

If it signs in with OAuth: If https://tldraw-mcp-app.tldraw.workers.dev/mcp asks you to sign in, add --auth oauth to the command, or auth: oauth to its entry.

---
From Pluginboard (https://pluginboard.ai).