tl-draw-mcp

MCP 服务器 + Claude Code 技能，让 Claude 可以根据提示在实时 tldraw 画布上绘图。

在任何浏览器中打开 http://localhost:3030 → Claude 的绘图会实时显示。
四个工具：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` 重试。