Connect your agent - VibeFlow Canvas

Every setup below ends the same way: your agent gets the full canvas toolset — list and create canvases, author frames, screenshot them, follow your design systems, export decks. Pick your client and go.

OAuth is the default. You don’t create or paste an API key. The first time your agent touches a VibeFlow tool, your browser opens, you sign in, click Allow access, and you’re done. Prefer a long-lived key for scripts or CI? See Canvas MCP.

The one-paste setup

The fastest path for agents that can configure their own MCP servers (OpenClaw, Hermes, Claude Code, and most agentic CLIs). Paste this into the chat:

Set up VibeFlow from vibeflow.ai/claude

Swap the URL for your agent’s page — vibeflow.ai/claude, vibeflow.ai/codex, vibeflow.ai/claw, vibeflow.ai/cursor, vibeflow.ai/hermes. Each page serves agent-readable setup instructions, so the agent wires itself up and asks you to approve access once. If your client can’t self-configure, use the per-client steps below.

Claude (web & desktop)

Open Connectors

In Claude, go to Settings → Connectors.

Add a custom connector

Click Add custom connector, name it VibeFlow, and paste:

https://tool.vibeflow.ai/mcp

Approve access

Claude opens VibeFlow in your browser. Sign in and click Allow access. The canvas tools appear in Claude’s tool list immediately.

Claude Code

claude mcp add --transport http vibeflow https://tool.vibeflow.ai/mcp

Then type /mcp inside Claude Code and pick vibeflow to sign in — it opens your browser for the one-time approval. No --header flag needed; OAuth handles auth.

Cursor

One click: hit Install in Cursor on vibeflow.ai/cursor. Cursor prompts you to sign in on first use. Or manually — add to ~/.cursor/mcp.json:

{
  "mcpServers": {
    "vibeflow": {
      "url": "https://tool.vibeflow.ai/mcp"
    }
  }
}

Verify under Cursor Settings → Tools & MCP — you should see the VibeFlow tools listed with a green dot after the OAuth round-trip.

Codex

Add to ~/.codex/config.toml:

[mcp_servers.vibeflow]
url = "https://tool.vibeflow.ai/mcp"

Or in the UI: Settings → MCP Servers → Streamable HTTP, name vibeflow, URL https://tool.vibeflow.ai/mcp.

OpenClaw

Paste into your OpenClaw chat:

Set up VibeFlow from vibeflow.ai/claw

Or add to your MCP configuration:

{
  "mcpServers": {
    "vibeflow": {
      "url": "https://tool.vibeflow.ai/mcp"
    }
  }
}

Hermes Agent

Paste into your Hermes chat:

Set up VibeFlow from vibeflow.ai/hermes

Or add the same mcpServers block as OpenClaw above to Hermes’ MCP configuration.

Copilot (VS Code)

Create .vscode/mcp.json in your workspace:

{
  "servers": {
    "vibeflow": {
      "type": "http",
      "url": "https://tool.vibeflow.ai/mcp"
    }
  }
}

Anything else

Any MCP client that speaks Streamable HTTP with OAuth works:

Field	Value
MCP URL	`https://tool.vibeflow.ai/mcp`
Transport	Streamable HTTP
Auth	OAuth 2.1 (automatic — leave headers empty)

Prompts to try

Once connected, verify the loop end-to-end:

Create a canvas called "MCP test" and design a single 1080×1350
Instagram post announcing a summer sale. Screenshot it and show me.

Then push it harder:

“List my canvases and screenshot the four most recent frames on the latest one.”
“Read the design system on my ‘Brand refresh’ canvas, then add a pricing section frame that matches it.”
“Design a three-slide launch deck for our v2 release — title, value prop, pricing — then export the canvas as PPTX and give me the download link.”
“Duplicate the hero frame twice and give me a darker variant and a warmer variant, side by side.”
“Take the copy in this doc and turn it into a five-frame LinkedIn carousel.”

Getting good designs out of your agent

The VibeFlow design agent follows a house style guide; your agent can too.

Tell your agent: “Load the VibeFlow canvas guide and design guide before you start.” That’s two tool calls — get_canvas_guide (workflow + frame-HTML rules) and get_design_guide (visual hierarchy, spacing, typography, color discipline, and the anti-”AI-generated look” bans). Agents that skip these produce noticeably more generic work.

Three habits that separate good sessions from bad ones:

Make it look. After any visual change, have the agent call screenshot_canvas_frames and fix what’s off. Agents that judge layouts from HTML alone ship broken spacing.
Attach a design system. Frames authored against a design system inherit your palette, type, and components. Without one, every agent invents its own brand.
Iterate surgically. For small changes, point the agent at update_canvas_frame (string replace) instead of full rewrites — faster, and it can’t mangle the rest of the frame.

Troubleshooting

Tools don’t appear after setup — complete the OAuth round-trip first: trigger any VibeFlow tool once, approve in the browser, then retry. Some clients only list tools after the first successful auth.
Browser never opens — your client may not support OAuth discovery. Fall back to an API key with an Authorization: Bearer header.
Agent behaves oddly mid-session — long agent sessions drift. Restart the session; the connector and its auth survive.
“Insufficient credits” errors — tool calls bill like in-app usage. See Credits.

Tool reference

Every canvas tool, signature, and behavior.

Canvas MCP overview

Transport, auth modes, and pricing.

​The one-paste setup

​Claude (web & desktop)

​Claude Code

​Cursor

​Codex

​OpenClaw

​Hermes Agent

​Copilot (VS Code)

​Anything else

​Prompts to try

​Getting good designs out of your agent

​Troubleshooting

​Next

Tool reference

Canvas MCP overview

The one-paste setup

Claude (web & desktop)

Claude Code

Cursor

Codex

OpenClaw

Hermes Agent

Copilot (VS Code)

Anything else

Prompts to try

Getting good designs out of your agent

Troubleshooting

Next