# Canvas and frames
Source: https://canvas-docs.vibeflow.ai/concepts/canvas-and-frames

The two units you work with every day. Everything else is built on these.

<img alt="A VibeFlow canvas with five frames at different aspect ratios and an attached design system" />

## Canvas

A **canvas** is a document you own at `/canvas/:id`. It holds your frames, your chat history, and a few pinned settings:

| What's on a canvas | What it does                                                             |
| ------------------ | ------------------------------------------------------------------------ |
| **Frames**         | The artboards visible in the viewport. Any number, any size.             |
| **Chat history**   | Every brief, every reply, every tool call. Multiple chats per canvas.    |
| **Design system**  | Optional, pinned to the canvas. Locks brand for every future generation. |
| **Style preset**   | Optional aesthetic (e.g. *Editorial*, *Glassmorphism*) layered on top.   |
| **Assets**         | Images you've uploaded or generated, addressable by the agent.           |

A canvas belongs to an organization and is **owner-scoped**. Other people in your org cannot edit it today (multiplayer is coming soon). They can clone a copy if you publish it to the community gallery.

### Creating a canvas

<CardGroup>
  <Card title="From the home composer" icon="house">
    `/home` → toggle to **Canvas** → brief → **Generate**. You land on `/canvas/:id` with the agent already streaming.
  </Card>

  <Card title="From the canvas list" icon="grid-2">
    `/canvas` → **New canvas**. Blank canvas, then talk to the agent in chat.
  </Card>

  <Card title="From a community template" icon="copy">
    `/community` → pick a canvas template → **Use template**. You get an owned copy.
  </Card>
</CardGroup>

You can also create a canvas from your editor via the [MCP](/mcp/tools), then drive it from chat.

***

## Frame

A **frame** is a fixed-size artboard rendered as inline HTML inside an iframe on the canvas. That's the whole shape.

| Property    | Detail                                                                                                                                          |
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| Size        | Set per-frame. Common sizes: 1440 × 900 desktop, 1920 × 1080 slide, 1080 × 1080 social, 390 × 844 mobile, 1200 × 628 ad. Any custom size works. |
| Position    | `x`, `y` on the canvas. Drag with the mouse.                                                                                                    |
| Stack order | A `z` index per frame. Frames can overlap.                                                                                                      |
| Content     | Inline-styled HTML. No `<script>`, no form controls. Validated before render.                                                                   |
| Storage     | Inline on the frame, or spilled to a Convex blob when the HTML gets large.                                                                      |
| Editable    | Double-click to edit in place. Text, layout, deletes write back automatically.                                                                  |

Each frame is **independent**. Editing one never touches the others. Frames don't share state at runtime, but they do share your design system. A single agent change can update one or many frames in a single turn.

### Creating a frame

You almost never make frames by hand. The agent makes them in response to chat. The common patterns:

* *"Add a third slide with a chart of monthly revenue."* → one new frame, sized like the others.
* *"Build me a landing page, a 1080 social cut, and a mobile mock for the same launch."* → three frames, three sizes, same brand.
* *"Duplicate this frame and try a dark variant."* → `duplicate_frame` → tweak.

You can also drop a blank frame manually with the **F** keyboard shortcut, but those are local-only until the agent fills them.

***

## How the canvas renders

Each frame is **real HTML in an iframe** on the canvas. Not a screenshot, not a terminal sketch. What you see is what exports.

<div>
  <div>
    Canvas viewport · pan & zoom
  </div>

  <div>
    <div>
      <div>
        Frame · 1080 × 1080
      </div>

      <div>
        <div>
          Launch week
        </div>

        <div>
          On-brand HTML the agent wrote. Inline styles only.
        </div>

        <div>
          Get started
        </div>
      </div>
    </div>
  </div>

  <div>
    Pixi positions the frame shell · the iframe renders your HTML · exports read the same DOM
  </div>
</div>

Two things follow from this:

1. **What you see is what exports.** PNG/PDF/PPTX walk the iframe DOM. There is no separate render target.
2. **Frames are sandboxed from each other.** They share the design system at *generation time* (via the agent prompt), not at *render time* (via shared DOM).

***

## What's persisted, what's local

| Lives in Convex                            | Lives only in your tab                               |
| ------------------------------------------ | ---------------------------------------------------- |
| Canvas record (name, design system, style) | Pan / zoom position                                  |
| Every frame (HTML, position, size, z)      | Selection state                                      |
| Every chat message and tool call           | Element pointers in the comment composer             |
| Generated images (R2-backed)               | Manually-dropped blank frames (`F` key) until filled |

If you close the tab mid-generation, the canvas survives. If you reload during an agent turn, the frames already created are still there. The agent's in-flight turn restarts cleanly from where it was.

***

## What a canvas is not

* **Not a design tool.** No vector tools, no pen, no boolean ops. Frames are HTML. You shape them by talking to the agent or editing the inline HTML.
* **Not a docs tool.** No long-form pages. Frames are bounded artboards. For long pages, generate a landing-page frame at 1440 × 4000+ and scroll inside it.
* **Not a runtime.** Generated React apps live in the [promote-to-app](/exports/promote-to-app) flow, not on the canvas. The canvas renders static HTML.

## Next

<CardGroup>
  <Card title="The chat" icon="message" href="/concepts/the-chat">
    The agent loop. How it plans frames, what tools it calls.
  </Card>

  <Card title="Inline edit" icon="hand-pointer" href="/concepts/inline-edit">
    The AI Pointer. Click any element, drop a note, the agent edits exactly that.
  </Card>
</CardGroup>


# Design systems
Source: https://canvas-docs.vibeflow.ai/concepts/design-systems

Lock palette, typography, and components as rules. Every frame inherits them.

A design system in VibeFlow is a **hard contract**, not a suggestion. When you attach one to a canvas, the agent treats your tokens, components, and guidelines as rules. Brand drift becomes a generator bug, not a human error.

## What's in one

| Layer          | What it locks                                                                              |
| -------------- | ------------------------------------------------------------------------------------------ |
| **Tokens**     | Colors (named roles, not just hex), typography scale, spacing scale, radius, shadows.      |
| **Components** | Real JSX or HTML snippets. Buttons, cards, navs, forms. Each one has when-to-use guidance. |
| **Assets**     | Logo files, badge marks, pattern fills, hero photography.                                  |
| **Guidance**   | Markdown rules: voice, layout principles, what to never do.                                |

Internally it compiles to a `SKILL.md` plus a folder of references, which is what the canvas agent reads on each turn.

***

## Where it lives in the canvas

### Pinning to a canvas

In the chat composer footer:

* **Palette icon** opens the style preset picker (visual aesthetic).
* **Layers icon** opens the design system picker (your saved systems for this organization).

Pick one. It writes to the canvas (`canvas.designSystemIds`, `canvas.selectedStyle`) and stays pinned. Every future generation in this canvas reads it.

You can swap or remove the design system at any time. Existing frames don't change. Future generations follow the new contract.

### Using it on a single message

Sometimes you want a one-off variation without unpinning the brand. Two ways:

* **Prompt override.** *"For this frame only, swap primary to teal. Keep typography and spacing locked."*
* **Style preset.** Add an aesthetic style on top. The agent treats the design system as the brand and the style as the mood.

***

## Building a design system

You don't build design systems on the canvas. They live in their own product at [`/design-systems`](https://ui.vibeflow.ai/design-systems). Three ways to make one:

<CardGroup>
  <Card title="From a URL" icon="link">
    Paste any public website. The agent extracts palette, typography, spacing, components, and logo into a fresh system.
  </Card>

  <Card title="From a brief" icon="message-pen">
    Describe the brand in chat. The agent generates a starting system you can refine.
  </Card>

  <Card title="From your codebase" icon="code">
    Use the MCP from your editor. The agent reads your real components and tokens. See the [MCP overview](/mcp/overview).
  </Card>
</CardGroup>

You can also ask the canvas agent to extract a design system on the fly:

*"Clone [yourwebsite.com](https://yourwebsite.com) as a design system and attach it to this canvas."*

This runs the `clone_website` tool in **design-system** mode (2 credits), saves the new system, and auto-attaches it.

***

## How the contract is enforced

When the agent generates a frame, the design system shapes the output at three places:

1. **System prompt.** Every turn includes the compiled `SKILL.md` and a summary of components.
2. **Validation.** The agent is told to use only tokens defined in the system. Frames that drift get flagged in chat.
3. **Asset resolution.** Asset references (logos, hero photos) resolve to your real files via `get_assets`.

In practice this means: ask for *"a hero with our brand color"* and the agent uses the exact hex. Ask for *"our button"* and you get your `PrimaryButton`, not a guess.

***

## Skills on top of a design system

A design system is the brand. **Skills** are the playbook. You can stack both.

| Layer         | Example                                                                  |
| ------------- | ------------------------------------------------------------------------ |
| Design system | Acme tokens, components, logo                                            |
| Skill         | "Deck composition for product launches" or "Editorial photography rules" |

Skills come from two places:

* Your account's enabled custom skills (uploaded `SKILL.md` zips).
* Skills compiled out of the design system itself.

The agent reads both on every turn. To see what's loaded for a canvas, ask: *"What skills do you have access to right now?"* The agent will run `get_skills` and list them.

***

## Best practices

<AccordionGroup>
  <Accordion title="Start with tokens, add components later">
    A design system with a clean color and type scale will beat a system with 40 components and vague tokens. Tokens are what the agent locks hardest.
  </Accordion>

  <Accordion title="Name colors by role, not by hex">
    *"`brand.primary` is `#0F1413`. Use for CTAs and headings on light surfaces."* The agent learns the rule, not just the value.
  </Accordion>

  <Accordion title="Document the components people forget">
    Your nav. Your footer. Your empty state. Your loading skeleton. The agent will compose layouts from whatever is documented.
  </Accordion>

  <Accordion title="One system per brand, not per surface">
    Don't make a "social system" and a "deck system". Make one *Acme Brand* and let the agent compose for any surface from a single source of truth.
  </Accordion>
