Canvas MCP - VibeFlow Canvas

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.

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.

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:

Add the server

Give your client the URL https://tool.vibeflow.ai/mcp. Per-client steps: Connect your agent.

Approve access

On first use your browser opens VibeFlow’s consent page. Sign in and click Allow access.

Done

Your client stores the OAuth tokens and refreshes them automatically. Revoke anytime by removing the connector in your client.

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.

Open Settings

Create an API key

Switch to the API key tab and click Create API key. The key starts with vf_mcp_….

Send it as a bearer header

Authorization: Bearer vf_mcp_…

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

Connect your agent

Claude, Claude Code, Cursor, Codex, OpenClaw, Hermes — step by step.

Tool reference

Every canvas tool, signature, and behavior.

​What you can do via MCP

​Transport

​OAuth (recommended)

​API key auth

​A prompt to try

​Pricing

​Next