> ## Documentation Index
> Fetch the complete documentation index at: https://canvas-docs.vibeflow.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Canvas MCP tools

> Every tool exposed over MCP. Signatures, behavior, return shapes.

These are the tools exposed by the VibeFlow MCP server. They're available to any MCP-compatible client connected via [Connect your agent](/mcp/connect-your-agent).

Read-only tools carry MCP `readOnlyHint` annotations, so clients like Claude run them without per-call confirmation; destructive tools (`delete_canvas_frame`, full rewrites) always prompt.

***

## Guides (call these first)

### `get_canvas_guide`

Returns the canvas workflow and the frame-HTML authoring rules: fixed-size artboards, inline CSS only, available fonts, hard constraints. No arguments. Call once per session before creating or editing frames.

***

### `get_design_guide`

Returns VibeFlow's design craft guide — the same rules the in-app design agent follows: visual hierarchy, spacing rhythm, typography scale, color discipline, contrast requirements, aesthetic directions, and the hard bans that make designs look AI-generated. No arguments.

<Tip>
  Agents that load both guides before authoring HTML produce visibly better frames. Agents that skip them produce generic, templated output.
</Tip>

***

## Workspace

### `list_organizations`

Lists the workspaces your account belongs to. Use the ids to scope `list_canvases` and to bill agent runs against an org's credit pool. No arguments.

***

### `list_canvases`

Lists your canvases, most recent first. Paginated.

| Arg               | Required | Description                                         |
| ----------------- | -------- | --------------------------------------------------- |
| `organization_id` | No       | Scope to one workspace (from `list_organizations`). |
| `cursor`          | No       | Pagination cursor from a previous call.             |
| `limit`           | No       | Max canvases per page. Default 50, max 200.         |

**Returns** `{ canvases: [{ canvas_id, name, organization_id, preview_image_url, created_at, updated_at }], next_cursor, is_done }`.

***

### `create_canvas`

Creates a new canvas, optionally with design systems attached.

| Arg                 | Required | Description                                 |
| ------------------- | -------- | ------------------------------------------- |
| `name`              | No       | Canvas name. Defaults to "Untitled canvas". |
| `organization_id`   | No       | Workspace to create it in.                  |
| `design_system_ids` | No       | Design systems to attach as canvas skills.  |
| `selected_style`    | No       | A style preset key.                         |

**Returns** the created canvas with its `canvas_id`.

***

### `get_canvas`

Returns one canvas's metadata, including attached design systems and style.

| Arg         | Required | Description                           |
| ----------- | -------- | ------------------------------------- |
| `canvas_id` | Yes      | The canvas id (from `list_canvases`). |

***

## Authoring frames

### `create_designed_frame`

Creates a frame from HTML **you author yourself** — no agent run, no design credits. Placement is automatic and never overlaps existing frames.

| Arg                 | Required | Description                                                    |
| ------------------- | -------- | -------------------------------------------------------------- |
| `canvas_id`         | Yes      | The canvas id.                                                 |
| `name`              | Yes      | Short frame name, e.g. "Login screen".                         |
| `width`             | Yes      | Width in pixels (1–10000).                                     |
| `height`            | Yes      | Height in pixels (1–10000).                                    |
| `html`              | Yes      | Full HTML with inline CSS.                                     |
| `placement`         | No       | `right` (default) continues the row; `below` starts a new one. |
| `neighbor_frame_id` | No       | Place beside this frame instead.                               |

**Returns** `{ frame_id, name, x, y, width, height, warnings }`.

`<script>`, `<iframe>`, `<object>`, `<embed>`, external `<link>`, inline event handlers, and `javascript:` URLs are **rejected** with a 400. Softer issues (scrollbars, viewport units, form controls) come back as `warnings` — the write still applies; fix them in a follow-up.

***

### `write_frame_html`

Replaces the full HTML of an existing frame. For structural rewrites — prefer `update_canvas_frame` for small changes.

| Arg         | Required | Description                            |
| ----------- | -------- | -------------------------------------- |
| `canvas_id` | Yes      | The canvas id.                         |
| `frame_id`  | Yes      | The frame id.                          |
| `html`      | Yes      | Full replacement HTML with inline CSS. |

**Returns** `{ frame_id, name, width, height, warnings }`. Same hard rejects as `create_designed_frame`.

***

### `update_canvas_frame`

Patches a frame's HTML with an exact string replacement — like a code editor's find-and-replace. The surgical option.

| Arg           | Required | Description                                               |
| ------------- | -------- | --------------------------------------------------------- |
| `canvas_id`   | Yes      | The canvas id.                                            |
| `frame_id`    | Yes      | The frame id.                                             |
| `old_string`  | Yes      | Exact text to find (must be unique unless `replace_all`). |
| `new_string`  | Yes      | Replacement text.                                         |
| `replace_all` | No       | Replace every occurrence. Default false.                  |

**Returns** `{ frame_id, additions, deletions, diff, warnings }`.

***

### `update_canvas_frame_meta`

Renames, moves, or resizes a frame without touching its HTML. Provide at least one field.

| Arg               | Required | Description                                                                          |
| ----------------- | -------- | ------------------------------------------------------------------------------------ |
| `canvas_id`       | Yes      | The canvas id.                                                                       |
| `frame_id`        | Yes      | The frame id.                                                                        |
| `name`            | No       | New name.                                                                            |
| `x`, `y`          | No       | New canvas position.                                                                 |
| `width`, `height` | No       | New size in pixels. Resizing does not reflow the HTML — screenshot and adjust after. |

