Skip to main content

​
Overview

VibeFlow transforms your AI-generated frontend mockups into fully functional applications by building visual backend workflows. Here are the key concepts you need to understand.

​
Workflows

A workflow is a visual representation of your backend logic. Think of it as a flowchart where each box (node) performs a specific task, and arrows show how data flows between them.

Visual Logic

Connect nodes visually instead of writing code

Real-time Testing

Test your workflows instantly as you build

​
Nodes

Nodes are the building blocks of workflows. Each node performs a specific function, like fetching data, sending emails, or making decisions.

​
Node Categories

Handle database operations and data management
  • Query Node: Fetch data from your database
  • Mutation Node: Create, update, or delete data
  • Collection Node: Work with arrays and collections
Connect with external services and APIs - Agent Node: AI-powered processing and decisions
Start workflows based on events - Frontend Element Node: Connect to UI components

​
Connections

Connections are the arrows between nodes that show how data flows through your workflow. Data from one node becomes input for the next node.

​
Variables & Data

VibeFlow automatically passes data between nodes, but you can also use variables to store and reuse data throughout your workflow.

​
Data Sources:

  • Frontend Input: Data from forms, user interactions
  • Database: Information stored in your database
  • API Responses: Data from external services
  • Node Output: Results from previous nodes in the workflow

​
Credits & Features

VibeFlow provides free credits to get you started with all features included.

​
Best Practices

Name Things Clearly

Use descriptive names for workflows and nodes

Test Early & Often

Test workflows as you build them

​
Next Steps

Now that you understand the core concepts, here’s what to do next:

Quick Start Guide

Build your first workflow in 5 minutes

Node Reference

Learn about all available nodes