Skip to main content

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 VibeFlow MCP (Model Context Protocol) server lets any MCP-compatible AI client run the canvas agent end-to-end: list and create canvases, write frames, attach skills, export to PPTX, and more. From your editor. A typical workflow: open a repo in Cursor or Claude Code, point the assistant at your codebase, and have it spin up a canvas branded with your real components, generate a launch deck, and stream the .pptx back to your machine. No browser context-switch.

What you can do via MCP

GoalTools you’d chain
Spin up a brand-new canvas and brief itlist_canvases → (none yet) → ask user → run_canvas_agent against a new canvas (created via UI or the broader VibeFlow MCP)
Add a frame to an existing canvaslist_canvaseslist_canvas_framescreate_canvas_frame
Touch up a single framelist_canvas_framesget_canvas_frame_codeupdate_canvas_frame
Re-roll a whole frameget_canvas_frame_codewrite_canvas_frame
Run the full canvas agent on a briefrun_canvas_agent
Export a deckexport_canvas → poll → get_canvas_export
Full reference on Canvas MCP tools.

Getting your API key

1

Open Settings

Sign in to VibeFlow, click your avatar, go to Settings → MCP.
2

Create an API key

Click Create API Key. The key starts with vf_mcp_… and is shown once.
3

Copy URL and key

Copy the MCP URL (https://tool.vibeflow.ai/mcp unless you’ve been routed to a regional cluster) and the key.
The same key works for both canvas tools and the broader VibeFlow MCP (UI projects, design systems, deploys).

Transport

FieldValue
TransportStreamable HTTP
MCP URLhttps://tool.vibeflow.ai/mcp
AuthAuthorization: Bearer YOUR_API_KEY
Any MCP client that supports HTTP transport with custom headers can connect. Streaming is preserved end-to-end.

Connecting your client

Claude Code

claude mcp add --transport http \
  vibeflow https://tool.vibeflow.ai/mcp \
  --header "Authorization: Bearer YOUR_API_KEY"
Replace YOUR_API_KEY with your key.

Cursor

Add to ~/.cursor/mcp.json (or via the Cursor MCP settings panel):
{
  "vibeflow": {
    "command": "npx",
    "args": [
      "-y",
      "mcp-remote",
      "https://tool.vibeflow.ai/mcp"
    ],
    "env": {
      "HTTP_AUTHORIZATION": "Bearer YOUR_API_KEY"
    }
  }
}

Claude Desktop

Add to your Claude Desktop config:
{
  "mcpServers": {
    "vibeflow": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://tool.vibeflow.ai/mcp",
        "--header",
        "Authorization: Bearer YOUR_API_KEY"
      ]
    }
  }
}

Anything else

For any client that supports Streamable HTTP transport:
  • MCP URL: https://tool.vibeflow.ai/mcp
  • Auth header: Authorization: Bearer YOUR_API_KEY

A prompt to try

Once your client is connected, try this in chat to see the loop end-to-end:
List my canvases. Pick the most recent one.

Run the canvas agent against it with this brief:

"Look at my repository's components in src/components/ui. Use them as
the design system. Generate a three-slide launch deck for our v2
release. Title slide, value-prop slide, pricing slide. Then export
the canvas as PPTX and give me the download link."
A good MCP client will chain list_canvasesrun_canvas_agentexport_canvasget_canvas_export and hand you back a working URL.

Pricing

MCP tool calls bill the same as in-app usage. The run_canvas_agent tool charges per-turn (token-based, 1-credit minimum). Exports and clone calls 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.

Regenerating your key

Settings → MCP → regenerate. The old key is invalidated immediately. Update your client config to the new key. If a key is leaked or pushed to a public repo, regenerate immediately.

Next

Tool reference

Every canvas tool, signature, and behavior.

Credits

What each tool costs.