</AccordionGroup>

## Next

<CardGroup>
  <Card title="Inline edit" icon="hand-pointer" href="/concepts/inline-edit">
    Edit single elements without breaking the rest of the frame.
  </Card>

  <Card title="MCP tools" icon="plug" href="/mcp/tools">
    Manage design systems and frames from your editor.
  </Card>
</CardGroup>


# Inline edit
Source: https://canvas-docs.vibeflow.ai/concepts/inline-edit

The AI Pointer. Click any element on any frame, drop a one-line note, ship.

The inline-edit flow is the fastest path from *"this is almost right"* to *"this is right"*. It replaces every awkward *"in the third frame, change the orange button to ink black, keep everything else"* with two clicks and three words.

## The shape of it

<Steps>
  <Step title="Press C">
    Enters **Comment** mode. The cursor turns into a crosshair. Every iframe on the canvas listens for clicks.
  </Step>

  <Step title="Click an element">
    Click any text, button, image, container. A composer appears at the click position.
  </Step>

  <Step title="Drop a note">
    *"Make this bolder"* · *"Replace with our real product name"* · *"Use brand teal"*. Hit Enter.
  </Step>

  <Step title="Send the message">
    The element becomes a chip in the chat with your note pre-filled. Click send. The agent edits exactly that element via `update_element`. Nothing else changes.
  </Step>
</Steps>

You can stack multiple element chips in one message. *"Make all three of these buttons match the primary style"* with three chips attached.

***

## What gets captured

When you click an element, the canvas captures four things to send to the agent:

| Field              | What it is                                                   |
| ------------------ | ------------------------------------------------------------ |
| **vfId**           | A stable selector the agent uses to find this exact element. |
| **outerHTML**      | The element's HTML (truncated if huge).                      |
| **Ancestor chain** | The four or five enclosing tags, for context.                |
| **Frame id**       | Which frame the element belongs to.                          |

Together, this is enough for the agent to make a surgical edit. It does not need to re-render the whole frame.

<Tip>
  The element chip is **in-memory for that turn**. If you reload the tab before sending, the chip is gone. The chat history persists, but pointers do not.
</Tip>

***

## Direct edit vs inline edit

The canvas has two ways to change a frame. They are not the same thing.

|                | Direct edit                      | Inline edit (AI Pointer)         |
| -------------- | -------------------------------- | -------------------------------- |
| Trigger        | Double-click a frame             | Press **C**, click an element    |
| Edits          | Text content, simple layout      | Anything you can describe        |
| Who does it    | You, by typing                   | The agent, given your note       |
| Persistence    | Writes to frame HTML immediately | Goes through a chat turn         |
| Brand contract | Not enforced                     | Enforced (design system applies) |
| Cost           | Free                             | 1+ credits per turn              |

Use **direct edit** for typo fixes and trivial copy swaps. Use **inline edit** for anything that needs taste or brand discipline.

***

## Patterns

<AccordionGroup>
  <Accordion title="Tighten one sentence">
    Click the headline. *"Tighter. 5 words max."*
  </Accordion>

  <Accordion title="Recolor without breaking the system">
    Click the CTA. *"Use the dark variant from the design system."*
  </Accordion>

  <Accordion title="Replace a placeholder image">
    Click the hero image. *"Generate an editorial photo of a desk with brass accents and warm light."* The agent runs `generate_image`, uploads it, and swaps.
  </Accordion>

  <Accordion title="Re-spec a component">
    Click a card. *"This is too dense. Show only title and CTA. Drop the metadata row."*
  </Accordion>

  <Accordion title="Compare two elements">
    Click two cards in two frames. *"These should match. Use the cleaner of the two as the source of truth."*
  </Accordion>
</AccordionGroup>

***

## Why it's surgical

Under the hood the agent uses `update_element` instead of regenerating the frame. The tool takes the element's `vfId` and a target patch (new HTML, new styles, new text). It writes only that node.

This matters because:

* **Brand stays stable.** Surrounding components don't get re-rolled.
* **You don't lose hand-edits.** Anything you typed directly in the frame survives.
* **It's cheap.** A single element edit is a fraction of a full-frame regeneration.

When you want the whole frame re-rolled, **don't** use the comment tool. Reference the frame from the chat instead.

## Next

<CardGroup>
  <Card title="Editor overview" icon="window" href="/editor/overview">
    The full editor UI map. Toolbar, sidebars, chat, viewport.
  </Card>

  <Card title="Keyboard shortcuts" icon="keyboard" href="/editor/keyboard-shortcuts">
    The complete cheat sheet. The pointer is one of many.
  </Card>
</CardGroup>


# The chat and the agent
Source: https://canvas-docs.vibeflow.ai/concepts/the-chat

The agent loop. How it plans frames, what tools it calls, what context it sees.

The chat panel on the left is the brief. Everything that lands on your canvas comes from a turn in this panel.

## The loop

Each chat turn runs the same way:

<Steps>
  <Step title="You send a brief">
    Plain English. Optional attachments: images, frames you've referenced, element pointers from the comment tool.
  </Step>

  <Step title="The agent reads context">
    It pulls the canvas, the attached design system, your enabled skills, the chat history, and any selected frames or elements. Then it picks tools.
  </Step>

  <Step title="It calls tools, streaming">
    Frames appear on the canvas as `create_frame` and `update_element` calls land. The chat streams the agent's narration in parallel.
  </Step>

  <Step title="It hands control back">
    When the turn ends you see a summary of what changed and the credit cost.
  </Step>
</Steps>

You can stop the turn at any time with the **Stop** button. Frames already created stay.

***

## What the agent sees on every turn

| Context           | Source                                    |
| ----------------- | ----------------------------------------- |
| Your message      | Chat input                                |
| Image attachments | Composer paperclip / canvas assets        |
| Referenced frames | Right-click frame → **Reference in chat** |
| Element pointers  | Comment tool clicks                       |
| Design system     | Pinned to canvas via the design picker    |
| Style preset      | Pinned to canvas via the design picker    |
| User skills       | Enabled in your account / org             |
| Chat history      | Last N turns of this conversation         |
| Existing frames   | Compact summary (sizes, positions, IDs)   |

Element pointers are **in-memory** for the turn you send. They don't survive a tab reload. Everything else is persisted.

***

## The agent's tools

The canvas agent runs on a small, opinionated tool surface. You don't call these directly. The agent picks them based on your brief.

### Frame tools

| Tool              | What it does                                                                          |
| ----------------- | ------------------------------------------------------------------------------------- |
| `get_frames`      | Lists every frame on the canvas with id, size, position, and a thumbnail of the HTML. |
| `get_frame_code`  | Returns the raw HTML of one frame.                                                    |
| `create_frame`    | Adds a new frame. Specifies width, height, position, and the full HTML.               |
| `duplicate_frame` | Copies an existing frame next to itself.                                              |
| `delete_frame`    | Removes a frame.                                                                      |
| `write_element`   | Inserts a new element inside an existing frame at a target position.                  |
| `update_element`  | Edits a single element identified by selector. Used by the inline-edit flow.          |

### Asset tools

| Tool             | What it does                                           |
| ---------------- | ------------------------------------------------------ |
| `get_assets`     | Lists images you've uploaded or generated.             |
| `generate_image` | Generates a raster image from a prompt and uploads it. |
| `generate_svg`   | Generates a vector logo or illustration from a prompt. |

### Web tools

| Tool                     | What it does                                                       |
| ------------------------ | ------------------------------------------------------------------ |
| `web_search`             | Pulls a few result snippets for a query.                           |
| `web_fetch`              | Reads a URL and returns the cleaned text.                          |
| `clone_website`          | Snapshots a URL into a frame, or extracts a design system from it. |
| `clone_framer_component` | Clones a published Framer component into a frame.                  |

### Skill tools

| Tool         | What it does                                                           |
| ------------ | ---------------------------------------------------------------------- |
| `get_skills` | Lists every skill loaded for this canvas (design system, user skills). |
| `load_skill` | Reads the full `SKILL.md` and reference files for one skill.           |

***

## Writing prompts the agent likes

A few patterns that consistently produce good output:

<AccordionGroup>
  <Accordion title="Lead with the artifact, not the topic">
    *"Build a three-slide launch deck for…"* beats *"I want to launch a product…"* by a wide margin. The first tells the agent how to shape frames.
  </Accordion>

  <Accordion title="Name the frame sizes when they matter">
    *"Also generate a 1080 × 1080 and a 1920 × 1080 cut of the hero."* The agent will size frames exactly as you say. If you don't say, it picks defaults from the brief.
  </Accordion>

  <Accordion title="Use frame references for surgical edits">
    Right-click a frame → **Reference in chat** → *"Take this layout but swap the headline and recolor for a winter palette."* The agent reads that frame's HTML before answering.
  </Accordion>

  <Accordion title="Use the comment tool for one-element edits">
    Don't write *"in the third frame, change the orange button to ink black"*. Press **C**, click the button, type *"ink black"*. The agent uses `update_element` and changes nothing else.
  </Accordion>

  <Accordion title="Tell it the brand contract is hard">
    With a design system attached the brand is locked by default. If you want a one-off variation say so explicitly: *"For this frame only, swap the primary to teal. Keep typography locked."*
  </Accordion>
</AccordionGroup>

***

## Multiple chats per canvas

You can run more than one chat on the same canvas. Useful when:

