tldraw

You run a minimal MCP server that enables AI clients to drive and inspect a tldraw canvas by bridging an AI workflow to a local WebSocket-based widget. This MCP server connects an AI client to the tldraw canvas, allowing you to create, modify, and organize shapes through scripted commands and AI-driven actions.

How to use

To use this MCP server with your AI client, start the local widget that hosts the tldraw canvas and the WebSocket relay, then run the MCP server so your AI client can send commands and receive updates.

How to install

Prerequisites: Node or a compatible JavaScript runtime that supports Bun commands, and a shell to run commands.

Additional content

Claude Desktop can be configured to connect to the MCP server using a local runtime command. Use the exact command and arguments shown below to enable Claude to communicate with the MCP server.

Configuration example for Claude Desktop

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

Environment variables

The following environment variables are used by the MCP setup. Set these in your environment or in your runner configuration to ensure the widget and server communicate correctly.

Development notes

For development, you can run the MCP server separately from the widget. The widget serves the canvas on port 3000 and uses a WebSocket relay on port 4000 to communicate with the MCP server.

Available tools

create_shape

Create shapes on the canvas, such as rectangle, ellipse, star, cloud, diamond, and more.

update_shape

Update shape properties including position, size, color, and fill.

delete_shapes

Delete shapes by their IDs.

connect_shapes

Connect two shapes with an arrow to indicate relationship or flow.

create_frame

Group shapes together inside a frame for organization.

create_flowchart

Create a flowchart with nodes and edges using auto-layout.

get_snapshot

Retrieve the current canvas state as a snapshot.

zoom_to_fit

Zoom the canvas so all shapes are visible.

clear_canvas

Remove all shapes from the canvas.