Skip to main content
Glama
Sign In
tldraw-mcp

tldraw-mcp

by dpunj
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Local

tldraw-mcp

Minimal MCP server for AI-driven canvas manipulation with tldraw.

Architecture

┌─────────────┐     stdio      ┌─────────────┐    WebSocket    ┌─────────────┐
│  AI Client  │◄──────────────►│  tldraw-mcp │◄───────────────►│   Widget    │
│ (Claude,etc)│                │   (server)  │   :4000         │  (tldraw)   │
└─────────────┘                └─────────────┘                 └─────────────┘
                                                                    :3000

Related MCP server: tldraw MCP Server

Tools

Tool

Description

create_shape

Create shapes (rectangle, ellipse, star, cloud, diamond, etc.)

update_shape

Update shape properties (position, size, color, fill)

delete_shapes

Delete shapes by ID

connect_shapes

Connect two shapes with an arrow

create_frame

Create a frame to group shapes together

create_flowchart

Create a flowchart with nodes and edges (auto-layout)

get_snapshot

Get current canvas state

zoom_to_fit

Zoom canvas to fit all shapes

clear_canvas

Clear all shapes

Quick Start

# 1. Clone and install
git clone https://github.com/dpunj/tldraw-mcp
cd tldraw-mcp
bun install

# 2. Start the widget (tldraw canvas + WebSocket server)
cd widget
bun install
bun run dev
# Opens http://localhost:3000 (canvas) + ws://localhost:4000 (relay)

# 3. In another terminal, test the MCP server
cd ..
bun run dev

Claude Desktop Config

Add to ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "tldraw": {
      "command": "bun",
      "args": ["run", "/path/to/tldraw-mcp/src/index.ts"]
    }
  }
}

Environment Variables

Variable

Default

Description

TLDRAW_WS_URL

ws://localhost:4000

Widget WebSocket URL

WS_PORT

4000

Widget WS server port

Development

# MCP server
bun run dev      # Run server
bun run build    # Build for distribution
bun run check    # TypeScript check

# Widget
cd widget
bun run dev      # Start vite + WS server

License

MIT

Available Tools

9 tools
clear_canvasA

Remove all shapes from the canvas

Inputs: no named parameters.

connect_shapesC

Connect two shapes with an arrow

Inputs: from (required), to (required), label.

create_flowchartC

Create a flowchart diagram with nodes and connections. Nodes are auto-arranged.

Inputs: nodes (required), edges, direction.

create_frameC

Create a frame to group shapes together

Inputs: x (required), y (required), width, height, +1 more.

create_shapeC

Create a shape on the canvas (rectangle, ellipse, text, note, etc.)

Inputs: type (required), x (required), y (required), width, +5 more.

delete_shapesC

Delete one or more shapes from the canvas

Inputs: ids (required).

get_snapshotB

Get current state of all shapes on the canvas

Inputs: no named parameters.

update_shapeC

Update properties of an existing shape

Inputs: id (required), x, y, width, +4 more.

zoom_to_fitA

Zoom the canvas to fit all shapes in view

Inputs: no named parameters.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

Loading tool schema changelog…

    Deploy Server
    Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

    TDQS

    A3.6/5.0

    Scored across 9 tools

    Disambiguation5/5

    Every tool has a clearly distinct purpose with no ambiguity. For example, create_shape makes individual shapes, create_frame groups them, create_flowchart auto-arranges nodes, and connect_shapes specifically adds arrows between shapes. The actions (clear, create, delete, get, update, zoom) are well-separated by target objects.

    Naming Consistency5/5

    All tools follow a consistent verb_noun pattern using snake_case throughout. Verbs like create, delete, update, get, clear, connect, and zoom are applied predictably to nouns like canvas, shapes, flowchart, frame, snapshot, ensuring readability and predictability across the set.

    Tool Count5/5

    With 9 tools, this is well-scoped for a diagramming/canvas server. Each tool earns its place by covering distinct operations like creation, modification, deletion, viewing, and canvas management, without being overly sparse or bloated for the domain.

    Completeness5/5

    The tool surface provides complete CRUD/lifecycle coverage for canvas shapes and diagrams. It includes creation (create_shape, create_frame, create_flowchart), reading (get_snapshot), updating (update_shape, connect_shapes), deletion (delete_shapes, clear_canvas), and utility (zoom_to_fit), with no obvious gaps for the stated purpose.

    Maintenance

    ActivityInactive
    ResponsivenessNo recent community issues

    Resources

    Related MCP Connectors

    Related MCP Servers