Skip to main content
Glama
deenesjakoruzh
Siddharth11Roy

tl-draw-mcp

by Siddharth11Roy
OverviewSchemaRelated ServersScoreDiscussions
TypeScript
Local

tl-draw-mcp

Claudeがプロンプトからライブのtldrawキャンバスに描画できるようにするMCPサーバー + Claude Codeスキルです。

  • ブラウザで http://localhost:3030 を開くと、Claudeの描画がリアルタイムで表示されます。

  • 4つのツール: create_shape、update_shape、delete_shape、get_canvas。

  • 純粋なJS、MITライセンス、Windows優先。

1. インストール

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. Claude Codeへの組み込み

ワンライナー（推奨 — JSONの編集は不要）:

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

確認:

claude mcp list

tldraw がリストに表示されるはずです。Claude Codeを再起動してください。

3. スキルのインストール

Claudeがいつ描画すべきかを認識できるように、スキルフォルダーをコピーします:

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

4. 使用方法

  1. 任意のプロジェクトでClaude Codeを起動します。

  2. 最初のツール呼び出しでサーバーが起動します — http://localhost:3030 を開いてください。

  3. 右下のバッジに tldraw MCP · connected と表示されます。

  4. プロンプト:

    ログインフローのフローチャートを描いて。

5. 開発

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. レイアウト

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. トラブルシューティング

症状

解決策

バッジは connected だがClaudeが「ブラウザがない」と言う

:3030でサーバーがスタックしています。taskkill /F /IM node.exe を実行し、タブを閉じて、Claude Codeを再起動してください。

ブラウザでTldrawの検証エラーが発生する

IndexedDBをクリア（F12 → Application → IndexedDB → TLDRAW_* を削除）し、ハードリフレッシュしてください。

ポート :3030 が使用中

サーバーは自動的に :3031 などにフォールバックします。/mcp 経由でMCPログを確認し、実際のURLを確認してください。

npm install でピア依存関係エラーが発生する

npm install --legacy-peer-deps で再試行してください。

設計メモについては plan.md を、MITライセンス条項については LICENSE を参照してください。

This server cannot be installed

A
license - permissive license
Not graded
quality - not tested
D
maintenance

How are these scores calculated?

Maintenance

–Maintainers
–Response time
–Release cycle
–Releases (12mo)
Commit activity

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

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

Related MCP Servers

  • tldraw MCP

    talhaorak
    A
    license
    Not graded
    quality
    D
    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.
    25
    3
    MIT

  • Excalidraw MCP Server

    kakacoding1
    A
    license
    Not graded
    quality
    F
    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.
    3,023
    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.
    3,023
    MIT

View all related MCP servers

Related MCP Connectors

  • pepita

    Read, edit, publish, and preview your pepita websites from Claude.

  • jsoncanvas

    Create, validate, edit, export (markdown/svg/png/mermaid), and search JSON Canvas files.

  • cnvs.app

    Real-time collaborative whiteboard — AI agents and humans edit the same board live over MCP.

View all MCP Connectors

Latest Blog Posts

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