***

### `duplicate_canvas_frame`

Deep-copies a frame (same size and HTML) beside the source. The fast path for variations.

| Arg         | Required | Description                                     |
| ----------- | -------- | ----------------------------------------------- |
| `canvas_id` | Yes      | The canvas id.                                  |
| `frame_id`  | Yes      | The frame to duplicate.                         |
| `name`      | No       | Name for the copy. Defaults to "*source* copy". |
| `placement` | No       | `right` (default) or `below`.                   |

**Returns** `{ frame_id, source_frame_id, name, x, y, width, height }`.

***

### `delete_canvas_frame`

Removes a frame. Cannot be undone via MCP — the in-app undo stack does not see MCP deletes.

| Arg         | Required | Description    |
| ----------- | -------- | -------------- |
| `canvas_id` | Yes      | The canvas id. |
| `frame_id`  | Yes      | The frame id.  |

***

### `screenshot_canvas_frames`

Renders 1–4 frames to images so the agent can **see** the actual result, not just its HTML. The core of the write → look → fix loop.

| Arg         | Required | Description              |
| ----------- | -------- | ------------------------ |
| `canvas_id` | Yes      | The canvas id.           |
| `frame_ids` | Yes      | 1–4 frame ids to render. |

**Returns** the screenshots as inline images in the tool result.

***

### `get_canvas_frame_code`

Returns the raw HTML of one frame. Read before editing so patches are surgical.

| Arg         | Required | Description    |
| ----------- | -------- | -------------- |
| `canvas_id` | Yes      | The canvas id. |
| `frame_id`  | Yes      | The frame id.  |

**Returns** `{ frame_id, name, x, y, width, height, z, html }`.

***

### `list_canvas_frames`

Lists every frame on a canvas (metadata, no HTML). Paginated.

| Arg         | Required | Description          |
| ----------- | -------- | -------------------- |
| `canvas_id` | Yes      | The canvas id.       |
| `cursor`    | No       | Pagination cursor.   |
| `limit`     | No       | Max frames per page. |

***

## The VibeFlow design agent

### `create_canvas_frame`

Starts an **asynchronous agent job**: the VibeFlow design agent reads your natural-language brief, plans the frames, authors the HTML, and may create several frames in one run. Consumes credits.

| Arg                | Required | Description                                                            |
| ------------------ | -------- | ---------------------------------------------------------------------- |
| `canvas_id`        | Yes      | The canvas id.                                                         |
| `prompt`           | Yes      | The brief, e.g. "Design a 3-screen onboarding flow for a fintech app". |
| `design_system_id` | No       | Load a specific design system for this run.                            |
| `organization_id`  | No       | Bill against this workspace's credit pool.                             |
| `max_steps`        | No       | Max agent steps. Default 100.                                          |

**Returns** `{ job_id }` immediately.

***

### `get_canvas_frame_creation`

Polls an agent job started by `create_canvas_frame`.

| Arg      | Required | Description                 |
| -------- | -------- | --------------------------- |
| `job_id` | Yes      | From `create_canvas_frame`. |

**Returns** the job status (`pending` / `running` / `completed` / `failed`) and, once completed, the created frame ids.

***

## Skills & design systems

### `list_canvas_skills`

Lists the design-system skills attached to a canvas.

### `load_canvas_skill`

Loads a skill's content — palette, typography, component rules — so the agent can author on-brand HTML. Takes `canvas_id`, `skill`, and an optional `reference_file`.

### `get_all_design_systems`

Lists every design system in your account. No arguments.

### `create_design_system` / `update_design_system` / `add_component_to_design_system`

Create a design system from a workspace's existing patterns, refresh it, or add a reusable component to it. Documented in depth at [docs.vibeflow.ai](https://docs.vibeflow.ai).

***

## Export

### `export_canvas`

Starts an export job for a canvas.

| Arg         | Required | Description                             |
| ----------- | -------- | --------------------------------------- |
| `canvas_id` | Yes      | The canvas id.                          |
| `format`    | Yes      | `png`, `jpg`, `pdf`, or `pptx`.         |
| `frame_ids` | No       | Export only these frames. Default: all. |

**Returns** `{ job_id }`.

***

### `get_canvas_export`

Polls an export job.

| Arg      | Required | Description           |
| -------- | -------- | --------------------- |
| `job_id` | Yes      | From `export_canvas`. |

**Returns** the job status and, once completed, a download URL.

***

## Auth + errors

Every tool requires auth — OAuth (default) or an API key bearer header; see the [overview](/mcp/overview). Errors come back as actionable messages, not bare status codes: a missing frame is `Frame "…" not found on this canvas`, rejected HTML names the offending rule, and an empty balance returns an "insufficient credits" message instead of running.

## Next

<CardGroup cols={2}>
  <Card title="Connect your agent" icon="plug" href="/mcp/connect-your-agent">
    Claude, Claude Code, Cursor, Codex, OpenClaw, Hermes — step by step.
  </Card>

  <Card title="Credits" icon="coin" href="/reference/credits">
    What each tool costs.
  </Card>
</CardGroup>