* You're testing two creative directions in parallel.
* You handed off a canvas to a teammate and want a separate thread.
* You want to start a clean conversation without losing the old one.

Open the chat history dropdown in the chat header → **New chat**. The canvas state is shared across chats. Tool calls from any chat write to the same frames.

***

## Pricing per turn

Token-based, with a one-credit minimum to start a turn. Tools that hit external services (image generation, website clone) have a small flat fee on top. The full breakdown is on [Credits](/reference/credits).

The cost of the last turn shows in the chat right under the agent's reply.

## Next

<CardGroup>
  <Card title="Design systems" icon="lock" href="/concepts/design-systems">
    Lock palette, typography, and components as rules. Not suggestions.
  </Card>

  <Card title="Inline edit" icon="hand-pointer" href="/concepts/inline-edit">
    The fastest edit loop. Click element, drop note, ship.
  </Card>
</CardGroup>


# Keyboard shortcuts
Source: https://canvas-docs.vibeflow.ai/editor/keyboard-shortcuts

Every keystroke the canvas editor responds to.

The agent does the typing. You drive the canvas.

<Note>
  Modifiers use Mac notation: `⌘` = Cmd (Ctrl on Windows), `⌥` = Alt/Option, `⇧` = Shift, `⌃` = Control.
</Note>

## Tools

| Key     | Tool                                        |
| ------- | ------------------------------------------- |
| `V`     | Select / move                               |
| `A`     | Direct select (drill into elements & nodes) |
| `H`     | Hand (pan)                                  |
| `P`     | Pen — draw vector paths from scratch        |
| `⇧` `P` | Pencil / freehand sketch                    |
| `R`     | Rectangle                                   |
| `O`     | Ellipse                                     |
| `L`     | Line                                        |
| `F`     | Drop a blank frame                          |
| `T`     | Drop a text node                            |
| `C`     | Comment (AI Pointer)                        |

<Tip>
  `R`, `O`, and `L` all activate the **Shapes** tool with that shape pre-selected. Polygon and star are picked from the floating shape toolbar. Every shape is born as an editable vector — draw it, then press `V` and double-click to refine its nodes.
</Tip>

## Pen tool

Draw brand-new vector paths inside the selected frame. Press `P`, then:

| Action                                  | Shortcut                                |
| --------------------------------------- | --------------------------------------- |
| Add a corner point                      | Click                                   |
| Add a smooth point (pull curve handles) | Click + drag                            |
| Close the path                          | Click the first anchor (a ring appears) |
| Finish the path (leave it open)         | `Enter` · double-click · right-click    |
| Remove the last point                   | `Delete` · `Backspace`                  |
| Finish, or exit the tool                | `Esc`                                   |

## Shape tools

Drag on the canvas to draw. Press `R` / `O` / `L` (or pick from the toolbar), then:

| Action                                 | Shortcut                |
| -------------------------------------- | ----------------------- |
| Draw the shape                         | Drag                    |
| Constrain (square · circle · 45° line) | Hold `⇧` while dragging |
| Leave the tool                         | `Esc`                   |

## Vector & path editing

Double-click a path (or press **Edit path** in the inspector) to edit its nodes.

| Action                              | Shortcut                          |
| ----------------------------------- | --------------------------------- |
| Move an anchor or handle            | Drag                              |
| Add a point on a segment            | Double-click the segment          |
| Toggle anchor smooth ↔ corner       | Double-click the anchor · `⇧` `C` |
| Convert an anchor (corner ↔ smooth) | `⌥` + click the anchor            |
| Break handle mirroring (asymmetric) | `⌥` + drag a handle               |
| Join / weld / close the path        | `⌘` `J`                           |
| Delete the active anchor            | `Delete` · `Backspace`            |
| Exit node editing                   | `Esc` · `Enter`                   |

<Tip>
  The cursor tells you the action before you click: it shows **move** over an anchor, a **crosshair** over a handle, and a **copy** cursor over the path body (where a double-click adds a point).
</Tip>

## Appearance (inspector)

No keys — these live in the right-hand **Vector** panel when a path is selected:

* **Paint** — solid fill/stroke, stroke width, opacity
* **Stroke style** — solid / dash / dot, line cap (butt/round/square), join (miter/round/bevel)
* **Gradient** — linear or radial, two-stop, with angle
* **Effects** — drop shadow, blur, and all 16 blend modes
* **Path** — close · open · reverse · flip H/V

## Viewport

| Action             | Shortcut                                          |
| ------------------ | ------------------------------------------------- |
| Pan                | `Space` + drag · middle mouse · two-finger scroll |
| Zoom               | `⌘` / `Ctrl` + scroll · pinch                     |
| Reset zoom to 100% | (right sidebar zoom indicator → reset)            |

## Selection

| Action                                   | Shortcut                |
| ---------------------------------------- | ----------------------- |
| Select frame or element                  | Click                   |
| Deep-select the element under the cursor | `⌘` / `Ctrl` + click    |
| Multi-select                             | `⇧` + click             |
| Marquee select                           | Drag in empty space     |
| Cycle sibling layers                     | `Tab` · `⇧` `Tab`       |
| Drill into first child                   | `Enter`                 |
| Walk selection up one level              | `Esc`                   |
| Clear selection                          | `Esc`                   |
| Frame drag mode (over content)           | Hold `⌥` while dragging |

## Arrange & transform

| Action                              | Shortcut                        |
| ----------------------------------- | ------------------------------- |
| Nudge / big nudge                   | Arrow keys · `⇧` + arrow (20px) |
| Bring forward / send backward       | `]` · `[`                       |
| Group / ungroup                     | `⌘` `G` · `⇧` `⌘` `G`           |
| Constrain proportion while resizing | Hold `⇧`                        |
| Resize from center                  | Hold `⌥`                        |

## Editing

| Action                    | Shortcut                                               |
| ------------------------- | ------------------------------------------------------ |
| Enter frame (direct edit) | Double-click                                           |
| Exit frame edit           | `Esc`                                                  |
| Delete selection          | `Delete` · `Backspace`                                 |
| Undo                      | `⌘` / `Ctrl` + `Z`                                     |
| Redo                      | `⇧⌘Z` · `⌘Y` · `Ctrl` + `Y`                            |
| Duplicate                 | `⌘` / `Ctrl` + `D`                                     |
| Copy                      | `⌘` / `Ctrl` + `C` (frames or elements inside a frame) |
| Cut                       | `⌘` / `Ctrl` + `X`                                     |
| Paste                     | `⌘` / `Ctrl` + `V` (across canvases too)               |

## Text editing (inside a text element)

| Action                    | Shortcut                    |
| ------------------------- | --------------------------- |
| Bold · italic · underline | `⌘` `B` · `⌘` `I` · `⌘` `U` |
| Ordered / bulleted list   | `⌘` `⇧` `7` · `⌘` `⇧` `8`   |
| Finish editing            | `⌘` `Enter` · `Esc`         |

## Chat composer

| Action             | Shortcut                                   |
| ------------------ | ------------------------------------------ |
| Send message       | `Enter`                                    |
| New line           | `Shift` + `Enter`                          |
| Attach image       | Click paperclip · drag image into composer |
| Pick design system | Click layers icon                          |
| Pick style preset  | Click palette icon                         |

## Comment composer (after clicking an element)

| Action                         | Shortcut |
| ------------------------------ | -------- |
| Add element + note to chat     | `Enter`  |
| Close composer without staging | `Esc`    |

## Home composer (the `/home` page)

| Action          | Shortcut               |
| --------------- | ---------------------- |
| Generate canvas | `⌘` / `Ctrl` + `Enter` |

***

## Things that don't have shortcuts yet

We're honest about gaps. None of these exist today:

* **Cmd + K command palette** in the canvas editor
* **Boolean ops** (union / subtract / intersect / exclude) key bindings
* **Cmd + F** to find a frame by name or contents

If any of these would change your day-to-day, tell us at <a href="mailto:founders@vibeflow.ai">[founders@vibeflow.ai](mailto:founders@vibeflow.ai)</a>.


# Editor overview
Source: https://canvas-docs.vibeflow.ai/editor/overview

The full editor UI map. Toolbar, sidebars, chat, viewport.

The canvas editor lives at `/canvas/:id`. Four regions you use every day.

## Layout

<div>
  <div>
    <span>Launch deck</span>
    <span>·</span>
    <span>share</span>
    <span>·</span>
    <span>publish</span>
    <span>·</span>
    <span>settings</span>
  </div>

  <div>
    <div>
      <div>
        Chat
      </div>

      <div />

      <div />

      <div />
    </div>

    <div>
      <div>
        <div />

        <div />

        <div />
      </div>

      <div>
        <div />

        <div />
      </div>
    </div>

    <div>
      <div>Export</div>
      <div>Promote</div>
      <div>Assets</div>
      <div>Settings</div>
    </div>
  </div>

  <div>
    <span>
      V
    </span>

    <span>
      H
    </span>

    <span>
      F
    </span>

    <span>
      T
    </span>

    <span>
      C
    </span>

    <span>undo · redo · history</span>
  </div>
</div>

### Chat panel (left)

Your conversation with the canvas agent. See [The chat and the agent](/concepts/the-chat) for the full loop.

* **Composer.** Type, attach images, pick design systems and styles.
* **History.** Every turn the agent has taken on this canvas.
* **New chat.** Start a fresh thread without losing the old one. Same canvas.
* **Stop.** Cancel a streaming turn. Frames already landed stay.

### Infinite canvas (center)

A Pixi.js viewport rendering your frames. Each frame is an iframe on top of a Pixi node.

