tldraw

Draw and visually collaborate with your agents on tldraw's canvas.

От сообществаРаботаетБез входаГлобальныйБесплатноТолько чтение

Что умеет

    Какие данные видит

    Нужен ли аккаунт

    Не нужен: сервер работает без входа

    Draw and visually collaborate with your agents on tldraw's canvas.

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

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

    Адрес сервера, который нужно вставить в настройках Claude:

    https://tldraw-mcp-app.tldraw.workers.dev/mcp

    1. Откройте Claude (сайт claude.ai или приложение для компьютера).
    2. Перейдите в Настройки → Коннекторы (в английском интерфейсе: Settings → Connectors).
    3. Нажмите Добавить пользовательский коннектор (Add custom connector).
    4. Вставьте адрес сервера, скопированный ниже, в поле URL удалённого MCP-сервера и нажмите Добавить.
    5. В чате нажмите + → Коннекторы и включите новый коннектор.

    Пользовательские коннекторы доступны на тарифах Free, Pro, Max, Team и Enterprise. На Free можно добавить только один. В Team и Enterprise коннектор сначала добавляет владелец организации в Настройки организации → Коннекторы.

    Авторизация

    После нажатия Добавить откроется окно входа в сервис. Войдите под своим аккаунтом и подтвердите доступ. Пароль Claude не видит.

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

    Адрес сервера, который нужно вставить в настройках ChatGPT:

    https://tldraw-mcp-app.tldraw.workers.dev/mcp

    1. Откройте ChatGPT в браузере (chatgpt.com). Нужен тариф Plus, Pro, Business, Enterprise или Edu.
    2. Один раз включите режим разработчика: Настройки → Приложения → Дополнительные настройки → Режим разработчика (Settings → Apps → Advanced settings → Developer mode).
    3. Откройте Настройки → Коннекторы и нажмите Создать (Create).
    4. Заполните форму: Название (любое), Описание (одна фраза, что делает сервис), URL MCP-сервера (скопируйте ниже).
    5. В поле Аутентификация выберите OAuth, если сервис требует вход, иначе Нет. Нажмите Создать.
    6. В новом чате откройте + → Приложения/Коннекторы и включите коннектор.

    Название раздела у OpenAI менялось (Connectors → Apps/Plugins). Если пункт называется иначе, ищите «режим разработчика» в настройках. В рабочих пространствах Business/Enterprise администратор должен разрешить пользовательские коннекторы.

    Авторизация

    При первом использовании ChatGPT откроет окно входа в сервис. Войдите и подтвердите доступ.

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

    Адрес сервера, который нужно вставить в настройках Cursor:

    https://tldraw-mcp-app.tldraw.workers.dev/mcp

    Быстрый способ: нажмите кнопку Открыть в Cursor ниже, Cursor сам предложит добавить сервер.

    Вручную:

    1. В Cursor откройте Settings → Cursor Settings → MCP и нажмите Add new global MCP server.
    2. Вставьте JSON, скопированный ниже, в открывшийся файл ~/.cursor/mcp.json (для одного проекта: .cursor/mcp.json в корне проекта).
    3. Сохраните файл. Сервер появится в списке MCP; при необходимости пройдите авторизацию по кнопке рядом с ним.

    Авторизация

    Если сервис требует вход, рядом с сервером в списке MCP появится кнопка авторизации.

    Список инструментов сервера (6)

    Технические названия из tools/list. Нужны только разработчикам.

    searchSearch the tldraw Editor API spec by writing JavaScript that receives a `spec` object and returns a result. The spec contains: spec.members (all Editor methods/properties with name, kind, signature, description, category), spec.categories (category names), spec.types.shapes (focused shape type definitions with props), spec.types.shapeTypes (list of all shape type strings), spec.helpers (exec helper functions with descriptions, params, examples). Examples: - Find shape methods: return spec.members.filter(m => m.category === "shapes").map(m => ({ name: m.name, signature: m.signature })) - Get arrow shape props: return spec.types.shapes.find(s => s.shapeType === "arrow") - List all categories: return spec.categories - Find a helper: return spec.helpers.find(h => h.name === "createArrowBetweenShapes")
    execExecute JavaScript code on a tldraw canvas. The code runs in the widget with access to the live `editor` instance, helper functions, and normal js. Use the `search` tool first to discover available Editor methods and shape types. Each canvas has a unique `canvasId`. Omit `canvasId` to create a new blank canvas. To edit an existing canvas, pass the `canvasId` that was returned by a previous exec call. Shapes and text grow depending on the amount of text they have. Use clever scripting to ensure there are no unintended overlaps. Examples: - Create a rectangle: editor.createShape({ _type: 'rectangle', shapeId: 'box1', x: 200, y: 120, w: 320, h: 180, text: 'Hello' }) - Connect shapes with an arrow: editor.createShape({ _type: 'arrow', shapeId: 'a1', fromId: 'box1', toId: 'box2', x1: 0, y1: 0, x2: 100, y2: 0 }) - Select and zoom: editor.select('box1'); editor.zoomToSelection() - Read shapes: return editor.getCurrentPageShapes() - Distribute evenly: editor.distributeShapes(editor.getSelectedShapeIds(), 'horizontal') - Box around shapes: boxShapes(['box1', 'box2'], { text: 'Group label', color: 'blue' }) - Stack shapes dynamically: editor.createShape({ _type: 'rectangle', shapeId: 'a', x: 0, y: 0, w: 300, h: 200, text: 'First box\nwith wrapping text' }); const bounds = editor.getShapePageBounds('a'); editor.createShape({ _type: 'rectangle', shapeId: 'b', x: 0, y: bounds.maxY + 20, w: 300, h: 200, text: 'Below first' })
    _exec_callbackApp-only: widget calls this to resolve a pending exec request.
    _get_canvas_stateApp-only: get the latest checkpoint for a canvas by its canvasId.
    read_checkpointApp-only: read shapes from a checkpoint by ID.
    save_checkpointApp-only: save shapes to a checkpoint (from user edits). shapesJson and assetsJson must be JSON array strings.
    tldraw: подключить к Claude, ChatGPT, Cursor · Connectors.fun