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

# Welcome to VibeFlow Canvas

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