About Tldraw Claude MCP
Tldraw Claude MCP is an MCP server published by Siddharth11Roy in the Developer Tools category: tldraw's live in mcp tool for claude with skill as well !!.
The repository has 15 stars and 0 forks, with the last commit 3 months ago. Recent commit activity is the strongest signal that reported issues will get attention.
Install
git clone https://github.com/Siddharth11Roy/tldraw-claude-mcpThis server has no ConduID identity, so agent calls to it are not receipted. Pin the version you install and review the source before granting it credentials.
Tools (6)
connect_shapesBound connectors between shapes that already exist.
Parameters not published.
create_diagramNode-and-edge diagram with automatic layout. **Use this for any graph.**
Parameters not published.
create_shapeShapes at explicit positions — free-form drawing, wireframes, annotation.
Parameters not published.
delete_shapeRemove shapes by id, or `{ all: true }` to clear.
Parameters not published.
get_canvasEverything on the canvas, including how arrows are wired.
Parameters not published.
update_shapeChange position, size, colour or text by id.
Parameters not published.
Ask AI
Ask AI about Tldraw Claude MCP
Powered by Claude · Grounded in docs
Security checks
- ✓README presentThe repository ships documentation.
5 checks have not been run yet.
README
tl-draw-mcp
MCP server + Claude Code skill that lets Claude draw on a live tldraw canvas from prompts.
- Open
http://localhost:3030in 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. |
I AM A BULK COMMITTER
LICENSE for MIT terms.
README copy captured when this server was indexed; it may lag the repository. The original is authoritative.