tldraw MCP Server

A full-featured Model Context Protocol (MCP) server that lets AI assistants like Claude create and edit tldraw diagrams programmatically. With 30 tools across 7 categories, it supports all 14 tldraw shape types and produces standard .tldr files.

What is MCP?

The Model Context Protocol is an open standard that allows AI models to interact with external tools and services. This server exposes tldraw's drawing capabilities as MCP tools, enabling Claude (or any MCP-compatible client) to create complex diagrams, flowcharts, wireframes, and more — all through natural language.

Features

• 14 shape types: geo, text, arrow, note, frame, draw, line, image, video, bookmark, embed, highlight, and more

• 30 tools organized into 7 categories

• Rich text support with tldraw's native format

• Arrow bindings — connect shapes with smart arrows

• Full document lifecycle — create, load, save, and export .tldr files

• Zero browser dependencies — pure Node.js, generates files directly

Prerequisites

• Node.js 18+

• npm or compatible package manager

• An MCP-compatible client (Claude Code, Claude Desktop, etc.)

Installation

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

Configuration

Claude Code

Add to your Claude Code MCP settings:

{
  "mcpServers": {
    "tldraw": {
      "command": "node",
      "args": ["C:/path/to/tldraw-mcp-server/dist/index.js"]
    }
  }
}

Claude Desktop

Add to claude_desktop_config.json:

{
  "mcpServers": {
    "tldraw": {
      "command": "node",
      "args": ["C:/path/to/tldraw-mcp-server/dist/index.js"]
    }
  }
}

Replace C:/path/to/tldraw-mcp-server with the actual path to the cloned repository.

Available Tools

Document Management

Shape Creation (14 types)

Connections

Shape Manipulation

Grouping & Ordering

Pages

Query & Camera

Project Structure

tldraw-mcp-server/
├── src/
│   ├── index.ts              # Server entry point
│   ├── register-tools.ts     # Tool registration
│   ├── schemas/              # Zod schemas for shapes and styles
│   ├── state/                # Document state management
│   ├── tools/                # Tool implementations (one file per category)
│   └── utils/                # Helpers (IDs, indices, rich text, defaults)
├── examples/                 # Usage examples (diagram generation, serving)
├── dist/                     # Compiled output (generated)
├── package.json
└── tsconfig.json

Examples

The examples/ directory contains scripts that demonstrate usage:

• generate-diagram.mjs — Builds a complete multi-shape diagram programmatically

• serve-tldr.mjs — Serves a .tldr file over HTTP

• serve-html.mjs — Serves an HTML export of a diagram

• inject-diagram.mjs — Encodes a .tldr as base64 for browser injection

• prep-inject.mjs — Generates a Playwright-compatible inject function

• pw-inject.mjs — Full Playwright script for injecting diagrams into tldraw

# Build first
npm run build

# Generate a sample diagram
node examples/generate-diagram.mjs

Contributing

Contributions are welcome! Please:

1. Fork the repository

2. Create a feature branch (git checkout -b feature/my-feature)

3. Commit your changes

4. Push to the branch and open a Pull Request

License

MIT