tldraw

tldraw

tldrawNOASSERTION
47.6k звёзд3.3k форков
tldraw MCP — сервер, который открывает AI-ассистентам возможность рисовать и редактировать диаграммы, схемы, скетчи и другие графические элементы на бесконечном холсте. Вместо того чтобы описывать словами структуру или архитектуру, вы можете попросить ассистента сразу нарисовать её. Всё появляется на холсте tldraw в реальном времени — вы видите результат и можете продолжать редактировать. Сервер подходит разработчикам, которые проектируют системы, документируют архитектуру, создают инструкции или прототипы интерфейсов. Полезен командам, использующим AI для генерации визуального контента, и всем, кто хочет ускорить создание наглядных материалов через диалог с ассистентом. tldraw MCP построен на базе одноимённого SDK и предоставляет AI доступ к основным возможностям движка: создание фигур, работа с текстом, стрелками, изображениями, слоями и совместное редактирование. Благодаря поддержке протоколов streamable-http и SSE сервер легко интегрируется как в локальные, так и в удалённые сценарии.
Design
Открыть на GitHub

Характеристики

Общее

  • СтатусСообщество
  • Разработчикtldraw
  • ЛицензияNOASSERTION

Технологии

  • Языки
    TypeScript
  • Транспорт
    streamable-httpsse

Описание

Возможности

  • Создание геометрических фигур: прямоугольники, эллипсы, линии, многоугольники, ромбы — с настраиваемыми цветами, размерами и стилями обводки.
  • Текстовые блоки с форматированием: жирный, курсив, маркированные списки, нумерация, ссылки.
  • Рисование от руки с поддержкой чувствительности к нажатию (карандаш, перо, тонкие линии).
  • Стрелки с привязкой к фигурам и автоматическим выравниванием; возможность добавлять текстовые метки.
  • Вставка изображений и видео — по URL или загрузкой; встроенный просмотр.
  • Экспорт содержимого холста в форматы PNG, SVG и JSON.
  • Управление слоями: перемещение объектов на передний/задний план, группировка, блокировка, скрытие.
  • Масштабирование и панорамирование: переход к определённой области, установка масштаба.
  • Совместная работа в реальном времени — несколько AI-агентов или людей одновременно редактируют один холст (требуется настройка @tldraw/sync).
  • Встраивание интерактивных веб-страниц: YouTube, Figma, GitHub, CodePen и другие прямо на холст.

Как подключить

  1. Установите сервер через npm:
    npm install @tldraw/mcp
  2. Добавьте конфигурацию в ваш MCP-клиент (пример для Claude Desktop с использованием npx):
    { "mcpServers": { "tldraw": { "command": "npx", "args": ["@tldraw/mcp"] } } }
    Если сервер запущен как HTTP-сервер, укажите URL и тип транспорта:
    { "mcpServers": { "tldraw": { "url": "http://localhost:3100/mcp", "type": "streamable-http" } } }
  3. Перезапустите клиент. После этого вы сможете поручать AI-ассистенту создавать и редактировать рисунки на холсте tldraw.

Примеры запросов

  • «Создай диаграмму базы данных: таблицы «Пользователи» и «Заказы», связанные стрелкой один-ко-многим. Подпиши поля каждой таблицы.»
  • «Нарисуй блок-схему логина пользователя: овал «Начало», прямоугольник «Ввод данных», ромб «Верно?», стрелки «Да» и «Нет».»
  • «Загрузи изображение по ссылке https://example.com/logo.png и помести его в левый верхний угол холста.»
  • «Выровняй все фигуры по горизонтали и сгруппируй их. Затем экспортируй результат в PNG.»

Технические детали

Язык: TypeScript
Транспорт: streamable-http, SSE
Лицензия: NOASSERTION
Совместимость: любые MCP-клиенты, поддерживающие транспорт streamable-http или SSE (Claude Desktop, продолжение в VS Code и другие).

Поделиться