> ## 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 chat and the agent

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