Skip to main content

Documentation Index

Fetch the complete documentation index at: https://canvas-docs.vibeflow.ai/llms.txt

Use this file to discover all available pages before exploring further.

​
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.
No setup required beyond a VibeFlow account. The agent runs in the cloud and renders directly into your browser canvas.

​
Prerequisites

  • A VibeFlow account (sign up at 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

1

Go to the home composer

Sign in and you land on /home. This is the composer that decides whether you’re starting a canvas or a UI project.
2

Switch to Canvas mode

Toggle the composer to Canvas. The starter prompt cards change to canvas-shaped examples (deck, carousel, landing, etc.).
3

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.
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.
You can keep working while it streams. Pan, zoom, open the right sidebar, browse other frames. The canvas does not block.

​
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 for the full pattern.
If you have a design system in VibeFlow, attach it now so every generation locks to your brand.
1

Open the design picker

In the chat composer footer, click the layers icon (design systems) or palette icon (style preset).
2

Pick yours

Choose your design system. It pins to the canvas (canvas.designSystemIds) and every subsequent generation reads it.
3

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.
Don’t have one? Open a second tab to /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.
FormatUse it for
PPTXEditable PowerPoint / Keynote / Google Slides. Real text boxes, real shapes.
PDFPrint and share. Per-frame or whole-canvas.
PNG / JPGSocial, ads, thumbnails. Multi-frame downloads as a .zip.
HTMLDrop into any site or email. Per-frame, no runtime needed.
ReactA .tsx file (or zipped React + Tailwind project) you can drop into your codebase.
PromptA 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 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

Canvas and frames

The full mental model. What’s persisted, what’s local, what’s an iframe.

Promote to app

Turn any frame into a deployed Vite + React project on your own domain.

MCP overview

Drive the same agent from Claude Code or Cursor. URL, auth, examples.

Keyboard shortcuts

The full cheat sheet. The agent flies if you do.