Draw and visually collaborate with your agents on tldraw's canvas.
Maintain this server? Claim it
Call this server's tools from your browser. Nothing to install.
Requests go through mcptry because browsers can't call most MCP servers directly. Header values are sent to the server for that request only and are never stored or logged.
Tool list from our last check. Connect live to refresh it.
App-only: widget calls this to resolve a pending exec request.
This tool isn't marked read-only, so it may change something on the server or in an account you connected.
App-only: widget calls this to resolve a pending exec request.
| Argument | Type | Description |
|---|---|---|
| error | string | |
| result | object | |
| channel* | string | |
| execKey | string |
{
"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"
}
}
}App-only: get the latest checkpoint for a canvas by its canvasId.
| Argument | Type | Description |
|---|---|---|
| canvasId* | string |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"required": [
"canvasId"
],
"properties": {
"canvasId": {
"type": "string",
"minLength": 1
}
}
}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' })
| Argument | Type | Description |
|---|---|---|
| code* | string | JavaScript code to execute. Has access to `editor` (tldraw Editor instance) and helper functions. |
| canvasId | string | Canvas ID to edit. Omit to create a new blank canvas. Pass a canvasId from a previous exec result to continue editing that canvas. |
{
"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."
}
}
}App-only: read shapes from a checkpoint by ID.
| Argument | Type | Description |
|---|---|---|
| checkpointId* | string |
{
"type": "object",
"$schema": "http://json-schema.org/draft-07/schema#",
"required": [
"checkpointId"
],
"properties": {
"checkpointId": {
"type": "string",
"minLength": 1
}
}
}App-only: save shapes to a checkpoint (from user edits). shapesJson and assetsJson must be JSON array strings.
| Argument | Type | Description |
|---|---|---|
| canvasId | string | |
| assetsJson | string | |
| shapesJson* | string | |
| bindingsJson | string | |
| checkpointId* | string |
{
"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 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")
| Argument | Type | Description |
|---|---|---|
| code* | string | JavaScript code that receives `spec` and returns a result. Must use `return` to produce output. |
{
"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."
}
}
}