Skip to main content
Glama
deenesjakoruzh
Siddharth11Roy

tl-draw-mcp

by Siddharth11Roy
OverviewSchemaSourceRelated ServersDiscussionsAdmin
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 deployed

Shareable, User-Owned Context BackendPeople, applications, and agents read, write, and coordinate together in one context lake. Reach it over MCP, a CLI, a Python SDK, or REST.fulcradynamics.comAd

Maintenance

ActivityStale
ResponsivenessUnresponsive

Resources

Related MCP Connectors

Related MCP Servers

  • tldraw MCP

    talhaorak
    A
    license
    Not graded
    quality
    C
    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.
    23 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.
    4,412 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.
    4,412 npm
    2
    MIT