* **Pan.** Spacebar + drag, middle mouse, or two-finger scroll.
* **Zoom.** Cmd / Ctrl + scroll, or pinch.
* **Select.** Click a frame, shift-click for multi-select, drag-rectangle for marquee.
* **Edit in place.** Double-click a frame to enter its iframe.
* **Right-click.** Reference in chat, duplicate, delete, export, copy.

### Right sidebar

Tabs for the things you do *to* a frame, not *with* it.

| Tab            | What it does                                                                                                 |
| -------------- | ------------------------------------------------------------------------------------------------------------ |
| **Export**     | PPTX, PDF, PNG/JPG, HTML, React, Prompt. Per-frame or whole canvas. See [Exports](/exports/overview).        |
| **Add to app** | Promote selected frames into a deployed Vite + React project. See [Promote to app](/exports/promote-to-app). |
| **Assets**     | Your uploaded and AI-generated images. Drag onto a frame, reference from chat.                               |
| **Settings**   | Canvas name, attached design system, attached style, connected apps.                                         |

### Bottom toolbar

The interaction modes.

| Key   | Tool    | What it does                                                                              |
| ----- | ------- | ----------------------------------------------------------------------------------------- |
| **V** | Select  | Default. Click frames, marquee select, drag to move.                                      |
| **H** | Hand    | Pan only. Useful on a trackpad.                                                           |
| **F** | Frame   | Drop a blank 400 × 300 frame. Local-only until the agent fills it.                        |
| **T** | Text    | Drop a text node.                                                                         |
| **C** | Comment | The AI Pointer. Click any element, drop a note. See [Inline edit](/concepts/inline-edit). |

The toolbar also exposes undo / redo and the chat-history switcher.

***

## Working patterns

<AccordionGroup>
  <Accordion title="Brief → frames → point → export">
    The default loop. Brief in chat, watch frames render, use the comment tool for surgical fixes, export when done. Most canvases finish in this loop.
  </Accordion>

  <Accordion title="Clone → tweak → promote">
    Ask the agent to clone a frame from your existing site. Edit the copy and colors. **Add to app** to deploy it as a real React page.
  </Accordion>

  <Accordion title="Variations from one base">
    Generate a hero. Duplicate it three times. Use chat to push each in a different direction (*"first one, more editorial. Second, more brutalist. Third, our brand exactly."*). Pick the winner.
  </Accordion>

  <Accordion title="Side-by-side review">
    Pan so two frames are visible. Use the comment tool on each. Send a single message with both pointers: *"These should match the design system. Pick the tighter of the two as canonical."*
  </Accordion>
</AccordionGroup>

***

## Settings worth knowing

* **Project settings → Connected apps.** If you've promoted frames to a UI project, every promote shows here with sync state (in sync, stale, never synced).
* **Settings → MCP.** Your MCP URL and API key. Same key works for canvas and UI MCP tools. See [MCP overview](/mcp/overview).
* **Settings → Credits.** Account-level. Open it from the org dropdown, not the canvas. See [Credits](/reference/credits).

## Next

<CardGroup>
  <Card title="Keyboard shortcuts" icon="keyboard" href="/editor/keyboard-shortcuts">
    The full cheat sheet.
  </Card>

  <Card title="Exports overview" icon="arrow-down-to-bracket" href="/exports/overview">
    Every format the canvas ships.
  </Card>
</CardGroup>


# Exports overview
Source: https://canvas-docs.vibeflow.ai/exports/overview

Every format the canvas ships. What's editable, what's flat, what to pick.

The canvas exports through two paths. **Server exports** render frames headlessly and stream a file back: PPTX, PDF, PNG, JPG. **Client exports** generate code on the fly: HTML, React, and a portable prompt. Both live behind the **Export** button in the right sidebar.

## Picking a format

| Format     | What you get                                                                | Best for                                                                    | Pipeline |
| ---------- | --------------------------------------------------------------------------- | --------------------------------------------------------------------------- | -------- |
| **PPTX**   | Real PowerPoint file. Editable text boxes, shapes, lists.                   | Decks shared with stakeholders. Anyone with PowerPoint or Keynote can edit. | Server   |
| **PDF**    | Vector PDF, one frame per page.                                             | Print, formal share, version pinning.                                       | Server   |
| **PNG**    | Lossless raster, one file per frame. Multi-frame downloads as `.zip`.       | Social, ads, thumbnails.                                                    | Server   |
| **JPG**    | Smaller raster, one file per frame. Multi-frame as `.zip`.                  | Email attachments, social where size matters.                               | Server   |
| **HTML**   | A self-contained `.html` file per frame, or a `.zip` for multiple.          | Drop into emails, blogs, or static sites.                                   | Client   |
| **React**  | A `.tsx` file per frame, or a zipped React + Tailwind project for multiple. | Pull into an existing codebase.                                             | Client   |
| **Prompt** | A clipboard prompt that rebuilds this frame in any other AI tool.           | Handing off to a different agent or human.                                  | Client   |

For exporting an SVG element (rather than a whole frame), select an `<svg>` inside a frame and use the right sidebar **Download SVG** action.

***

## Per-frame vs whole canvas

Both server and client exports support selection-aware export:

* **Nothing selected.** The export covers the whole canvas. Multi-frame outputs come back as a `.zip`.
* **One frame selected.** The export covers that frame only. Single file.
* **Multiple frames selected.** Multi-frame export, zipped if more than one file.

Frame order in a multi-frame export follows your canvas left-to-right, top-to-bottom by default.

***

## Server exports (PPTX / PDF / PNG / JPG)

When you trigger a server export the backend:

1. Renders each selected frame at its true size, headlessly.
2. Walks the iframe DOM, mapping computed styles into the export format's primitives.
3. Packages the output, uploads it to R2, and streams a signed URL to your browser.

The download starts automatically.

<Note>
  PPTX walks the DOM, not the pixels. `<h1>` becomes an editable PowerPoint title. `<ul>` becomes a real bulleted list. `<img>` is embedded as a real image. CSS gradients and filters that don't translate cleanly are pre-rendered as PNG and embedded.
</Note>

### Common gotchas

<AccordionGroup>
  <Accordion title="A PPTX export wraps text on a different line than the browser">
    PowerPoint uses its own text-shaping engine, so titles that fit exactly in Chrome can wrap onto two lines in PowerPoint. Ask the agent: *"Add 4 to 8 pixels of horizontal slack to tight text boxes."* That almost always fixes it.
  </Accordion>

  <Accordion title="A gradient or filter looks different in the export">
    A handful of CSS effects don't translate. The exporter pre-renders them as PNG. If a specific section is sensitive, ask the agent: *"Pre-render this hero as a single image so the export is pixel-exact."*
  </Accordion>

  <Accordion title="My fonts changed in PowerPoint">
    The deck used a webfont the recipient doesn't have. PowerPoint substituted. Ask the agent: *"Switch the deck typography to fonts that ship with Office."* Calibri, Aptos, Arial, Georgia, Cambria, and Consolas all ship with both Mac and Windows Office.
  </Accordion>

  <Accordion title="PDF page breaks split a section">
    PDF is one frame per page. If you want one section per page, generate them as separate frames.
  </Accordion>
</AccordionGroup>

***

## Client exports (HTML / React / Prompt)

These run in your browser and never touch the server.

### HTML

A standalone `.html` document per frame. Inline styles, no JavaScript, no runtime. Open it in any browser, paste it into an email, drop it into a static site.

### React

Two flavors, picked by selection size:

* **One frame.** A single `.tsx` file with a default-exported component. Tailwind classes. Self-contained.
* **Multiple frames.** A `.zip` with a minimal Vite + React + Tailwind project: every frame is a component, plus a root `App.tsx` that routes between them.

The HTML-to-React conversion runs in your browser. It's deterministic. You get the same output every time for the same frame.

<Tip>
  React export is great for handing off to a developer. **Add to app** (the promote-to-app flow) is better when you want the frames to *become* a live, deployed React app you can keep iterating on. See [Promote to app](/exports/promote-to-app).
</Tip>

### Prompt

The Prompt export copies a clipboard-ready prompt that describes the frame in enough detail for any other AI tool (ChatGPT, Claude, v0) to rebuild it. Useful for cross-agent handoff or for archiving a frame in plain text.

***

## What's missing today

We are upfront about gaps:

* **Whole-canvas single HTML file.** Today HTML exports are one file per frame. A single-page scrollable HTML export is on the roadmap.
* **Direct Figma export.** Not shipped. Today you can export PNGs and import them into Figma as flattened images.
* **Custom export presets** (e.g. "always export at 2x for social"). Today you pick format and selection per export.

If your team needs one of these, email <a href="mailto:founders@vibeflow.ai">[founders@vibeflow.ai](mailto:founders@vibeflow.ai)</a>.

## Next

<CardGroup>
  <Card title="Promote to app" icon="rocket" href="/exports/promote-to-app">
    Turn frames into a deployed Vite + React app on your domain.
  </Card>

  <Card title="MCP exports" icon="plug" href="/mcp/tools#export-tools">
    Trigger the same exports from your editor via the MCP.
  </Card>
</CardGroup>


# Promote to app
Source: https://canvas-docs.vibeflow.ai/exports/promote-to-app

Turn one or more frames into a deployed Vite + React project on your domain.

Exports give you files. **Promote to app** gives you a living app. The selected frames become real React components in a Vite + React + Tailwind project, deployed to `vibeflow.build` (or your custom domain), with the same editor and the same agent you'd use on any UI project.

This is the "ship it" path.

## When to use it

| Use case                                         | Pick               |
| ------------------------------------------------ | ------------------ |
| Send a stakeholder a one-off PNG                 | Export PNG         |
| Hand off code for a developer to integrate       | Export React       |
| Run the design as a real, deployed, iterable app | **Promote to app** |

The frames stop being canvas artboards and start being a deployable surface you can refine, deploy, and update.

