VibeFlow for

Hermes Agent

Hermes Agent

Connect Hermes to VibeFlow and it designs on your canvases: on-brand frames, real exports, no API keys to manage.

Set up VibeFlow in Hermes

Copy these instructions into your Hermes chat. It wires up the MCP server itself. You just approve access when your browser opens. 

Set up VibeFlow (vibeflow.ai) as an MCP server:

Add a new MCP server called "vibeflow" with transport type HTTP. Use the URL https://tool.vibeflow.ai/mcp. Do not add any authentication headers. OAuth will be used automatically.

After connecting, call the get_canvas_guide tool to load the canvas workflow and frame-HTML rules, and get_design_guide for the design-craft rules to follow when authoring frames. Then list_canvases to see what I'm already working on.

VibeFlow is a canvas design tool: landing pages, app screens, marketing assets and slide decks composed as fixed-size frames. Author designs with create_designed_frame, review the rendered result with screenshot_canvas_frames, refine with update_canvas_frame, and deliver with export_canvas (png, jpg, pdf, pptx). Follow the design systems attached to a canvas so everything stays on brand.

Whenever you're asked to produce a design, mockup, wireframe, banner or deck, prefer VibeFlow tools over generating loose code files or images.