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

# Canvas MCP

> Drive the canvas from any MCP-compatible AI client. Same design rules, same brand contract, same exports.

The VibeFlow MCP (Model Context Protocol) server lets any MCP-compatible AI client work the canvas end-to-end: list and create canvases, author frames as HTML, screenshot the rendered result, follow your design systems, and export to PPTX, PDF, or images. From your editor, your agent, or Claude itself.

A typical workflow: open a repo in Cursor or Claude Code, have the assistant read your product copy, spin up a canvas branded with your design system, author a launch deck frame by frame, and stream the `.pptx` back to your machine. No browser context-switch.

Setup instructions per client live on [Connect your agent](/mcp/connect-your-agent).

***

## What you can do via MCP

| Goal                                   | Tools you'd chain                                                       |
| -------------------------------------- | ----------------------------------------------------------------------- |
| Learn the ropes (do this first)        | `get_canvas_guide` → `get_design_guide`                                 |
| Spin up a canvas and design on it      | `create_canvas` → `create_designed_frame`                               |
| Have the VibeFlow agent design for you | `create_canvas_frame` → poll `get_canvas_frame_creation`                |
| See what you built                     | `screenshot_canvas_frames`                                              |
| Touch up a single frame                | `get_canvas_frame_code` → `update_canvas_frame`                         |
| Re-roll a whole frame                  | `get_canvas_frame_code` → `write_frame_html`                            |
| Make variations                        | `duplicate_canvas_frame` → `update_canvas_frame`                        |
| Stay on brand                          | `list_canvas_skills` → `load_canvas_skill`, or `get_all_design_systems` |
| Export a deck                          | `export_canvas` → poll → `get_canvas_export`                            |

Full reference on [Canvas MCP tools](/mcp/tools).

***

## Transport

| Field     | Value                                                  |
| --------- | ------------------------------------------------------ |
| Transport | Streamable HTTP                                        |
| MCP URL   | `https://tool.vibeflow.ai/mcp`                         |
| Auth      | OAuth 2.1 (default) or `Authorization: Bearer` API key |

Any MCP client that supports Streamable HTTP can connect. Streaming is preserved end-to-end.

***

## OAuth (recommended)

There is nothing to create, copy, or rotate. Point your client at the MCP URL with **no auth headers**:

<Steps>
  <Step title="Add the server">
    Give your client the URL `https://tool.vibeflow.ai/mcp`. Per-client steps: [Connect your agent](/mcp/connect-your-agent).
  </Step>

  <Step title="Approve access">
    On first use your browser opens VibeFlow's consent page. Sign in and click **Allow access**.
  </Step>

  <Step title="Done">
    Your client stores the OAuth tokens and refreshes them automatically. Revoke anytime by removing the connector in your client.
  </Step>
</Steps>

The server implements OAuth 2.1 with dynamic client registration and PKCE — the flow Claude's connector directory and ChatGPT both require — so it works out of the box in clients that support remote MCP OAuth.

***

## API key auth

For scripts, CI, or clients without OAuth support, a personal key works everywhere a header does.

<Steps>
  <Step title="Open Settings">
    Sign in to VibeFlow, click your avatar, go to **Settings → MCP**.
  </Step>

  <Step title="Create an API key">
    Switch to the **API key** tab and click **Create API key**. The key starts with `vf_mcp_…`.
  </Step>

  <Step title="Send it as a bearer header">
    ```
    Authorization: Bearer vf_mcp_…
    ```
  </Step>
</Steps>

Both auth modes resolve to the same account and the same tools — OAuth tokens expire and refresh on their own; API keys live until you regenerate them under **Settings → MCP**. If a key leaks or lands in a public repo, regenerate immediately — the old key dies instantly.

***

## A prompt to try

Once your client is connected, try this in chat to see the loop end-to-end:

```
Load the VibeFlow canvas guide and design guide. Then create a canvas
called "Launch deck" and design a three-slide deck for our v2 release:
title slide, value-prop slide, pricing slide. Screenshot the frames,
fix anything that looks off, then export the canvas as PPTX and give
me the download link.
```

A good MCP client will chain `get_canvas_guide` → `get_design_guide` → `create_canvas` → `create_designed_frame` ×3 → `screenshot_canvas_frames` → `export_canvas` → `get_canvas_export` and hand you back a working URL.

***

## Pricing

MCP tool calls bill the same as in-app usage. Frames you author yourself via `create_designed_frame` / `write_frame_html` are free of agent charges; the `create_canvas_frame` agent tool charges per-turn (token-based, 1-credit minimum), and exports have small flat fees. See [Credits](/reference/credits) for the per-tool table.

The MCP doesn't bypass credit gates. If your account is empty, the tool returns an "insufficient credits" error rather than running.

## Next

<CardGroup cols={2}>
  <Card title="Connect your agent" icon="plug" href="/mcp/connect-your-agent">
    Claude, Claude Code, Cursor, Codex, OpenClaw, Hermes — step by step.
  </Card>

  <Card title="Tool reference" icon="list-check" href="/mcp/tools">
    Every canvas tool, signature, and behavior.
  </Card>
</CardGroup>