# Drawbly for AI agents

Drawbly is a browser drawing canvas for editable diagrams, annotations and short drawing videos. The simplest agent path is a local recipe renderer that produces a credited PNG and an editable Drawbly drawing file. There is no hosted drawing API or generally available MCP server.

## Choose a path

1. **No setup:** Open [an editable agent workflow example](https://drawbly.com/?template=ai-agent-workflow). Edit marks in the browser, export a PNG, or download a `.drawing.json` file from Files. The canvas opens without signup.
2. **Terminal agent:** Download [the local renderer kit](https://drawbly.com/drawbly-renderer.zip), extract it, and run the commands below with Node.js 22.14 or newer. Image rendering requires no FFmpeg.
3. **Browser with WebMCP support:** Open the [canvas](https://drawbly.com/) and discover `read_drawing`, `add_drawing_text`, and `add_drawing_stroke`. This browser capability varies by browser. It edits the current browser draft and supports Undo. It is not a remote API.

## First local drawing

Inside the extracted renderer kit:

```sh
npm install
node render-image.mjs templates/api-request-flow.video.json first-drawing.png
```

The command writes `first-drawing.png` and `first-drawing.drawing.json` in the current folder. The PNG includes “Drawn with Drawbly” and drawbly.com. Open the drawing file in Drawbly through **Files → Open drawing file** to revise it. The renderer refuses to overwrite an existing output. `npm install` needs internet to install the canvas dependency; rendering itself does not call an AI service or upload files.

To make your own drawing, edit `templates/api-request-flow.video.json` or use this minimal valid recipe:

```json
{
  "kind": "drawbly-video", "version": 1,
  "title": "A simple handoff", "canvas": [1000, 700],
  "duration": 2, "framing": "original",
  "events": [
    {"at": 0, "duration": 0, "object":
      {"type": "text", "text": "Idea", "x": 100, "y": 210,
       "fontSize": 52, "color": "#292d32"}},
    {"at": 0, "duration": 0, "object":
      {"type": "arrow", "points": [[265, 245], [440, 225], [615, 245]],
       "width": 8, "color": "#e32d38"}},
    {"at": 0, "duration": 0, "object":
      {"type": "text", "text": "Draft", "x": 650, "y": 210,
       "fontSize": 52, "color": "#292d32"}}
  ]
}
```

Save it as `handoff.video.json`, then run `node render-image.mjs handoff.video.json handoff.png`. Points are canvas pixel coordinates and retain their supplied shape. Use `pen`, `arrow` or `shade` for stroke objects. No smoothing is applied to recipe strokes. The same recipe can later render video, but time and captions are not needed for the final still image.

## Browser drawing tool calls

- `read_drawing({})` returns the current drawing, including `format`, optional `canvasSize`, and objects. Square is 1200×1200, landscape 1600×1000, portrait 1080×1350; custom dimensions are in `canvasSize`.
- `add_drawing_text({text, x, y})` adds one editable label in canvas pixels.
- `add_drawing_stroke({type, points, color, width})` adds one editable `pen`, `arrow` or `shade` stroke. Use 2–500 in-bounds `[x,y]` points, a six-digit hex color and width 0.5–120.

Read before editing. These calls change the user's current draft and are rejected during active canvas actions or draft recovery. The agent should inspect the result and use the visible Undo control when necessary. Browsers without WebMCP can use the visible UI or the local renderer.

## Video and constraints

For MP4, install FFmpeg and ffprobe, then run `node render-recipe.mjs example.video.json first-video.mp4`. See [the full video recipe contract](https://drawbly.com/agent-video.html) for background images, captions, timing and narration files. Local images and audio must sit beside the recipe; neither route fetches remote assets.

The browser keeps a draft on this device; the CLI writes files on this device. There is no cloud drawing save, AI drawing service, product account, API key or server-side job queue. Free exports include Drawbly credit. Agent-generated marks should not be presented as manually drawn. See [privacy and storage](https://drawbly.com/privacy).