tl-draw-mcp

MCP-Server + Claude Code-Skill, mit dem Claude basierend auf Prompts auf einer Live-tldraw-Leinwand zeichnen kann.

• Öffnen Sie http://localhost:3030 in einem beliebigen Browser → Claudes Zeichnungen erscheinen in Echtzeit.

• Vier Werkzeuge: create_shape, update_shape, delete_shape, get_canvas.

• Reines JS, MIT-Lizenz, Windows-fokussiert.

1. Installation

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. In Claude Code einbinden

Einzeiler (empfohlen — keine JSON-Bearbeitung erforderlich):

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

Überprüfung:

claude mcp list

Sie sollten tldraw in der Liste sehen. Starten Sie Claude Code neu.

3. Skill installieren

Kopieren Sie den Skill-Ordner, damit Claude weiß, wann er zeichnen soll:

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

4. Verwendung

1. Starten Sie Claude Code in einem beliebigen Projekt.

2. Der erste Werkzeugaufruf startet den Server — öffnen Sie http://localhost:3030.

3. Das Badge unten rechts zeigt tldraw MCP · connected an.

4. Prompt:

   Zeichne ein Flussdiagramm eines Login-Ablaufs.

5. Entwicklung

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. Fehlerbehebung

Siehe plan.md für Design-Notizen und LICENSE für die MIT-Bedingungen.