tldraw — MCP-сервер для Claude Code: что делает и как установить
Даёт агенту интерактивный холст tldraw: он может рисовать, менять объекты и сохранять состояние между обращениями.
claude mcp add --transport http tldraw https://tldraw-mcp-app.tldraw.workers.dev/mcpЧто делает tldraw
Сервер подключает интерактивный холст tldraw к MCP-клиенту. Агент ищет сведения в спецификации Editor API через search, а через exec выполняет JavaScript в живом редакторе. Виджет на React запускается внутри iframe MCP-хоста и переводит упрощённые формы объектов в типы tldraw.
Состояние холста сохраняется в SQLite внутри Durable Object и в локальном хранилище браузера. Сервер также предоставляет инструменты для записи и чтения контрольных точек. Для локальной разработки ChatGPT нужен cloudflared, вход в Cloudflare и HTTPS-туннель, поэтому обычного локального HTTP-порта недостаточно.
Какие задачи решает
- рисовать на холсте по описанию
- изменять объекты в открытом редакторе
- искать методы в Editor API
- сохранять контрольные точки холста
- подключать tldraw к MCP-клиенту
Примеры запросов агенту
- Нарисуй на холсте схему потока авторизации и подпиши каждый шаг.
- Открой текущий холст и измени цвет всех фигур, связанных с API.
- Найди в Editor API метод для работы с выбранными объектами и выполни его на холсте.
Как установить tldraw
Командой платформы: удалённый сервер
claude mcp add --transport http tldraw https://tldraw-mcp-app.tldraw.workers.dev/mcpКомандой платформы: удалённый сервер
codex mcp add mcp-app --url https://tldraw-mcp-app.tldraw.workers.dev/mcpФайл настроек
{
"mcpServers": {
"mcp-app": {
"url": "https://tldraw-mcp-app.tldraw.workers.dev/mcp"
}
}
}Файл настроек
{
"servers": {
"mcp-app": {
"type": "http",
"url": "https://tldraw-mcp-app.tldraw.workers.dev/mcp"
}
}
}Командой платформы: удалённый сервер
gemini mcp add -t http mcp-app https://tldraw-mcp-app.tldraw.workers.dev/mcpПо шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о tldraw
Как установить tldraw в Claude Code?
Выполните claude mcp add --transport http tldraw https://tldraw-mcp-app.tldraw.workers.dev/mcp, затем claude mcp add --transport http mcp-app https://tldraw-mcp-app.tldraw.workers.dev/mcp.
Что делает tldraw?
MCP-сервер даёт агенту интерактивный холст tldraw. Агент может искать методы Editor API, выполнять JavaScript в редакторе и работать с сохранёнными контрольными точками.
Что нужно для локальной разработки tldraw?
Для локальной работы ChatGPT нужен Cloudflare-туннель: установите cloudflared, выполните cloudflared tunnel login, затем запускайте pnpm dev:tunnel в apps/mcp-app.
