The chat panel on the left is the brief. Everything that lands on your canvas comes from a turn in this panel.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.
The loop
Each chat turn runs the same way:You send a brief
Plain English. Optional attachments: images, frames you’ve referenced, element pointers from the comment tool.
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.
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.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) |
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:Lead with the artifact, not the topic
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.
Name the frame sizes when they matter
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.
Use frame references for surgical edits
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.
Use the comment tool for one-element edits
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.Tell it the brand contract is hard
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.”
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.
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. The cost of the last turn shows in the chat right under the agent’s reply.Next
Design systems
Lock palette, typography, and components as rules. Not suggestions.
Inline edit
The fastest edit loop. Click element, drop note, ship.