Skip to main content
Glama
deenesjakoruzh
Siddharth11Roy

tl-draw-mcp

by Siddharth11Roy
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Local

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

Related MCP server: Excalidraw MCP Server

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

Symptom

Lösung

Badge zeigt connected, aber Claude sagt "no browser"

Veralteter Server auf :3030. taskkill /F /IM node.exe, Tabs schließen, Claude Code neu starten.

Tldraw-Validierungsfehler im Browser

IndexedDB leeren (F12 → Anwendung → IndexedDB → TLDRAW_* löschen), Hard-Refresh durchführen.

Port :3030 belegt

Server weicht automatisch auf :3031 usw. aus. Überprüfen Sie die MCP-Protokolle über /mcp auf die tatsächliche URL.

npm install Peer-Dep-Fehler

Erneut versuchen mit npm install --legacy-peer-deps.

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

This server cannot be deployed

Shareable, User-Owned Context BackendPeople, applications, and agents read, write, and coordinate together in one context lake. Reach it over MCP, a CLI, a Python SDK, or REST.fulcradynamics.comAd

Maintenance

ActivityStale
ResponsivenessUnresponsive

Resources

Related MCP Connectors

Related MCP Servers

  • tldraw MCP

    talhaorak
    A
    license
    Not graded
    quality
    C
    maintenance
    Enables AI agents to read, write, and search local tldraw (.tldr) files, providing a persistent visual scratchpad for diagramming and note organization. It supports full CRUD operations on canvas shapes and metadata management for local canvas files.
    23 npm
    3
    MIT

  • Excalidraw MCP Server

    kakacoding1
    A
    license
    Not graded
    quality
    D
    maintenance
    Enables AI agents to programmatically control a live Excalidraw canvas through element-level CRUD operations and real-time synchronization. It allows agents to iteratively build, inspect, and refine diagrams while providing visual feedback via screenshots and scene descriptions.
    4,412 npm
    MIT

  • Excalidraw MCP Server

    ignizia-code
    A
    license
    Not graded
    quality
    D
    maintenance
    Enables AI agents to programmatically control a live Excalidraw canvas with element-level CRUD operations and real-time synchronization. It supports iterative diagramming through scene descriptions, screenshots, and advanced layout tools for collaborative AI-human workflows.
    4,412 npm
    2
    MIT