Skip to main content
Glama
Sign In
deenesjakoruzh
tl-draw-mcp

tl-draw-mcp

by Siddharth11Roy
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript
Local

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

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 获取设计说明，查看 LICENSE 获取 MIT 条款。

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

    This server cannot be deployed

    Claude Code, inside the Godot 4 editorFlockbay puts an AI agent in the real Godot 4 editor: it writes GDScript, runs your game and fixes what breaks. Free, or bring your own Claude Code or Codex.flockbay.comAd

    Maintenance

    ActivityInactive
    ResponsivenessLimited data

    Resources

    Related MCP Connectors

    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.
      14 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.
      3,181 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.
      3,181 npm
      2
      MIT