tldraw-mcp
Enables AI-driven manipulation of a tldraw canvas, including tools for creating, updating, and deleting shapes, managing frames, and generating auto-layout flowcharts.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@tldraw-mcpDraw a flowchart showing the user authentication process"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
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) │
└─────────────┘ └─────────────┘ └─────────────┘
:3000Related MCP server: tldraw MCP Server
Tools
Tool | Description |
| Create shapes (rectangle, ellipse, star, cloud, diamond, etc.) |
| Update shape properties (position, size, color, fill) |
| Delete shapes by ID |
| Connect two shapes with an arrow |
| Create a frame to group shapes together |
| Create a flowchart with nodes and edges (auto-layout) |
| Get current canvas state |
| Zoom canvas to fit all shapes |
| 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 devClaude 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 |
|
| Widget WebSocket URL |
|
| 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 serverLicense
MIT
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Servers
- FlicenseAqualityBmaintenanceMinimal MCP server for editing tldraw .tldr files via JSON manipulation. Headless, no browser needed.Last updated181
- Alicense-qualityBmaintenanceAn MCP server that gives AI agents programmatic control over a live tldraw canvas, enabling diagram creation through natural language.Last updated1MIT
- Flicense-qualityFmaintenanceAn MCP server that enables AI agents to create beautiful ASCII diagrams using Unicode box-drawing characters, with support for stateful canvas operations, multiple shape types, and style customization.Last updated2
- Alicense-qualityBmaintenanceA MCP server that bridges web canvas with local Codex/Claude, exposing 23 tools for reading, creating, modifying, connecting, and generating canvas content via local HTTP bridge and stdio MCP.Last updatedAGPL 3.0
Related MCP Connectors
Connect AI agents to Flato's editable canvas runtime through a hosted MCP server.
Cloud-hosted MCP server for durable AI memory
MCP server for Hailuo (MiniMax) AI video generation
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/dpunj/tldraw-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server