loading…
en/
Browse all
by Figma
by passerbyflutter
by NOVA-3951
by jangjo123
Tl Draw
FreeNot checkedEnables Claude to draw on a live tldraw canvas from prompts, with real-time visualization in a browser. Provides tools for creating, updating, deleting shapes a
About
Enables Claude to draw on a live tldraw canvas from prompts, with real-time visualization in a browser. Provides tools for creating, updating, deleting shapes and retrieving canvas state.
README
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.
Install Tl Draw in Claude Desktop, Claude Code & Cursor
Run in your terminal:
claude mcp add tl-draw-mcp -- npx FAQ
Is Tl Draw MCP free?
Yes, Tl Draw MCP is free — one-click install via Unyly at no cost.
Does Tl Draw need an API key?
No, Tl Draw runs without API keys or environment variables.
Is Tl Draw hosted or self-hosted?
Self-hosted: the server runs locally on your machine via the install command above.
How do I install Tl Draw in Claude Desktop, Claude Code or Cursor?
Open Tl Draw on unyly.org, pick your client tab (Claude Desktop, Claude Code, Cursor) and press Install — the config is generated automatically, no JSON editing.
Related MCPs
Figma
Extract design specs and assets
by Figma4.56.3K
LibreOffice Tools
Enables AI agents to read, write, and edit Office documents via LibreOffice with token-efficient design. Supports multiple formats including DOCX, XLSX, PPTX, a
by passerbyflutterLogo.dev
Search and retrieve company logos by brand or domain. Customize size, format, and theme to match your design needs. Accelerate design, prototyping, and content
by NOVA-3951PIX4Dmatic
Enables GUI automation for controlling PIX4Dmatic on Windows through MCP. Supports launching, focusing, capturing screenshots, sending hotkeys, clicking UI elem
by jangjo123Compare Tl Draw with
Not sure what to pick?
Find your stack in 60 seconds
Author?
Embed badge for your README
Browse similar
All design MCPs