***

## How it works

<Steps>
  <Step title="Select frames">
    Pick the frames you want to ship. One frame for a single landing page, multiple frames for a multi-page app.
  </Step>

  <Step title="Open Add to app">
    Right sidebar → **Add to app** (or right-click → **Add to app**).
  </Step>

  <Step title="Pick a target">
    Two options:

    * **New project.** Creates a fresh UI project (costs 1 credit). The agent scaffolds a Vite + React + Tailwind project and drops your frames in as components.
    * **Existing project.** Merges into a UI project you already have in this org. Useful when you've been iterating on something and want to add a new page.
  </Step>

  <Step title="Wait for the merge">
    The client converts each selected frame's HTML into React + Tailwind, packages the file tree, and writes it into the target project's storage. A Daytona sandbox picks it up and hot-reloads.
  </Step>

  <Step title="Open the UI editor">
    You land in the UI editor at `/project/:id` with your frames as live pages. Same chat-driven workflow, same export options, plus deploy.
  </Step>
</Steps>

***

## What lands in the project

| Source              | What you get                                                    |
| ------------------- | --------------------------------------------------------------- |
| Each promoted frame | A `<FrameName>.tsx` page component using Tailwind               |
| Cross-frame layout  | A simple router (`App.tsx`) wiring each frame to a route        |
| Brand               | Tailwind config seeded from the canvas's attached design system |
| Assets              | Images uploaded to the project's asset folder                   |

The output project is a standard, editable Vite + React app. Nothing exotic. You can git clone it, run it locally, deploy it elsewhere.

***

## Connected apps

Every promote creates a link between the source frames and the target project. The canvas right sidebar surfaces this under **Connected apps** with sync state per link:

* **In sync.** The project has the latest version of every promoted frame.
* **Stale.** You've edited a frame on the canvas since the last promote. Re-promote to push the update.
* **Never synced.** The link exists but no merge has happened yet.

Re-promote always picks the same target by default, so the update path is one click.

***

## Deploying

Promote does **not** deploy on its own. After promoting, the UI editor has a **Deploy** button in the top bar. Click it and the project ships to:

* `your-project.vibeflow.build` by default
* A custom domain you've attached at the project level

Subsequent deploys replace the previous one at the same URL. Your shareable link is stable.

