web-mcp-extending-excalidraw.vercel.app
A whiteboard that gets better when a human and an agent draw on it together.
First seen 2026-11-05 · Last seen 2026-11-05 · Source: webmcp.com
Answer 4 · Act 21 · Transact 0 · Score: Not yet scored
Tool inspector
add_elements
Draw new shapes, text and arrows on the canvas. Use this for freeform or small structures; prefer draw_flowchart when the user describes a process with steps, and draw_chart/draw_table for data. Bindings are the important part: give each shape a "tempId", then an arrow with start/end referring to those tempIds will attach to the shapes and re-route automatically when the human drags them. Put text inside a shape with "label", not as a separate text element. You usually should NOT pass x/y — omit them and the content is placed where the human is looking. Example: {"elements":[ {"tempId":"a","type":"rectangle","label":"Draft"}, {"tempId":"b","type":"rectangle","label":"Review","x":300,"y":0}, {"tempId":"e","type":"arrow","label":"submit","start":{"tempId":"a"},"end":{"tempId":"b"}} ]}
Input schema
| Property | Type | Required | Description |
|---|---|---|---|
elements |
array | yes | The shapes to draw. Coordinates are relative to each other; the whole group gets positioned by `placement`. |
placement |
— | no | Where to put it. Omit for the centre of the human's current view. {"mode":"next_to","refId":"<id>","side":"right"} places it beside an existing element; {"mode":"free_space"} puts it clear of everything already drawn. |
Raw JSON schema
{
"$schema": "https://json-schema.org/draft/2020-12/schema",
"type": "object",
"properties": {
"elements": {
"description": "The shapes to draw. Coordinates are relative to each other; the whole group gets positioned by `placement`.",
"minItems": 1,
"maxItems": 40,
"type": "array",
"items": {
"type": "object",
"properties": {
"tempId": {
"description": "Your own name for this element, so later elements in the same call can bind arrows to it.",
"type": "string"
},
"type": {
"type": "string",
"enum": [
"rectangle",
"ellipse",
"diamond",
"text",
"arrow",
"line",
"frame"
]
},
"label": {
"description": "Text INSIDE a shape, or ON an arrow. Prefer this over a separate text element — it stays centred and moves with the shape.",
"type": "string"
},
"text": {
"description": "Content for type \"text\" only.",
"type": "string"
},
"x": {
"type": "number"
},
"y": {
"type": "number"
},
"width": {
"type": "number"
},
"height": {
"type": "number"
},
"start": {
"description": "Arrows only. Bind the tail: {\"tempId\":\"a\"} for something in this call, {\"id\":\"<realId>\"} for an existing element.",
"type": "object",
"properties": {
"tempId": {
"type": "string"
},
"id": {
"type": "string"
}
}
},
"end": {
"description": "Arrows only. Bind the head, same shape as `start`.",
"type": "object",
"properties": {
"tempId": {
"type": "string"
},
"id": {
"type": "string"
}
}
},
"children": {
"description": "Frames only: real ids of the elements this frame contains.",
"type": "array",
"items": {
"type": "string"
}
},
"name": {
"description": "Frames only: the frame's title.",
"type": "string"
},
"strokeColor": {
"description": "Hex, e.g. \"#e03131\".",
"type": "string"
},
"backgroundColor": {
"description": "Fill, e.g. \"#ffec99\". Use \"transparent\" for none.",
"type": "string"
},
"fillStyle": {
"type": "string",
"enum": [
"hachure",
"cross-hatch",
"solid"
]
},
"strokeWidth": {
"type": "number"
},
"roughness": {
"description": "0 = clean lines, 1 = hand-drawn (default), 2 = sketchy.",
"type": "number"
},
"fontSize": {
"type": "number"
},
"opacity": {
"type": "number",
"minimum": 0,
"maximum": 100
}
},
"required": [
"type"
]
}
},
"placement": {
"description": "Where to put it. Omit for the centre of the human's current view. {\"mode\":\"next_to\",\"refId\":\"<id>\",\"side\":\"right\"} places it beside an existing element; {\"mode\":\"free_space\"} puts it clear of everything already drawn.",
"anyOf": [
{
"type": "object",
"properties": {
"mode": {
"type": "string",
"const": "viewport"
}
},
"required": [
"mode"
]
},
{
"type": "object",
"properties": {
"mode": {
"type": "string",
"const": "next_to"
},
"refId": {
"type": "string"
},
"side": {
"type": "string",
"enum": [
"right",
"below",
"left",
"above"
]
},
"gap": {
"type": "number"
}
},
"required": [
"mode",
"refId"
]
},
{
"type": "object",
"properties": {
"mode": {
"type": "string",
"const": "free_space"
}
},
"required": [
"mode"
]
},
{
"type": "object",
"properties": {
"mode": {
"type": "string",
"const": "absolute"
},
"x": {
"type": "number"
},
"y": {
"type": "number"
}
},
"required": [
"mode",
"x",
"y"
]
}
]
}
},
"required": [
"elements"
],
"additionalProperties": false
}
Similar websites
morphus.myles4miles.chatgpt.site
Morphus is an AI-native workspace for designing worlds and generating playable game experiences.
damnpdfs.com
Install the DamnPDFs Codex plugin, pair a browser workspace and use PDF, image and file tools from your coding agent. Includes setup and privacy limits.
insignifi4nt.github.io
broCAD/M: local-first CAD and CAM for parametric design, wire EDM planning, simulation and controller export.
cabinet.varera.studio
The Cartographer's Cabinet