Skip to main content
Glama
deenesjakoruzh
Siddharth11Roy

tl-draw-mcp

by Siddharth11Roy
OverviewSchemaRelated ServersScoreDiscussions
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 条款。

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