MCPサーバー

tldraw

            io.github.tldraw/tldraw
        

デザイン・クリエイティブ生産性公開・接続可能 MCP 2025-11-25

このMCPでできること

Creates, edits, searches, and persists collaborative diagrams and visual content on tldraw canvases.

exec

Execute Code

Execute 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' })

入力スキーマ

{'type': 'object', '$schema': 'http://json-schema.org/draft-07/schema#', 'required': ['code'], 'properties': {'code': {'type': 'string', 'description': 'JavaScript code to execute. Has access to `editor` (tldraw Editor instance) and helper functions.'}, 'canvasId': {'type': 'string', 'description': 'Canvas ID to edit. Omit to create a new blank canvas. Pass a canvasId from a previous exec result to continue editing that canvas.'}}}

_exec_callback

Exec Callback

App-only: widget calls this to resolve a pending exec request.

入力スキーマ

{'type': 'object', '$schema': 'http://json-schema.org/draft-07/schema#', 'required': ['channel'], 'properties': {'error': {'type': 'string'}, 'result': {'type': 'object', 'required': ['success'], 'properties': {'error': {'type': 'string'}, 'result': {}, 'success': {'type': 'boolean'}, 'canvasId': {'type': 'string'}}}, 'channel': {'type': 'string'}, 'execKey': {'type': 'string'}}}

_get_canvas_state

Get Canvas State

App-only: get the latest checkpoint for a canvas by its canvasId.

読み取り専用冪等

入力スキーマ

{'type': 'object', '$schema': 'http://json-schema.org/draft-07/schema#', 'required': ['canvasId'], 'properties': {'canvasId': {'type': 'string', 'minLength': 1}}}

read_checkpoint

Read Checkpoint

App-only: read shapes from a checkpoint by ID.

読み取り専用冪等

入力スキーマ

{'type': 'object', '$schema': 'http://json-schema.org/draft-07/schema#', 'required': ['checkpointId'], 'properties': {'checkpointId': {'type': 'string', 'minLength': 1}}}

save_checkpoint

Save Checkpoint

App-only: save shapes to a checkpoint (from user edits). shapesJson and assetsJson must be JSON array strings.

入力スキーマ

{'type': 'object', '$schema': 'http://json-schema.org/draft-07/schema#', 'required': ['checkpointId', 'shapesJson'], 'properties': {'canvasId': {'type': 'string'}, 'assetsJson': {'type': 'string'}, 'shapesJson': {'type': 'string'}, 'bindingsJson': {'type': 'string'}, 'checkpointId': {'type': 'string', 'minLength': 1}}}

Search Editor API

Search 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")

読み取り専用冪等

入力スキーマ

{'type': 'object', '$schema': 'http://json-schema.org/draft-07/schema#', 'required': ['code'], 'properties': {'code': {'type': 'string', 'description': 'JavaScript code that receives `spec` and returns a result. Must use `return` to produce output.'}}}

追加

                            save_checkpoint
                        

2026年9月17日12:52

追加

                            read_checkpoint
                        

2026年9月17日12:52

追加

                            _get_canvas_state
                        

2026年9月17日12:52

追加

                            _exec_callback
                        

2026年9月17日12:52

追加

                            exec
                        

2026年9月17日12:52

追加

                            search
                        

2026年9月17日12:52

サーバー情報

バージョン

0.1.0

通信方式

Streamable HTTP

ツール

レイテンシ

733 ms

最終スキャン

2026年10月1日2:50

初回確認

2026年9月13日2:23

エンドポイント

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

tldraw

このMCPでできること

ツール

最近のツール変更

類似のMCPサーバー

cnvs.app

DocuQueue MCP

Renderball

getdeck

Canvs

slide-deck.io

MindMap

IndianAppGuy-magicslide-mcp-actual-test