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

# 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 cols={2}>
  <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>