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

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. 使用方法

任意のプロジェクトでClaude Codeを起動します。
最初のツール呼び出しでサーバーが起動します — http://localhost:3030 を開いてください。
右下のバッジに tldraw MCP · connected と表示されます。
プロンプト:
ログインフローのフローチャートを描いて。

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` で再試行してください。