Canvas MCP tools

These are the tools exposed by the VibeFlow MCP server. They’re available to any MCP-compatible client connected via 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.

---

​

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. 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. Returns the created canvas with its canvas_id.

---

​

get_canvas

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

---

​

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. 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. 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. 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.

---

​

duplicate_canvas_frame

Deep-copies a frame (same size and HTML) beside the source. The fast path for variations. 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.

---

​

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. 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. Returns { frame_id, name, x, y, width, height, z, html }.

---

​

list_canvas_frames

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

---

​

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. Returns { job_id } immediately.

---

​

get_canvas_frame_creation

Polls an agent job started by 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.

---

​

Export

​

export_canvas

Starts an export job for a canvas. Returns { job_id }.

---

​

get_canvas_export

Polls an export job. 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. 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