Skip to main content
Glama
deenesjakoruzh
Siddharth11Roy

tl-draw-mcp

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