For the deploy mechanics, the deploy is a UI-product feature. The full UI docs at [docs.vibeflow.ai](https://docs.vibeflow.ai) cover deploy, publishing, custom domains, and rollback.

***

## A few honest constraints

<AccordionGroup>
  <Accordion title="Promote is frontend-only">
    The target is a static React + Vite + Tailwind project. No backend, no database, no auth. If you need server logic, add it after promote, in the UI editor.
  </Accordion>

  <Accordion title="HTML to React conversion is lossy in rare cases">
    Most frames convert one-to-one. A frame that uses obscure CSS (`@container` queries, `:has` selectors, `mask-composite`) may need a follow-up touch in the UI editor. Tell the agent in the UI editor *"clean this up"* and it will normalize it.
  </Accordion>

  <Accordion title="Promote creates a project — it doesn't move frames">
    The source frames stay on the canvas. The project is a copy. If you keep editing the canvas, the project is "stale" until you re-promote.
  </Accordion>
</AccordionGroup>

## Next

<Card title="MCP overview" icon="plug" href="/mcp/overview">
  Trigger canvas runs and promotes from your editor.
</Card>


# Welcome to VibeFlow Canvas
Source: https://canvas-docs.vibeflow.ai/introduction

Brief an agent. Watch it render on-brand. Ship to PPTX, PDF, React, or your domain.

VibeFlow Canvas is an **agent-driven design surface**. You open an infinite canvas, attach your brand, describe what you need in chat, and the agent renders it as editable HTML frames on the canvas. Decks, landing pages, social posts, ads, emails. All on-brand, all editable, all exportable.

It is built for teams that ship a lot of creative and care about brand fidelity. The chat is the brief. The canvas is the deliverable.

<CardGroup>
  <Card title="Brief" icon="message-pen">
    Tell the agent what you need. Attach a design system so the brand stays locked.
  </Card>

  <Card title="Edit" icon="arrow-pointer">
    Click any element on any frame. Drop a note. The agent stages the selector and your note straight into the next prompt.
  </Card>

  <Card title="Ship" icon="arrow-up-from-bracket">
    Export to PPTX, PDF, PNG, HTML, or a real Vite + React app on your domain.
  </Card>
</CardGroup>

## What you get

<CardGroup>
  <Card title="An infinite canvas" icon="grid-2">
    A Pixi.js viewport with as many fixed-size frames as you want. Pan, zoom, multi-select, copy across canvases.
  </Card>

  <Card title="A canvas agent" icon="sparkles">
    Streams generations as it works. Has tools for creating frames, editing single elements, cloning websites, and generating images and SVGs.
  </Card>

  <Card title="Hard brand contracts" icon="lock">
    Attach a design system in chat and the agent treats palette, fonts, and components as rules, not suggestions.
  </Card>

  <Card title="A hosted MCP" icon="plug">
    Run the same tools from Claude Code, Cursor, or any HTTP MCP client. Same brand contract, same exports.
  </Card>
</CardGroup>

## Pick a path

<CardGroup>
  <Card title="Quickstart" icon="play" href="/quickstart">
    Open your first canvas, generate three frames, and export a deck in five minutes.
  </Card>

  <Card title="Canvas and frames" icon="layer-group" href="/concepts/canvas-and-frames">
    The two units you work with every day. Read this first if you skip the quickstart.
  </Card>

  <Card title="Inline edit" icon="hand-pointer" href="/concepts/inline-edit">
    The AI Pointer. Click any element, drop a note, the agent edits exactly that.
  </Card>

  <Card title="MCP server" icon="plug" href="/mcp/overview">
    Drive the canvas from your editor. URL, auth, full tool reference.
  </Card>
</CardGroup>

## What's not in this product

We are honest about the boundaries:

* **Multiplayer / real-time collab.** Coming soon. Today the canvas is single-operator. You can share a published export, or hand off via a community template.
* **Manual artboard presets.** Canvas frames are agent-sized today. There is no preset picker (yet).
* **Public read-only share links** for an in-progress canvas. Today, share by publishing to the community gallery, exporting, or promoting to a deployed app.

If a feature you need is on the roadmap, email <a href="mailto:founders@vibeflow.ai">[founders@vibeflow.ai](mailto:founders@vibeflow.ai)</a> and we will tell you where it sits.


# Connect your agent
Source: https://canvas-docs.vibeflow.ai/mcp/connect-your-agent

Set up VibeFlow in Claude, Claude Code, Cursor, Codex, OpenClaw, or Hermes. One paste, OAuth sign-in, no keys.

Every setup below ends the same way: your agent gets the full VibeFlow toolset — draft and schedule social posts, upload photos, brief the design agent for graphics, and manage your calendar. Pick your client and go.

<Note>
  **OAuth is the default.** You don't create or paste an API key. The first time your agent touches a VibeFlow tool, your browser opens, you sign in, click **Allow access**, and you're done. Prefer a long-lived key for scripts or CI? See [Canvas MCP](/mcp/overview#api-key-auth).
</Note>

***

## The one-paste setup

The fastest path for agents that can configure their own MCP servers (OpenClaw, Hermes, Claude Code, and most agentic CLIs). Paste this into the chat:

```
Set up VibeFlow from vibeflow.ai/claude
```

Swap the URL for your agent's page — [`vibeflow.ai/claude`](https://vibeflow.ai/claude), [`vibeflow.ai/codex`](https://vibeflow.ai/codex), [`vibeflow.ai/claw`](https://vibeflow.ai/claw), [`vibeflow.ai/cursor`](https://vibeflow.ai/cursor), [`vibeflow.ai/hermes`](https://vibeflow.ai/hermes). Each page serves agent-readable setup instructions, so the agent wires itself up and asks you to approve access once.

If your client can't self-configure, use the per-client steps below.

***

## Claude (web & desktop)

<Steps>
  <Step title="Open Connectors">
    In Claude, go to **Settings → Connectors**.
  </Step>

  <Step title="Add a custom connector">
    Click **Add custom connector**, name it `VibeFlow`, and paste:

    ```
    https://tool.vibeflow.ai/mcp
    ```
  </Step>

  <Step title="Approve access">
    Claude opens VibeFlow in your browser. Sign in and click **Allow access**. The canvas tools appear in Claude's tool list immediately.
  </Step>
</Steps>

***

## Claude Code

```bash theme={null}
claude mcp add --transport http vibeflow https://tool.vibeflow.ai/mcp
```

Then type `/mcp` inside Claude Code and pick **vibeflow** to sign in — it opens your browser for the one-time approval. No `--header` flag needed; OAuth handles auth.

***

## Cursor

**One click:** hit **Install in Cursor** on [vibeflow.ai/cursor](https://vibeflow.ai/cursor). Cursor prompts you to sign in on first use.

**Or manually** — add to `~/.cursor/mcp.json`:

```json theme={null}
{
  "mcpServers": {
    "vibeflow": {
      "url": "https://tool.vibeflow.ai/mcp"
    }
  }
}
```

Verify under **Cursor Settings → Tools & MCP** — you should see the VibeFlow tools listed with a green dot after the OAuth round-trip.

***

## Codex

Add to `~/.codex/config.toml`:

```toml theme={null}
[mcp_servers.vibeflow]
url = "https://tool.vibeflow.ai/mcp"
```

Or in the UI: **Settings → MCP Servers → Streamable HTTP**, name `vibeflow`, URL `https://tool.vibeflow.ai/mcp`.

***

## OpenClaw

Paste into your OpenClaw chat:

```
Set up VibeFlow from vibeflow.ai/claw
```

Or add to your MCP configuration:

```json theme={null}
{
  "mcpServers": {
    "vibeflow": {
      "url": "https://tool.vibeflow.ai/mcp"
    }
  }
}
```

***

## Hermes Agent

Paste into your Hermes chat:

```
Set up VibeFlow from vibeflow.ai/hermes
```

Or add the same `mcpServers` block as OpenClaw above to Hermes' MCP configuration.

***

## Copilot (VS Code)

Create `.vscode/mcp.json` in your workspace:

```json theme={null}
{
  "servers": {
    "vibeflow": {
      "type": "http",
      "url": "https://tool.vibeflow.ai/mcp"
    }
  }
}
```

***

## Anything else

Any MCP client that speaks Streamable HTTP with OAuth works:

| Field     | Value                                       |
| --------- | ------------------------------------------- |
| MCP URL   | `https://tool.vibeflow.ai/mcp`              |
| Transport | Streamable HTTP                             |
| Auth      | OAuth 2.1 (automatic — leave headers empty) |

***

## Prompts to try

Once connected, verify the loop end-to-end:

```
Load my VibeFlow workspace context and list my recent posts.
```

Then push it harder:

* *"Draft an X post about the bug we just fixed — keep it under the limit, my account isn't Premium."*
* *"Draft a LinkedIn post about this week's release, have the design agent make a graphic for it, and attach it."*
* *"Take the copy in this doc and turn it into a LinkedIn carousel post."*
* *"Upload the photo at ./team.jpg and put it on the draft."*
* *"What's on my calendar this week? Move Thursday's post to Friday morning."*

***

## Getting good posts out of your agent

The in-app VibeFlow content agent follows a house playbook; your agent can too.

<Tip>
  Tell your agent: *"Load the VibeFlow content guide and my workspace context before you start."* That's two tool calls — `get_content_guide` (the workflow, platform rules, and confirmation contract) and `get_workspace_context` (business context, learned preferences, viral formats). Agents that skip these write generic posts in the wrong voice.
</Tip>

Three habits that separate good sessions from bad ones:

1. **Platform first.** A post is written for LinkedIn, for X, or both — and that's the user's call. Copy pasted across platforms reads as spam on both.
2. **Make it look.** After the design agent produces a graphic, have your agent call `screenshot_canvas_frames` and fix what's off before attaching it with `set_post_graphic`.
3. **Confirm before it leaves.** `schedule_post` and `publish_post` require an explicit yes on the exact post and time — good agents echo the post back and wait.

***

## Troubleshooting

* **Tools don't appear after setup** — complete the OAuth round-trip first: trigger any VibeFlow tool once, approve in the browser, then retry. Some clients only list tools after the first successful auth.
* **Browser never opens** — your client may not support OAuth discovery. Fall back to an [API key](/mcp/overview#api-key-auth) with an `Authorization: Bearer` header.
* **Agent behaves oddly mid-session** — long agent sessions drift. Restart the session; the connector and its auth survive.
* **"Insufficient credits" errors** — tool calls bill like in-app usage. See [Credits](/reference/credits).

## Next

<CardGroup>
  <Card title="Tool reference" icon="list-check" href="/mcp/tools">
    Every tool, signature, and behavior.
  </Card>

  <Card title="VibeFlow MCP overview" icon="plug" href="/mcp/overview">
    Transport, auth modes, and pricing.
  </Card>
</CardGroup>


# VibeFlow MCP
Source: https://canvas-docs.vibeflow.ai/mcp/overview

Run your social content from any MCP-compatible AI client: draft, design, schedule, publish.

The VibeFlow MCP (Model Context Protocol) server turns any MCP-compatible AI client into your content operator: load your workspace's business context and learned preferences, write LinkedIn and X posts, upload photos, brief the VibeFlow design agent for graphics, and schedule or publish — from your editor, your agent, or Claude itself.

A typical workflow: open a repo in Claude Code, tell the assistant "draft a LinkedIn post about the feature we just shipped", and it loads your workspace context, writes the copy in your voice, has the design agent produce a graphic, attaches it, and puts the post on your calendar once you say when. No browser context-switch.

Setup instructions per client live on [Connect your agent](/mcp/connect-your-agent).

***

## What you can do via MCP

| Goal                                 | Tools you'd chain                                                                     |
| ------------------------------------ | ------------------------------------------------------------------------------------- |
| Learn the ropes (do this first)      | `get_content_guide` → `get_canvas_guide`                                              |
| Load the workspace                   | `list_organizations` → `get_workspace_context`                                        |
| Draft a post                         | `create_post` → `get_post` → `flag_post_gaps`                                         |
| Edit the copy                        | `get_post` → `update_post_variant`                                                    |
| Put real photos on a post            | `request_upload_url` → PUT the file → `set_post_photos`                               |
| Have the design agent make a graphic | `create_canvas_frame` → poll `get_canvas_frame_creation` → `screenshot_canvas_frames` |
| Put that graphic on a post           | `set_post_graphic` (grid or LinkedIn carousel)                                        |
| Put it on the calendar               | `schedule_post` / `publish_post` / `unschedule_post`                                  |
| Ask what content works               | `get_content_analytics` → `get_top_posts`                                             |
| Compare against competitors          | `list_competitors` → `get_competitor_analysis` / `get_competitor_evidence`            |
| Teach it your voice                  | `remember` / `forget`                                                                 |
| Export standalone graphics           | `export_canvas` → poll → `get_canvas_export`                                          |

Full reference on [VibeFlow MCP tools](/mcp/tools).

***

## Transport

| Field     | Value                                                  |
| --------- | ------------------------------------------------------ |
| Transport | Streamable HTTP                                        |
| MCP URL   | `https://tool.vibeflow.ai/mcp`                         |
| Auth      | OAuth 2.1 (default) or `Authorization: Bearer` API key |

Any MCP client that supports Streamable HTTP can connect. Streaming is preserved end-to-end.

***

## OAuth (recommended)

There is nothing to create, copy, or rotate. Point your client at the MCP URL with **no auth headers**:

<Steps>
  <Step title="Add the server">
    Give your client the URL `https://tool.vibeflow.ai/mcp`. Per-client steps: [Connect your agent](/mcp/connect-your-agent).
  </Step>

  <Step title="Approve access">
    On first use your browser opens VibeFlow's consent page. Sign in and click **Allow access**.
  </Step>

  <Step title="Done">
    Your client stores the OAuth tokens and refreshes them automatically. Revoke anytime by removing the connector in your client.
  </Step>
</Steps>

The server implements OAuth 2.1 with dynamic client registration and PKCE — the flow Claude's connector directory and ChatGPT both require — so it works out of the box in clients that support remote MCP OAuth.

***

## API key auth

For scripts, CI, or clients without OAuth support, a personal key works everywhere a header does.

<Steps>
  <Step title="Open Settings">
    Sign in to VibeFlow, click your avatar, go to **Settings → MCP**.
  </Step>

  <Step title="Create an API key">
    Switch to the **API key** tab and click **Create API key**. The key starts with `vf_mcp_…`.
  </Step>

  <Step title="Send it as a bearer header">
    ```
    Authorization: Bearer vf_mcp_…
    ```
  </Step>
</Steps>

Both auth modes resolve to the same account and the same tools — OAuth tokens expire and refresh on their own; API keys live until you regenerate them under **Settings → MCP**. If a key leaks or lands in a public repo, regenerate immediately — the old key dies instantly.

***

## A prompt to try

Once your client is connected, try this in chat to see the loop end-to-end:

```
Load the VibeFlow content guide and my workspace context. Draft a
LinkedIn post about the release we shipped this week — pull the
details from this repo's changelog. Have the design agent make one
graphic for it, attach it, and show me the post. If I like it, I'll
tell you when to schedule it.
```

A good MCP client will chain `get_content_guide` → `get_workspace_context` → `create_post` → `create_canvas_frame` → `get_canvas_frame_creation` → `set_post_graphic` → `get_post`, then wait for your explicit yes before `schedule_post`.

***

## Pricing

MCP tool calls bill the same as in-app usage. Post drafting, editing, scheduling, and uploads carry no agent charges; the `create_canvas_frame` design-agent tool charges per-turn (token-based, 1-credit minimum), and exports have small flat fees. See [Credits](/reference/credits) for the per-tool table.

The MCP doesn't bypass credit gates. If your account is empty, the tool returns an "insufficient credits" error rather than running.

## Next

<CardGroup>
  <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="Tool reference" icon="list-check" href="/mcp/tools">
    Every tool, signature, and behavior.
  </Card>
</CardGroup>


# VibeFlow MCP tools
Source: https://canvas-docs.vibeflow.ai/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; outward-facing tools (`schedule_post`, `publish_post`) always prompt.

***

## Guides (call these first)

### `get_content_guide`

Returns the content-operator workflow: the post lifecycle, the platform-first rule, X character limits, gap tracking, the two visual paths, and the schedule/publish confirmation contract. No arguments. Call once per session before creating or editing posts.

***

### `get_canvas_guide`

Returns the canvas workflow — how to brief the design agent, review frames, and deliver graphics. No arguments. Call once before creating graphics.

***

## Workspace

### `list_organizations`

Lists the workspaces your account belongs to. Every content tool takes one of these ids as `organization_id`. No arguments.

***

### `get_workspace_context`

Loads the workspace's content context in one call.

| Arg               | Required | Description                               |
| ----------------- | -------- | ----------------------------------------- |
| `organization_id` | Yes      | Workspace id (from `list_organizations`). |

**Returns** `{ business_context, memories, viral_formats: { linkedin, x }, agent_canvas_id }`. `agent_canvas_id` is the canvas where designed post graphics live — use it for `create_canvas_frame` and `set_post_graphic`.

***

### `list_post_options`

Lists the workspace's publishing options: platforms, connected social accounts (`integration_id`, `author_urn`), and saved voice personas. Accounts resolve automatically when omitted from `create_post`, so this is only needed when the user names a specific account or voice.

| Arg               | Required | Description   |
| ----------------- | -------- | ------------- |
| `organization_id` | Yes      | Workspace id. |

***

## Posts

### `create_post`

Creates a post as a **draft** — one post with one variant per platform, each carrying real copy written for that platform. Never publishes or schedules.

| Arg               | Required | Description                                                                                                       |
| ----------------- | -------- | ----------------------------------------------------------------------------------------------------------------- |
| `organization_id` | Yes      | Workspace id.                                                                                                     |
| `variants`        | Yes      | 1–2 entries of `{ platform: "linkedin" \| "x", text, caption?, integration_id?, author_urn? }`, one per platform. |
| `title`           | No       | Short internal working title.                                                                                     |
| `brief`           | No       | Internal note on the post's angle.                                                                                |
| `canvas_id`       | No       | Backing canvas when the post's graphics live there.                                                               |

**Returns** `{ post_id, variants: [{ variant_id, platform }], status: "draft" }`.

X copy is weighted-counted server-side (URLs 23 chars, emoji 2) against the connected account's limit — 280, or 25k with X Premium. A too-long tweet fails the whole call with a clear message; shorten and retry.

***

### `list_posts`

Lists the workspace's posts, newest first, with per-variant lifecycle and schedule state.

| Arg               | Required | Description                                 |
| ----------------- | -------- | ------------------------------------------- |
| `organization_id` | Yes      | Workspace id.                               |
| `limit`           | No       | 1–50.                                       |
| `status`          | No       | `scheduled` for the upcoming calendar only. |

***

### `get_post`

Reads one post in full: per-variant copy, `visual_urls` (photos), `frame_ids` (canvas graphics), schedule state, and `missing_info` gaps. Always call before editing, attaching visuals, scheduling, or publishing.

| Arg               | Required | Description                         |
| ----------------- | -------- | ----------------------------------- |
| `organization_id` | Yes      | Workspace id.                       |
| `post_id`         | Yes      | From `list_posts` or `create_post`. |

***

### `update_post_variant`

Edits one variant's copy (`text`, `caption`) or toggles `enabled`. Character limits are enforced server-side; published variants only accept text edits. Visuals go through the two `set_post_*` tools instead.

| Arg                            | Required | Description      |
| ------------------------------ | -------- | ---------------- |
| `organization_id`              | Yes      | Workspace id.    |
| `post_id`                      | Yes      | The post.        |
| `variant_id`                   | Yes      | From `get_post`. |
| `text` / `caption` / `enabled` | One of   | The change.      |

***

### `flag_post_gaps`

Records what a post still needs from the user — shown as an alert banner on the draft in the studio. Kinds: `photo`, `data`, `other`. **Replace semantics**: `gaps` becomes the post's full open list; an empty array clears it. Photos attached via `set_post_photos` clear photo gaps automatically.

| Arg               | Required | Description                      |
| ----------------- | -------- | -------------------------------- |
| `organization_id` | Yes      | Workspace id.                    |
| `post_id`         | Yes      | The post.                        |
| `gaps`            | Yes      | Up to 10 of `{ kind, message }`. |

***

## Visuals

Two disjoint paths: uploaded photos (`request_upload_url` → `set_post_photos`) and designed canvas graphics (`create_canvas_frame` → `set_post_graphic`). The last one applied wins.

### `request_upload_url`

Returns a short-lived signed URL to upload one photo or video into the workspace. HTTP PUT the raw bytes to `upload_url` with **exactly** the returned headers (`Content-Type` and `Content-Length` are part of the signature). After the PUT, `public_url` is the file's permanent address.

| Arg               | Required | Description                                                                           |
| ----------------- | -------- | ------------------------------------------------------------------------------------- |
| `organization_id` | Yes      | Workspace id.                                                                         |
| `file_name`       | Yes      | Original file name with extension.                                                    |
| `content_type`    | Yes      | MIME type. Images: png, jpeg, webp, gif, avif (≤20MB). Video: mp4, webm, mov (≤60MB). |
| `size_bytes`      | Yes      | Exact file size in bytes.                                                             |

**Returns** `{ upload_url, method: "PUT", headers, key, public_url, expires_in_seconds }`. The URL expires in 10 minutes; one call per file.

***

### `set_post_photos`

Attaches uploaded photos/videos to a post as its published visuals. Urls must be `public_url` values from this workspace's upload flow — unknown urls are skipped. Replaces designed canvas visuals if the post had them.

| Arg                | Required | Description                                   |
| ------------------ | -------- | --------------------------------------------- |
| `organization_id`  | Yes      | Workspace id.                                 |
| `post_id`          | Yes      | The post.                                     |
| `image_urls`       | Yes      | 1–20 `public_url` values.                     |
| `variant_ids`      | No       | Limit to these variants; default all enabled. |
| `replace_existing` | No       | Replace instead of add.                       |

***

### `set_post_graphic`

Attaches designed canvas frames to a post. Exports the frames to PNG **fresh on every call** — re-call after a graphic is edited. `canvas_id` defaults to the workspace's agent canvas.

| Arg               | Required | Description                                                             |
| ----------------- | -------- | ----------------------------------------------------------------------- |
| `organization_id` | Yes      | Workspace id.                                                           |
| `post_id`         | Yes      | The post.                                                               |
| `frame_ids`       | Yes      | 1–10 frame ids.                                                         |
| `canvas_id`       | No       | Canvas holding the frames.                                              |
| `variant_ids`     | No       | Limit to these variants.                                                |
| `linkedin_layout` | No       | `grid` (default, multi-image) or `carousel` (swipeable PDF, 2+ frames). |

***

## Publishing

### `schedule_post`

Schedules a post for delivery at a specific time. **Only after the user explicitly confirmed the exact post and time** — the tool refuses without `user_confirmed: true`.

| Arg                | Required | Description                     |
| ------------------ | -------- | ------------------------------- |
| `organization_id`  | Yes      | Workspace id.                   |
| `post_id`          | Yes      | The post.                       |
| `scheduled_at_iso` | Yes      | ISO 8601 with timezone offset.  |
| `timezone`         | Yes      | IANA timezone.                  |
| `user_confirmed`   | Yes      | `true` only on an explicit yes. |

***

### `publish_post`

Publishes a post right now (delivery starts within seconds). Same confirmation contract as `schedule_post`.

| Arg               | Required | Description                     |
| ----------------- | -------- | ------------------------------- |
| `organization_id` | Yes      | Workspace id.                   |
| `post_id`         | Yes      | The post.                       |
| `user_confirmed`  | Yes      | `true` only on an explicit yes. |

***

### `unschedule_post`

Cancels a scheduled delivery — the post returns to drafts. Safe and reversible.

| Arg               | Required | Description   |
| ----------------- | -------- | ------------- |
| `organization_id` | Yes      | Workspace id. |
| `post_id`         | Yes      | The post.     |

***

## Analytics

Read-only views over the workspace's indexed social history (built by Index history in the app's Analytics page) and its tracked competitors. Competitors are added and removed in the app.

### `get_content_analytics`

Aggregated performance of the workspace's indexed posts.

| Arg               | Required | Description                                                                                |
| ----------------- | -------- | ------------------------------------------------------------------------------------------ |
| `organization_id` | Yes      | Workspace id.                                                                              |
| `dimension`       | No       | `overview` (default), `category`, `media`, `team`, or `cadence` (best posting days/times). |
| `platform`        | No       | `linkedin` (default) or `x`.                                                               |
| `range_months`    | No       | 1–36, default 12.                                                                          |
| `include_reposts` | No       | Default false.                                                                             |
| `timezone`        | No       | IANA timezone for cadence bucketing (default UTC).                                         |

***

### `get_top_posts`

The workspace's real best-performing indexed posts — copy, engagement, category, media type, image urls — optionally filtered by `category` or `media_type` (`image`, `video`, `carousel`, `document`, `poll`, `text`). Takes `organization_id`, optional `platform`, and `limit` (1–20).

***

### `list_competitors`

Lists tracked competitor companies and creators with company ids, enrichment state, and indexing progress. Takes `organization_id`. Resolve ids here before the two tools below.

***

### `get_competitor_analysis`

Head-to-head comparison vs tracked competitors: share of voice, engagement share, monthly trend, category mix, frequency, authors, follower counts. Takes `organization_id`, optional `competitor_company_id` (self-vs-one; omit for aggregate), `range_months`, `include_reposts`.

***

### `get_competitor_evidence`

Bounded evidence for one competitor: strategic profile, top posts, topics, formats, engagement. Takes `organization_id`, `competitor_company_id`, optional `limit` (1–15).

***

## Memory

### `remember`

Saves a durable user preference for the workspace's content (voice, wording, topics). Comes back via `get_workspace_context`. Takes `organization_id`, `text`, optional `kind` (`style` / `wording` / `fact`), `importance` (1–5), and `supersedes_id`.

### `forget`

Deletes a saved preference by `memory_id`. Takes `organization_id` and `memory_id`.

***

## Canvas (graphics engine)

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

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

***

### `get_canvas`

Returns one canvas's metadata. Takes `canvas_id`.

***

### `list_canvas_frames`

Lists every frame on a canvas (metadata, no HTML). Takes `canvas_id`, optional `cursor` and `limit`.

***

### `get_canvas_frame_code`

Returns the raw HTML of one frame. Takes `canvas_id` and `frame_id`.

***

### `screenshot_canvas_frames`

Renders 1–4 frames to images so the agent can **see** the actual result, not just its HTML. Takes `canvas_id` and `frame_ids`; returns the screenshots as inline images.

***

### `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. Also the edit path — brief it again on the same canvas, naming the frames to change.

| Arg                | Required | Description                                              |
| ------------------ | -------- | -------------------------------------------------------- |
| `canvas_id`        | Yes      | The canvas id (`agent_canvas_id` for post graphics).     |
| `prompt`           | Yes      | The brief: verbatim copy, purpose, platform, size, mood. |
| `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`. Takes `job_id`; returns the job status (`pending` / `running` / `completed` / `failed`) and, once completed, the created frame ids.

***

### `export_canvas`

Starts an export job for a canvas. Takes `canvas_id`, `format` (`png`, `jpg`, `pdf`, `pptx`), optional `frame_ids`. **Returns** `{ job_id }`.

***

### `get_canvas_export`

Polls an export job. Takes `job_id`; returns the 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: an over-limit X post explains the weighted count, a skipped upload url says where valid urls come from, and an empty balance returns an "insufficient credits" message instead of running.

## Next

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


# Quickstart
Source: https://canvas-docs.vibeflow.ai/quickstart

Open your first canvas, generate three frames, export a deck. Five minutes.

## What you'll build

A three-slide brand-launch deck, generated against a design system, exported as an editable `.pptx`. By the end you'll know the loop: chat brief → canvas frames → export.

<Note>
  No setup required beyond a VibeFlow account. The agent runs in the cloud and renders directly into your browser canvas.
</Note>

## Prerequisites

* A VibeFlow account (sign up at [ui.vibeflow.ai](https://ui.vibeflow.ai))
* A few credits on your plan (free plan covers a first canvas)
* Optionally, a brand URL or an existing design system. Skip if you want the agent to invent a starting brand.

***

## Step 1. Open a canvas

<Steps>
  <Step title="Go to the home composer">
    Sign in and you land on [`/home`](https://ui.vibeflow.ai/home). This is the composer that decides whether you're starting a canvas or a UI project.
  </Step>

  <Step title="Switch to Canvas mode">
    Toggle the composer to **Canvas**. The starter prompt cards change to canvas-shaped examples (deck, carousel, landing, etc.).
  </Step>

  <Step title="Brief the agent">
    Type something concrete. A good first brief looks like:

    *"A three-slide launch deck for our spring product drop. Title slide, two value-prop slides, all on-brand."*

    Hit **Generate** or `⌘ + Enter`.
  </Step>
</Steps>

You land on `/canvas/:id` with the chat on the left, the infinite canvas on the right, and the agent already streaming the first frames.

***

## Step 2. Watch the agent render

The agent typically:

1. Reads your brief and the attached brand (if any).
2. Plans the frames (sizes, layout, copy).
3. Creates frames one by one via its `create_frame` tool. Each appears on the canvas as it lands.
4. Says what it did in chat when finished.

<Tip>
  **You can keep working while it streams.** Pan, zoom, open the right sidebar, browse other frames. The canvas does not block.
</Tip>

***

## Step 3. Refine

Two ways to change what you see:

### Talk to it

Type follow-ups in chat:

* *"Make slide two darker, ink background, white type."*
* *"Add a fourth slide with three pricing tiers."*
* *"Swap the hero photo for something more editorial."*

### Point at it

Press **C** to enter the **Comment** tool. Click any element on any frame (a heading, a button, an image). A small composer appears at the click site. Drop a one-line note:

* *"Make this bolder."*
* *"Replace with our actual product name."*

Hit Enter. The element becomes a chip in your chat, prefilled with your note. Send the message and the agent edits exactly that element via its `update_element` tool. The rest of the frame stays untouched.

See [Inline edit](/concepts/inline-edit) for the full pattern.

***

## Step 4. Attach a design system (optional but recommended)

If you have a design system in VibeFlow, attach it now so every generation locks to your brand.

<Steps>
  <Step title="Open the design picker">
    In the chat composer footer, click the **layers** icon (design systems) or **palette** icon (style preset).
  </Step>

  <Step title="Pick yours">
    Choose your design system. It pins to the canvas (`canvas.designSystemIds`) and every subsequent generation reads it.
  </Step>

  <Step title="Re-roll a frame">
    Right-click a frame → **Reference in chat**, then ask: *"Re-render this with the locked brand."* The agent rebuilds it using your tokens.
  </Step>
</Steps>

Don't have one? Open a second tab to [`/design-systems/new`](https://ui.vibeflow.ai/design-systems/new), paste a URL or describe your brand, and the agent builds it in 30 seconds. Come back to your canvas and attach it.

***

## Step 5. Export

Click the **Export** button in the right sidebar to open the export menu.

| Format        | Use it for                                                                          |
| ------------- | ----------------------------------------------------------------------------------- |
| **PPTX**      | Editable PowerPoint / Keynote / Google Slides. Real text boxes, real shapes.        |
| **PDF**       | Print and share. Per-frame or whole-canvas.                                         |
| **PNG / JPG** | Social, ads, thumbnails. Multi-frame downloads as a `.zip`.                         |
| **HTML**      | Drop into any site or email. Per-frame, no runtime needed.                          |
| **React**     | A `.tsx` file (or zipped React + Tailwind project) you can drop into your codebase. |
| **Prompt**    | A clipboard prompt that rebuilds this frame in any other AI tool.                   |

For the launch deck, pick **PPTX**. The export streams a real `.pptx` to your downloads in a few seconds. Open it in Keynote or PowerPoint and every element is editable.

See [Exports overview](/exports/overview) for what's included and the trade-offs of each format.

***

## What you just built

* A canvas you own at `/canvas/:id`
* Three editable HTML frames on it
* An editable `.pptx` saved locally
* A repeatable loop: brief → render → point → export

## Where to go next

<CardGroup>
  <Card title="Canvas and frames" icon="layer-group" href="/concepts/canvas-and-frames">
    The full mental model. What's persisted, what's local, what's an iframe.
  </Card>

  <Card title="Promote to app" icon="rocket" href="/exports/promote-to-app">
    Turn any frame into a deployed Vite + React project on your own domain.
  </Card>

  <Card title="MCP overview" icon="plug" href="/mcp/overview">
    Drive the same agent from Claude Code or Cursor. URL, auth, examples.
  </Card>

  <Card title="Keyboard shortcuts" icon="keyboard" href="/editor/keyboard-shortcuts">
    The full cheat sheet. The agent flies if you do.
  </Card>
</CardGroup>


# Credits
Source: https://canvas-docs.vibeflow.ai/reference/credits

What each canvas action costs and how billing is computed.

Credits are the unit of metered usage in VibeFlow. The canvas product bills both per-turn (for chat-driven generations) and per-action (for a few flat-rate tools).

## Per-turn billing

A canvas chat turn is **token-based** with a one-credit minimum to start. The cost depends on:

* The size of the brief and context (chat history, attached frames, design system, skills).
* The amount of output the agent writes (frame HTML, narration).
* The tools the agent calls in the turn (some have a small flat surcharge, see below).

The exact cost of the last turn shows in the chat right under the agent's reply, so you can see what each action did to your balance.

| Trigger         | Cost                           |
| --------------- | ------------------------------ |
| Start a turn    | 1 credit minimum               |
| Continue a turn | Token-based, charged on finish |

If your balance is below the minimum, the turn doesn't start. You'll see "insufficient credits" in chat and nothing is debited.

***

## Per-action billing (flat rates)

A handful of canvas tools have a small flat cost on top of token usage, because they hit external services.

| Tool                                    | Flat cost | Notes                                                  |
| --------------------------------------- | --------- | ------------------------------------------------------ |
| `clone_website` (website snapshot)      | 2 credits | Snapshots a URL into a frame.                          |
| `clone_website` (design-system extract) | 2 credits | Extracts a full design system from a URL and saves it. |
| `clone_framer_component`                | 1 credit  | Clones a published Framer component into a frame.      |
| `generate_image`                        | Variable  | Charged against the underlying image-model cost.       |
| `generate_svg`                          | Variable  | Charged against the underlying image-model cost.       |

Flat charges land **in addition to** the per-turn token cost.

***

## Promote to app

| Action                                                  | Cost     |
| ------------------------------------------------------- | -------- |
| Promote selected frames into a **new** UI project       | 1 credit |
| Promote selected frames into an **existing** UI project | Free     |

The promote charge is for scaffolding the new project. Editing and deploying that project afterward bills against the UI product's own meter (covered at [docs.vibeflow.ai](https://docs.vibeflow.ai)).

***

## Server exports

PPTX, PDF, PNG, and JPG exports are **not metered** at the export step. They run against the project storage you've already paid for. There is no per-export cost.

Client exports (HTML, React, Prompt) are obviously free; they run in your browser.

***

## MCP usage

MCP tool calls bill identically to in-app usage. The agent runs via the same `run_canvas_agent` path and applies the same credit gates. Calling MCP tools doesn't bypass anything.

If a tool fails for reasons other than insufficient credits (a validator error, a 5xx from an underlying service), no credit is consumed.

***

## Watching your balance

The canvas editor doesn't show the balance widget inline (the chat shows per-turn cost instead). To see your balance:

* Click your avatar → **Settings → Credits**.
* Or go directly to [`/settings/credits`](https://ui.vibeflow.ai/settings/credits).

You can top up at any time. Top-ups apply instantly.

***

## Plans

Plans, monthly allowances, and team seats are covered on the [pricing page](https://vibeflow.ai/pricing). Plans are shared across the canvas and UI products; you don't buy separate buckets.

## Next

<Card title="MCP overview" icon="plug" href="/mcp/overview">
  Same billing, from your editor.
</Card>