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. Использование

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. Устранение неполадок

См. plan.md для заметок по проектированию и LICENSE для условий MIT.