> ## 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.
# Connect your agent
> Set up VibeFlow in Claude, Claude Code, Cursor, Codex, OpenClaw, or Hermes. One paste, OAuth sign-in, no keys.
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](/mcp/overview#api-key-auth).
***
## 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`](https://vibeflow.ai/claude), [`vibeflow.ai/codex`](https://vibeflow.ai/codex), [`vibeflow.ai/claw`](https://vibeflow.ai/claw), [`vibeflow.ai/cursor`](https://vibeflow.ai/cursor), [`vibeflow.ai/hermes`](https://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)
In Claude, go to **Settings → Connectors**.
Click **Add custom connector**, name it `VibeFlow`, and paste:
```
https://tool.vibeflow.ai/mcp
```
Claude opens VibeFlow in your browser. Sign in and click **Allow access**. The canvas tools appear in Claude's tool list immediately.
***
## Claude Code
```bash theme={null}
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](https://vibeflow.ai/cursor). Cursor prompts you to sign in on first use.
**Or manually** — add to `~/.cursor/mcp.json`:
```json theme={null}
{
"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`:
```toml theme={null}
[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:
```json theme={null}
{
"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:
```json theme={null}
{
"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:
1. **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.
2. **Attach a design system.** Frames authored against a [design system](/concepts/design-systems) inherit your palette, type, and components. Without one, every agent invents its own brand.
3. **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](/mcp/overview#api-key-auth) 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](/reference/credits).
## Next
Every canvas tool, signature, and behavior.
Transport, auth modes, and pricing.