Which integrations are available for this server?

Provides tools for creating, updating, deleting shapes and retrieving canvas state on a live tldraw canvas, enabling AI agents to draw diagrams and flowcharts in real time.

How do I use tl-draw-mcp?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@tl-draw-mcp draw a simple flowchart showing the user login 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.

de en es ja ko ru zh

tl-draw-mcp

by Siddharth11Roy

Overview Schema Related Servers Score Discussions

TypeScript

Local

tl-draw-mcp

MCP server + Claude Code skill that lets Claude draw on a live tldraw canvas from prompts.

Open http://localhost:3030 in any browser → Claude's drawings appear in real time.
Four tools: create_shape, update_shape, delete_shape, get_canvas.
Pure-JS, MIT, Windows-first.

1. Install

git clone <this repo> tl-draw-mcp
cd tl-draw-mcp
npm install
cd packages\web    && npm run build
cd ..\server       && npm run build

2. Wire it into Claude Code

One-liner (recommended — no JSON editing):

claude mcp add tldraw --scope user -- cmd /c node "D:/path/to/tl-draw-mcp/packages/server/dist/index.js"

Verify:

claude mcp list

You should see tldraw listed. Restart Claude Code.

3. Install the skill

Copy the skill folder so Claude knows when to draw:

xcopy /E /I .claude\skills\tldraw %USERPROFILE%\.claude\skills\tldraw

4. Use

Start Claude Code in any project.
First tool call will spin up the server — open http://localhost:3030.
Badge at the bottom-right reads tldraw MCP · connected.
Prompt:
Draw a flowchart of a login flow.

5. Develop

cd packages\server && npm test           :: 12 handler tests
cd packages\server && npm run dev        :: stdio + WS bridge on :3030
cd packages\web    && npm run dev        :: Vite HMR on :5173

6. Layout

packages/server   MCP stdio server, WS bridge, static host, tool handlers
packages/web      Vite + React + tldraw browser app (builds into server/public)
.claude/skills/   SKILL.md for Claude Code
examples/         sample MCP config (if you prefer JSON over the CLI)

7. Troubleshooting

Symptom	Fix
Badge says `connected` but Claude says "no browser"	Stale server on :3030. `taskkill /F /IM node.exe`, close tabs, restart Claude Code.
Tldraw validation error in browser	Clear IndexedDB (F12 → Application → IndexedDB → delete `TLDRAW_*`), hard refresh.
Port :3030 busy	Server auto-falls-back to :3031 etc. Check MCP logs via `/mcp` for the real URL.
`npm install` peer-dep error	Retry with `npm install --legacy-peer-deps`.

See plan.md for design notes and LICENSE for MIT terms.

This server cannot be installed

security - not tested

license - permissive license

quality - not tested

How are these scores calculated?

Resources

GitHub Repository

Need Help?

Related Servers

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Latest Blog Posts

Tool Definition Quality Score (TDQS)
By punkpeye on April 3, 2026.
mcp
The Hackers Who Tracked My Sleep Cycle
By punkpeye on March 26, 2026.
security
Open Source Has a Bot Problem
By punkpeye on March 19, 2026.
open source

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/Siddharth11Roy/tldraw-claude-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server