# Core Concepts
Source: https://docs.vibeflow.ai/concepts

Understanding the fundamental concepts of VibeFlow

## Overview

VibeFlow lets you build powerful backend workflows visually or through AI. Connect nodes to create APIs, automations, and data pipelines, with a built-in database and optional frontend. 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.

<CardGroup>
  <Card title="Visual Logic" icon="sitemap">
    Connect nodes visually instead of writing code
  </Card>

  <Card title="Real-time Testing" icon="bolt">
    Test your workflows instantly as you build
  </Card>
</CardGroup>

***

## Nodes

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

### Node Categories

<AccordionGroup>
  <Accordion title="Data Nodes">
    Handle database operations and data management

    * **Query**: Fetch data from your database
    * **Mutation**: Create, update, or delete data
    * **Collection**: Work with arrays and collections
  </Accordion>

  <Accordion title="Trigger Nodes">
    Start workflows based on events

    * **Frontend Element (Start Node)**: Connect to UI components and kick off a workflow
    * **Webhook**: Receive incoming HTTP requests from external services
    * **Cron**: Run workflows on a schedule
  </Accordion>

  <Accordion title="Core Nodes">
    Essential building blocks for backend logic

    * **Return**: Send a response back to the caller
    * **HTTP Request**: Call external APIs and services
  </Accordion>

  <Accordion title="Flow Nodes">
    Control how data moves through your workflow

    * **If-Else**: Branch logic based on conditions
    * **Edit Fields**: Transform and reshape data between nodes
    * **Code**: Write custom logic when you need full control
    * **For Loop**: Iterate over lists of items
  </Accordion>

  <Accordion title="AI & Integrations">
    Add intelligence and connect to third-party services

    * **Agent (AI)**: AI-powered processing and decisions using LLMs
    * **MCP Tools**: Connect to Model Context Protocol tool servers
    * **Stripe**: Accept payments and manage subscriptions
    * **Email**: Send emails via Resend
  </Accordion>
</AccordionGroup>

***

## 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

<CardGroup>
  <Card title="Name Things Clearly" icon="tag">
    Use descriptive names for workflows and nodes
  </Card>

  <Card title="Test Early & Often" icon="flask">
    Test workflows as you build them
  </Card>
</CardGroup>

***

## Next Steps

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

<CardGroup>
  <Card title="Quick Start Guide" icon="play" href="/quickstart">
    Build your first workflow in 5 minutes
  </Card>

  <Card title="Node Reference" icon="puzzle" href="/nodes/query-node">
    Learn about all available nodes
  </Card>
</CardGroup>


# Accessing Variables
Source: https://docs.vibeflow.ai/concepts/named-references

Access data from any previous node in your workflow using the $"Node Label" syntax

## Overview

**Named References** allow you to access data from any previous node in your workflow by referencing the node's label. This powerful feature enables you to build complex multi-step workflows where nodes can pull data from multiple sources, not just the immediate previous node.

## Syntax Reference

| Syntax                             | Meaning                                   | Example Use Case                                           |
| ---------------------------------- | ----------------------------------------- | ---------------------------------------------------------- |
| `$"startNode"`                     | Initial flow input from trigger node      | Access original frontend form data or webhook request      |
| `$"startNode".body.<field>`        | Webhook request body (POST/PUT/PATCH)     | Access webhook JSON body: `$"startNode".body.email`        |
| `$"startNode".queryParams.<param>` | Webhook URL query parameters              | Access webhook query: `$"startNode".queryParams.id`        |
| `$"Node Label"`                    | Result from node with that specific label | Reference a specific query or mutation result              |
| `$"Node Label".fieldName`          | Property access on named result           | Extract specific field: `$"Get User".email`                |
| `__full_result__`                  | Previous node result (legacy)             | Fallback syntax, always references immediate previous node |

## Discovering Available Variables

Not sure which fields a node produces? **Run the flow first.** After a [flow activation](/features/flow-activation), every node displays its captured input and output with the exact field names and values. This is the fastest way to see what data is available to reference.

You can then **drag any variable** directly from the input or output panel into a field on another node. VibeFlow creates the correct reference for you automatically, so there is no need to type it out manually.

<img alt="Dragging a variable from the captured input panel into a mutation node field, automatically creating the correct variable reference" />

## Value Source Modes

When configuring a field on a node, you choose a **Value Source** that determines how the value is set:

| Mode      | Description                                           | Example                                        |
| --------- | ----------------------------------------------------- | ---------------------------------------------- |
| **Fixed** | A hardcoded constant value                            | `false`, `"active"`, `42`                      |
| **Args**  | A variable reference from another node                | `$"startNode".text`, `__full_result__._id`     |
| **Expr**  | A JavaScript expression combining multiple references | `$"Get Product".price * $"startNode".quantity` |

## Core Concepts

### 1. Label-Based References

Every node in your workflow has a unique label visible on the canvas. You can reference any previous node's output by using its label:

```json theme={null}
{
  "field": "userId",
  "mode": "From args",
  "value": "$\"Get User\"._id"
}
```

### 2. Start Node Reference

`$"startNode"` is a special reserved reference that always points to the initial input of your workflow:

* **For Frontend Element triggers**: `$"startNode".<field>` accesses form/component data
* **For Webhook triggers**: `$"startNode".body.<field>` accesses POST/PUT/PATCH body data
* **For Webhook triggers**: `$"startNode".queryParams.<param>` accesses URL query parameters

### 3. Property Access

Access nested properties using dot notation:

```json theme={null}
{
  "value": "$\"Query Node\".user.email"
}
```

```json theme={null}
{
  "value": "$\"AI Agent\".content.summary"
}
```

### 4. Backwards Compatibility

The legacy `__full_result__` syntax still works and always references the immediate previous node:

```json theme={null}
{
  "value": "__full_result__._id"
}
```

## Data Access by Trigger Type

### Frontend Element Triggers

When your workflow starts with a Frontend Element node, use `$"startNode"` to access form data:

```json theme={null}
// Frontend form with fields: { email: "user@example.com", name: "John" }
{
  "field": "email",
  "mode": "From args",
  "value": "$\"startNode\".email"
}
```

### Webhook Triggers

When your workflow starts with a Webhook node, use specific properties:

**Request Body (POST/PUT/PATCH):**

```json theme={null}
// POST /users with body: { "name": "John", "email": "john@example.com" }
{
  "field": "name",
  "mode": "From args",
  "value": "$\"startNode\".body.name"
}
```

**Query Parameters:**

```json theme={null}
// GET /users?status=active&limit=10
{
  "field": "status",
  "operator": "==",
  "value": "$\"startNode\".queryParams.status",
  "valueMode": "From args"
}
```

**URL Path Parameters:**

```json theme={null}
// PATCH /users/:userId
{
  "field": "_id",
  "operator": "==",
  "value": "$\"startNode\".params.userId",
  "valueMode": "From args"
}
```

**Request Headers:**

```json theme={null}
{
  "field": "requestId",
  "mode": "From args",
  "value": "$\"startNode\".headers[\"x-request-id\"]"
}
```

**HTTP Method:**

```json theme={null}
{
  "field": "$\"startNode\".method",
  "operator": "equals",
  "value": "POST"
}
```

### Cron Triggers

Cron jobs start with empty input (`{}`), so `$"startNode"` returns an empty object. Build your workflow using queries and fixed values instead.

## Common Use Cases

### 1. Referencing Initial Input Throughout Long Flows

Access the original user input even after multiple nodes:

```
Frontend → Query "Find User" → Query "Get Settings" → Mutation

Mutation fields:
{
  "field": "userName",
  "mode": "From args",
  "value": "$\"Find User\".name"           // From first Query
},
{
  "field": "maxLimit",
  "mode": "From args",
  "value": "$\"Get Settings\".limit"       // From second Query
},
{
  "field": "requestedBy",
  "mode": "From args",
  "value": "$\"startNode\".adminId"        // From original frontend input
}
```

### 2. Combining Results from Multiple Nodes

Use data from different previous nodes in the same operation:

```
Frontend → Query "Get Users" → Query "Get Config" → Mutation

Mutation fields:
{
  "field": "userCount",
  "mode": "Expression",
  "value": "$\"Get Users\".length"
},
{
  "field": "maxUsers",
  "mode": "From args",
  "value": "$\"Get Config\".maxUsers"
}
```

### 3. Patch Mutation with Named Reference

Update a record using its ID from a query and data from frontend:

```
Frontend → Query "Fetch User" → Mutation (patch)

Mutation configuration:
{
  "mutationType": "Patch",
  "pathIdMode": "From args",
  "pathIdValue": "$\"Fetch User\"._id",      // ID from Query
  "patchMutations": [
    {
      "field": "name",
      "mode": "From args",
      "value": "$\"startNode\".name"         // Name from frontend
    }
  ]
}
```

### 4. HTTP Request with Multi-Source Data

Build API requests using data from multiple previous nodes:

```
Frontend → Query "Get User" → HTTP Request

HTTP Request configuration:
{
  "method": "POST",
  "url": "https://api.example.com/sync",
  "urlParams": [
    {
      "name": "userId",
      "mode": "From args",
      "value": "$\"Get User\"._id"           // From Query
    }
  ],
  "queryParams": [
    {
      "name": "action",
      "mode": "From args",
      "value": "$\"startNode\".action"       // From frontend input
    }
  ]
}
```

### 5. Conditional Logic with Named References

Use data from specific nodes in If-Else conditions:

```
Frontend → Query "Count Items" → Query "Get Limits" → If-Else

If-Else condition:
{
  "field": "$\"Count Items\".count",
  "operator": "greater_than",
  "value": "$\"Get Limits\".limit",
  "valueMode": "From args"
}
```

### 6. For Loop with Named References

Loop over data from a specific node while accessing data from other nodes:

```
Frontend → Query "Get Users" → HTTP "Get Config" → For Loop → Mutation

For Loop configuration:
{
  "arraySource": "$\"Get Users\"",           // Loop over Query result
  "itemVariable": "user"
}

Mutation inside loop:
{
  "insertFields": [
    {
      "field": "userId",
      "mode": "From args",
      "value": "user._id"                    // Current loop item
    },
    {
      "field": "config",
      "mode": "From args",
      "value": "$\"Get Config\".defaultConfig"  // From HTTP result
    }
  ]
}
```

### 7. Expression Mode with Named References

Perform calculations and transformations using data from multiple nodes:

```json theme={null}
{
  "field": "fullName",
  "mode": "Expression",
  "value": "$\"startNode\".firstName + ' ' + $\"startNode\".lastName"
}
```

```json theme={null}
{
  "field": "slug",
  "mode": "Expression",
  "value": "$\"Fetch Data\".name.toLowerCase().replace(/[^a-z0-9]/g, '-')"
}
```

```json theme={null}
{
  "field": "totalPrice",
  "mode": "Expression",
  "value": "$\"Get Product\".price * $\"startNode\".quantity"
}
```

## Important Rules

### 1. JSON Formatting: Escape Quotes

When using named references in JSON configurations, you must escape the quotes:

**❌ WRONG, Invalid JSON:**

```json theme={null}
{
  "value": "$"startNode".email"
}
```

**✅ CORRECT, Valid JSON:**

```json theme={null}
{
  "value": "$\"startNode\".email"
}
```

### 2. Node Labels Must Be Unique

Each node must have a unique label in your workflow. Duplicate labels will cause unexpected behavior.

### 3. Reference Only Previous Nodes

You can reference any node that executed before the current node. At merge points where If-Else branches converge, you can reference data from whichever branch actually ran. Use `__full_result__` to access that data.

<Tip>
  **If-Else merge pattern:** When two If-Else branches merge into the same downstream node, use `__full_result__` to access data from whichever branch executed. Avoid patterns like `$("Branch A").field || $("Branch B").field` because the non-executed branch won't have data, so this won't work reliably.
</Tip>

### 4. Special Reserved Labels

* `startNode` is reserved for the initial trigger input
* Node labels are case-sensitive
* Labels are visible on the canvas UI

### 5. Fallback Behavior

If a named reference cannot be found, the system may fall back to `__full_result__` behavior for backwards compatibility.

## When to Use Named References

### Use `$"Node Label"` When:

* ✅ You need to access initial input later in a long chain
* ✅ You want to combine data from multiple previous nodes
* ✅ You need to reference a specific node that's not the immediate previous one
* ✅ You're building complex multi-step flows with data from different sources
* ✅ You want explicit and readable variable references

### Use `__full_result__` When:

* ✅ You only need data from the immediate previous node
* ✅ You want simple, straightforward data passing
* ✅ Backwards compatibility with existing flows is important
* ✅ The default behavior is sufficient

### Both Syntaxes Work Together:

You can mix both `$"Node Label"` and `__full_result__` in the same workflow. Use whichever makes your workflow clearer and more maintainable.

## Migration from **full\_result**

### Before (using **full\_result**):

```
Frontend → Query → Mutation

Mutation:
{
  "pathIdValue": "__full_result__._id",
  "patchMutations": [
    {
      "field": "status",
      "mode": "From args",
      "value": "__full_result__.status"
    }
  ]
}
```

### After (using named references):

```
Frontend → Query "Get Record" → Mutation

Mutation:
{
  "pathIdValue": "$\"Get Record\"._id",
  "patchMutations": [
    {
      "field": "status",
      "mode": "From args",
      "value": "$\"Get Record\".status"
    }
  ]
}
```

**Note:** Both work identically in this case. Use named references for clarity, `__full_result__` for simplicity.

## Complete Examples

### Example 1: User Profile Update

**Flow:** Frontend → Query "Find User" → Mutation "Update User"

**Query configuration:**

```json theme={null}
{
  "functionName": "findUserByEmail",
  "operators": [
    {
      "type": "Filter",
      "field": "email",
      "value": "$\"startNode\".email",
      "valueMode": "From args"
    }
  ]
}
```

**Mutation configuration:**

```json theme={null}
{
  "mutationType": "Patch",
  "pathIdMode": "From args",
  "pathIdValue": "$\"Find User\"._id",
  "patchMutations": [
    {
      "field": "name",
      "mode": "From args",
      "value": "$\"startNode\".name"
    },
    {
      "field": "phone",
      "mode": "From args",
      "value": "$\"startNode\".phone"
    }
  ]
}
```

### Example 2: Webhook with Multi-Node Data

**Flow:** Webhook (POST /create-order) → Query "Get Product" → Query "Get User" → Mutation "Create Order"

**Webhook receives:** `{ "productId": "123", "userId": "456", "quantity": 2 }`

**First Query (Get Product):**

```json theme={null}
{
  "operators": [
    {
      "type": "Filter",
      "field": "_id",
      "value": "$\"startNode\".body.productId",
      "valueMode": "From args"
    }
  ]
}
```

**Second Query (Get User):**

```json theme={null}
{
  "operators": [
    {
      "type": "Filter",
      "field": "_id",
      "value": "$\"startNode\".body.userId",
      "valueMode": "From args"
    }
  ]
}
```

**Mutation (Create Order):**

```json theme={null}
{
  "mutationType": "Insert",
  "insertFields": [
    {
      "field": "productName",
      "mode": "From args",
      "value": "$\"Get Product\".name"
    },
    {
      "field": "productPrice",
      "mode": "From args",
      "value": "$\"Get Product\".price"
    },
    {
      "field": "userName",
      "mode": "From args",
      "value": "$\"Get User\".name"
    },
    {
      "field": "userEmail",
      "mode": "From args",
      "value": "$\"Get User\".email"
    },
    {
      "field": "quantity",
      "mode": "From args",
      "value": "$\"startNode\".body.quantity"
    },
    {
      "field": "totalPrice",
      "mode": "Expression",
      "value": "$\"Get Product\".price * $\"startNode\".body.quantity"
    }
  ]
}
```

### Example 3: Complex Conditional with Multiple References

**Flow:** Frontend → Query "Count Items" → Query "Get Limits" → If-Else → \[branches] → Mutation

**If-Else condition:**

```json theme={null}
{
  "conditions": [
    {
      "field": "$\"Count Items\".count",
      "operator": "greater_than",
      "value": "$\"Get Limits\".limit",
      "valueMode": "From args"
    }
  ]
}
```

**True branch Mutation:**

```json theme={null}
{
  "insertFields": [
    {
      "field": "status",
      "mode": "Fixed",
      "value": "exceeded"
    },
    {
      "field": "actualCount",
      "mode": "From args",
      "value": "$\"Count Items\".count"
    },
    {
      "field": "maxLimit",
      "mode": "From args",
      "value": "$\"Get Limits\".limit"
    },
    {
      "field": "userId",
      "mode": "From args",
      "value": "$\"startNode\".userId"
    }
  ]
}
```

## Troubleshooting

### Common Errors

**Error: "Cannot read property of undefined"**

* Check that the node label exists and matches exactly (case-sensitive)
* Ensure the referenced node comes before the current node in the flow
* Verify the field path is correct

**Error: "Invalid JSON"**

* Ensure quotes are properly escaped: `$\"Node Label\"` not `$"Node Label"`
* Check for missing commas or brackets in your JSON

**Getting empty or null values:**

* Verify the previous node actually returned data
* Check that the field name is spelled correctly
* Ensure you're using the correct syntax for your trigger type (e.g., `.body` for webhooks)

### Best Practices

1. **Use descriptive node labels:** "Get User" is better than "Query 1"
2. **Be consistent:** Choose named references OR `__full_result__` for simple chains
3. **Test incrementally:** Add one reference at a time and verify it works
4. **Document complex flows:** Add notes explaining which node provides which data
5. **Escape quotes properly:** Always use `$\"Node Label\"` in JSON configurations

## Related Concepts

<CardGroup>
  <Card title="Frontend Element Node" icon="window" href="/nodes/frontend-element-node">
    Trigger workflows with user input
  </Card>

  <Card title="Webhook Node" icon="webhook" href="/nodes/webhook-node">
    Trigger workflows with HTTP requests
  </Card>

  <Card title="Query Node" icon="search" href="/nodes/query-node">
    Fetch data to use in references
  </Card>

  <Card title="Mutation Node" icon="edit" href="/nodes/mutation-node">
    Use references to create/update data
  </Card>
</CardGroup>


# Best Practices
Source: https://docs.vibeflow.ai/design-systems/best-practices

Tips for organizing, writing guidelines, and building component libraries

## Organizing Design Systems

### By Project Type

* Create separate systems for different app categories
* Example: "E-commerce UI", "Admin Dashboard", "Marketing Pages"

### By Brand

* One system per brand or client
* Example: "Acme Corp Design System", "Client XYZ UI Kit"

### By Platform

* Separate systems for web, mobile, or desktop
* Example: "iOS Components", "Web App UI", "Desktop Toolkit"

## Writing Effective Guidelines

### Be Specific

* Don't just say "use primary color"
* Specify exact hex codes and usage contexts

### Include Examples

```markdown theme={null}
## Button Styles

### Primary Button
- Background: #0066FF
- Text: #FFFFFF
- Padding: 12px 24px
- Border Radius: 8px
- Use for primary actions like "Sign Up", "Continue", "Submit"

### Secondary Button
- Background: transparent
- Text: #0066FF
- Border: 1px solid #0066FF
- Use for secondary actions like "Cancel", "Go Back"
```

### Document "Why" Not Just "What"

```markdown theme={null}
## Spacing

We use an 8px grid system because:
- Creates visual rhythm and harmony
- Easier for developers to remember
- Scales consistently across screen sizes
- Aligns with major design tools (Figma, Sketch)
```

## Building Your Component Library

### Start Small

* Begin with 5-10 core components
* Buttons, inputs, cards, navigation
* Expand as needed

### Focus on Reusability

* Make components flexible with props
* Avoid hardcoded values
* Use composition patterns

### Document Props

```typescript theme={null}
interface ButtonProps {
  variant: 'primary' | 'secondary' | 'danger';
  size: 'sm' | 'md' | 'lg';
  loading?: boolean;
  disabled?: boolean;
  children: React.ReactNode;
}
```

### Test in Context

* Use components in real projects
* Iterate based on actual usage
* Collect feedback from team members


# Components Tab
Source: https://docs.vibeflow.ai/design-systems/components

Build your visual library of reusable UI components

The Components tab is your visual library of reusable UI components.

## Adding Components

Click **"Add Component"** to see import options:

### 1. From Screenshot

Convert UI screenshots into JSX components using AI.

**How it works:**

1. Click **"From Screenshot"**
2. Upload an image (PNG, JPG, JPEG, WebP)
3. The AI analyzes the visual design
4. Review and edit the generated JSX code
5. Add component name, description, and props
6. Save to your design system

**Best practices:**

* Use high-quality, clear screenshots
* Crop to show only the component (not full pages)
* Ensure good contrast and visibility
* Include both light and dark mode if applicable

### 2. From Figma

Import components directly from Figma designs using VibeFigma integration.

**Requirements:**

* Figma integration must be configured in Settings
* Access to the Figma file
* Valid Figma node URL

**How it works:**

1. Click **"From Figma"**
2. Paste the Figma node URL
3. VibeFigma converts the design to React code
4. Review and customize the component
5. Save to your library

### 3. Vibe Designer

Generate components from natural language prompts using AI.

**How it works:**

1. Click **"Vibe Designer"**
2. Describe the component you want (e.g., "A pricing card with three tiers and a popular badge")
3. The AI generates JSX code based on your design guidelines
4. Review and refine the output
5. Save to your design system

**Tips:**

* Be specific about layout, colors, and interactions
* Reference your design guidelines for consistency
* Iterate by regenerating with more details

### 4. From Website (Clipper)

Clip components directly from any live website using the VibeFlow Clipper browser extension.

**Requirements:**

* Google Chrome browser
* [VibeFlow Clipper extension](https://chromewebstore.google.com/detail/vibeflow-clipper/cifpbjfodcpokoghghagledfleocmben) installed

**How it works:**

1. Click **"From Website"**
2. The modal checks that the Clipper extension is connected
3. Click **"Start Clipping Session"**, which opens a new tab
4. Navigate to any website, click the Clipper extension icon, and select an element
5. The clipped component is converted to JSX and sent back for review
6. Save to your design system

### 5. Manual Input

Paste or write JSX code directly.

**When to use:**

* You have existing component code
* Migrating from another system
* Custom, hand-crafted components

**How it works:**

1. Click **"Manual Input"**
2. Paste your JSX code
3. Add component metadata (name, description, props)
4. Optionally add prop definitions for documentation
5. Save to your library


# Export Options
Source: https://docs.vibeflow.ai/design-systems/export

Export your design system as Claude Code skills or JSON

## Claude Code Skill (.zip)

Export your design system as a Claude Code skill for use with the Claude Code CLI.

**What's included:**

* All component JSX code
* Design guidelines in markdown
* Skill configuration files
* README with usage instructions

**Installation:**

1. Click **"Export .zip"** under Claude Code Skill
2. Download the `.zip` file
3. Extract to your project's `.claude/skills/` directory
4. Claude Code will automatically detect the skill

**Example usage:**

```bash theme={null}
# In your project directory
claude "Create a user dashboard using the Company Dashboard design system"
```

**What Claude Code does with your design system:**

* Reads your design guidelines
* References your component library
* Generates new screens matching your design language
* Maintains consistency across the application

## JSON Manifest

Export complete design system data in JSON format.

**What's included:**

```json theme={null}
{
  "name": "Stripe UI",
  "description": "Stripe-inspired design system",
  "tags": ["SaaS", "Minimal", "Professional"],
  "guidelines": "# Design Principles...",
  "components": [
    {
      "name": "PricingCard",
      "jsxCode": "<div>...</div>",
      "description": "Pricing tier card component",
      "props": {...}
    }
  ]
}
```

**Use cases:**

* Backup and versioning
* Sharing with external tools
* Custom integrations
* Migration to other platforms


# FAQ & Examples
Source: https://docs.vibeflow.ai/design-systems/faq

Frequently asked questions and example design system structure

## Frequently Asked Questions

**Q: How many design systems can I create?**

A: There's no limit to how many design systems you can create. AI-generated design systems use credits from your account balance.

**Q: Can I share design systems with my team?**

A: Currently design systems are private. Team sharing is coming soon.

**Q: Do I need to use all three tabs?**

A: No, but we recommend it. Guidelines help Vibe Agent generate better UIs, and components provide reusable building blocks.

**Q: Can I import components from other design systems?**

A: Not directly yet, but you can export as JSON, manually copy components, and import to another system.

**Q: How do I use a design system in my project?**

A: Reference it when generating features with Vibe Agent: "Use my Stripe UI design system to create a pricing page"

**Q: What happens if I delete a design system?**

A: It's permanently deleted along with all components and guidelines. This cannot be undone.

**Q: Can I edit guidelines while generating components?**

A: Yes, guidelines are available in real-time. Changes apply immediately to new generations.

***

## Example Design System Structure

**Name:** Modern SaaS UI

**Description:** Clean, minimal design system for B2B SaaS applications with dark mode support.

**Tags:** SaaS, Dark Mode, Minimal, Professional

**Guidelines:**

```markdown theme={null}
# Modern SaaS Design System

## Principles
- Clarity over cleverness
- Performance first
- Accessibility by default

## Colors
### Light Mode
- Primary: #0066FF
- Background: #FFFFFF
- Text: #1F2937

### Dark Mode
- Primary: #3B82F6
- Background: #0B0D0E
- Text: #F9FAFB

## Components
All components support both light and dark modes.
Use semantic color tokens, not hardcoded values.
```

**Components:**

* Button (Primary, Secondary, Danger variants)
* Input Field (Text, Email, Password)
* Card (Basic, Elevated, Outlined)
* Navigation Bar
* Pricing Table
* Feature Grid


# Getting Started
Source: https://docs.vibeflow.ai/design-systems/getting-started

Create and manage your first design system in VibeFlow

## Accessing Design Systems

1. Click **Design Systems** in the left sidebar navigation
2. You'll see a grid view of all your design systems

## Creating Your First Design System

There are three ways to create a design system:

### Generate with AI

The fastest way to get started. Use the prompt bar at the top of the Design Systems page to describe your visual style and let AI generate a complete design system for you.

1. Type a description into the prompt bar (e.g., "Minimalist fintech app with neon green accents")
2. Click **"Generate"**
3. AI will create a design system with a name, color palette, typography scale, and component guidelines
4. You'll be taken to the detail page to review and customize the result

### Start from a Community Template

Browse pre-built design systems shared by the community and use them as a starting point.

1. Switch to the **"Community Library"** tab
2. Browse available templates
3. Click **"Use Template"** on one you like
4. A copy is added to your library, ready to customize

### Create Blank

Start from scratch with an empty design system.

1. Click the **"Create Blank"** button in the top right
2. Enter a **Name** (e.g., "Material Design", "Stripe UI", "iOS HIG")
3. Add a **Description** explaining what the design system is for
4. Click **"Create"**

You'll be taken to the design system detail page where you can start adding guidelines and components.

## Managing Design Systems

### Design System Card

Each design system displays:

* **Thumbnail**: Visual preview of the design system
* **Name & Description**: Quick identification
* **Tags**: Categorization labels (e.g., "SaaS", "Minimal", "Dark Mode")
* **Last Updated**: When the system was last modified
* **Actions Menu**: Edit or delete the design system

### Searching & Filtering

Use the search bar to filter design systems by:

* Name
* Description
* Tags

### Deleting a Design System

1. Click the **three-dot menu** on a design system card
2. Select **"Delete"**
3. Confirm the deletion

**Warning**: This action cannot be undone and will permanently delete all components and guidelines.


# Guidelines Tab
Source: https://docs.vibeflow.ai/design-systems/guidelines

Document your design principles, patterns, and standards using Markdown

The Guidelines tab is where you document your design principles, patterns, and standards using Markdown.

## What to Include

### Design Principles

```markdown theme={null}
## Principles
- **Clarity**: Components should be self-explanatory
- **Consistency**: Use the same patterns across the app
- **Efficiency**: Optimize for performance and reuse
```

### Color Palette

```markdown theme={null}
## Colors
- Primary: #0066FF
- Secondary: #6B7280
- Success: #10B981
- Error: #EF4444
- Background: #FFFFFF / #0B0D0E
- Text: #1F2937 / #F9FAFB
```

### Typography

```markdown theme={null}
## Typography
- Font Family: Inter, system-ui
- Font Scales: 12px, 14px, 16px, 18px, 24px, 32px, 48px
- Line Heights: 1.2 (headings), 1.5 (body)
- Font Weights: 400 (regular), 500 (medium), 600 (semibold), 700 (bold)
```

### Spacing & Layout

```markdown theme={null}
## Spacing
- Base Unit: 4px
- Scale: 4, 8, 12, 16, 24, 32, 48, 64px
- Card Padding: 16px
- Button Padding: 12px 24px
```

### Component Usage

```markdown theme={null}
## Component Guidelines
### Buttons
- Always provide hover and active states
- Use loading spinners for async actions
- Disabled state should have 50% opacity

### Cards
- Default elevation: shadow-lg
- Border radius: 12px
- Padding: 16px
```

## How Vibe Agent Uses Guidelines

When you reference a design system in your project, **Vibe Agent reads these guidelines** to:

* Generate UI components that match your design language
* Apply consistent colors, typography, and spacing
* Follow your established patterns and principles
* Maintain visual coherence across screens


# Overview
Source: https://docs.vibeflow.ai/design-systems/overview

Learn what Design Systems are and why they're essential for maintaining visual consistency

Design Systems in VibeFlow allow you to create, organize, and apply curated component libraries to your projects. Think of them as your personal UI component collections that maintain visual consistency across all your applications.

## What are Design Systems?

A Design System is a collection of reusable UI components along with design guidelines that ensure consistency across your applications. In VibeFlow, Design Systems include:

* **Design Guidelines**: Markdown-based documentation covering principles, colors, typography, and component usage patterns
* **Component Library**: A curated collection of React components with JSX code
* **Metadata**: Tags, descriptions, and organizational information

## Why Use Design Systems?

* **Consistency**: Maintain a unified look and feel across all your projects
* **Efficiency**: Reuse components instead of rebuilding them from scratch
* **Collaboration**: Share design patterns and components with your team
* **Quality**: Leverage tested, production-ready components
* **AI Integration**: Vibe Agent uses your design guidelines to generate visually consistent UIs


# Credits & Billing
Source: https://docs.vibeflow.ai/features/credits

Understand how credits work in VibeFlow and how to manage your usage

Credits are the currency that powers AI-driven actions in VibeFlow. Every time you generate a page, run an AI agent, or compile a flow, credits are consumed.

## Plans Overview

VibeFlow offers three plan levels:

* **Free Plan** -- 5 daily credits that reset at midnight UTC. Great for exploring the platform.
* **Pro Plan** -- A monthly credit allowance you choose at checkout (from 100 to 10,000 credits/month), plus unlimited graph compiles, code export, and priority support. Cancel anytime.
* **Enterprise** -- Custom plans for teams and organizations with dedicated support, centralized billing, and on-premise deployment options. [Contact us](mailto:founders@vibeflow.ai?subject=Enterprise%20Plan%20Inquiry) or [book a call](https://vibeflow.cal.com/founders/15min) to learn more.

## Checking Your Balance

Your current credit balance is always visible in **Settings > Plan Overview**. The balance card shows:

* **Total credits remaining** across all sources
* A **segmented progress bar** that breaks down your balance by source -- hover over each segment for details
* A **View Details** button that opens your full transaction history

## Credit Sources and Priority

Credits can come from multiple sources. When you perform an action, VibeFlow consumes them in this order:

1. **Daily free credits** -- The 5 credits every account receives, reset at midnight UTC
2. **Monthly subscription credits** -- Credits included with your Pro plan, renewed each billing cycle
3. **Rollover / wallet credits** -- Credits earned through referrals or promotional codes

This priority system ensures your free and renewable credits are used before one-time credits.

## Getting More Credits

### Upgrade or Change Your Pro Plan

From **Settings > Plan Overview**, select a credit tier and click **Upgrade to Premium** (or **Upgrade Current Plan** if you are already on Pro). You will be redirected to Stripe to review and confirm the change.

To downgrade, click **Manage** on your current plan card. Downgrades take effect at the start of your next billing cycle. You can cancel a scheduled downgrade at any time before it takes effect.

### Refer a Friend

Go to **Settings > Get Free Credits** to find your personal referral link. Share it and earn credits:

1. **Share** your invite link with a friend.
2. **They sign up** and receive bonus credits.
3. **You earn credits** once they publish their first website.

The **Referral Stats** section tracks your total referrals, sign-ups, publishes, and total credits earned.

### Redeem a Promotional Code

In **Settings > Get Free Credits**, enter a promotional code in the **Redeem Code** card and click **Redeem Code**. Codes are not case-sensitive and can only be used once per account.

## Transaction History

Click **View Details** on the credit balance card to open the **Transaction History** modal. Here you can see every credit addition and deduction on your account, filterable by type:

* **Codes** -- Credits from redeemed promotional codes
* **Referrals** -- Credits earned through referrals
* **Subscription** -- Monthly credits from your Pro plan
* **Used** -- Credits consumed by AI actions

Each entry shows the date, description, amount, and your balance after the transaction.

## Frequently Asked Questions

<AccordionGroup>
  <Accordion title="When do my daily free credits reset?">
    Daily credits reset at midnight UTC every day. Any unused daily credits do not roll over.
  </Accordion>

  <Accordion title="What happens to my subscription credits if I don't use them all?">
    Unused subscription credits do not carry over to the next billing cycle. Only wallet credits (from referrals and promotional codes) persist in your balance.
  </Accordion>

  <Accordion title="Can I upgrade or downgrade my plan mid-cycle?">
    Yes. Upgrades take effect immediately -- you will be redirected to Stripe to confirm the change. Downgrades are scheduled for the start of your next billing cycle so you keep access to your current tier until then.
  </Accordion>

  <Accordion title="How do I cancel my subscription?">
    Click **Manage** on your plan card in Settings, then follow the prompts to open the Stripe billing portal where you can cancel. Your Pro benefits remain active until the end of the current billing period.
  </Accordion>

  <Accordion title="Do referral credits expire?">
    No. Credits earned through referrals are added to your wallet and remain available until you use them.
  </Accordion>
</AccordionGroup>


# Custom Domains
Source: https://docs.vibeflow.ai/features/custom-domains

Learn how to connect your own custom domain to VibeFlow

Connect your VibeFlow applications to your own custom domain for a professional and branded user experience.

## Why Use Custom Domains?

Using a custom domain with VibeFlow offers several benefits:

* **Strengthen your brand identity:** Use a domain that reflects your business name
* **Build user trust:** A familiar web address increases credibility and confidence
* **Seamless integration:** Make VibeFlow part of your existing web presence
* **Professional appearance:** Create a polished, personalized experience for your users

## Prerequisites

Before setting up a custom domain, make sure you have:

* An active VibeFlow paid plan
* Access to your domain's DNS settings (available through your domain registrar like GoDaddy, Namecheap, or Google Domains)

## How to Set Up a Custom Domain

Custom domains are configured at the project level. Follow these simple steps to connect your domain:

### Step 1: Navigate to Your Project Settings

* Open your VibeFlow project
* Click on the **Settings** tab
* Select the **Custom Domains** section

### Step 2: Enter Your Domain

* Enter your full domain name (e.g., `mycoolproject.com` or `app.mycoolproject.com`)
* **Note:** If you want to use `www` in your domain (like `www.mycoolproject.com`), you must enter it manually

### Step 3: Copy Your DNS Records

After entering your domain, VibeFlow will generate DNS records for you:

* **TXT record:** Used to verify that you own the domain
* **A records:** Points your domain to VibeFlow's servers (we use Freestyle as our DNS provider)

Copy both records-you'll need them in the next step.

### Step 4: Add Records to Your DNS Settings

* Log in to your domain registrar's website (where you purchased your domain)
* Find the **DNS Management** or **DNS Settings** section
* Add the TXT and A records you copied from VibeFlow
* Save your changes

### Step 5: Wait for DNS Propagation

* DNS changes can take **up to 48 hours** to fully propagate across the internet
* Most changes take effect within a few hours
* You can check the status in your VibeFlow project settings

## Frequently Asked Questions

<AccordionGroup>
  <Accordion title="How long does it take for my custom domain to work?">
    DNS propagation typically takes anywhere from a few minutes to 48 hours. Most domains are active within 2-6 hours.
  </Accordion>

  <Accordion title="Can I use a subdomain instead of my main domain?">
    Yes! You can use any subdomain (like `app.yourdomain.com` or `portal.yourdomain.com`). Just enter the full subdomain when setting up your custom domain.
  </Accordion>

  <Accordion title="Do I need to configure SSL/HTTPS certificates?">
    No. VibeFlow automatically handles SSL certificate provisioning and renewal for your custom domain. Your site will be secured with HTTPS.
  </Accordion>

  <Accordion title="⚠️ Important: Do I need to disable Cloudflare Proxy?">
    **Yes! If you use Cloudflare for your domain, you must disable the proxy (orange cloud) for your VibeFlow DNS records.**

    When the Cloudflare proxy is enabled, it can interfere with DNS verification and cause your custom domain setup to fail.

    To fix this:

    1. Log in to your Cloudflare dashboard
    2. Find the DNS records you added for VibeFlow
    3. Click the orange cloud icon to turn it **gray** (DNS only)
    4. Save your changes
  </Accordion>

  <Accordion title="What if my custom domain isn't working?">
    If your domain isn't connecting after 48 hours:

    * Double-check that the TXT and A records were entered correctly
    * Ensure there are no typos in the DNS records
    * Verify that Cloudflare proxy is **disabled** if you use Cloudflare
    * Contact VibeFlow support for assistance
  </Accordion>

  <Accordion title="Can I use multiple custom domains for one project?">
    Yes! VibeFlow allows you to add multiple custom domains to a single project. Just repeat the setup process for each domain you want to connect.
  </Accordion>

  <Accordion title="Can I use an apex domain (without www)?">
    Yes! You can use either an apex domain (like `yourdomain.com`) or a subdomain (like `www.yourdomain.com` or `app.yourdomain.com`). Just make sure to enter the exact domain format you want to use.
  </Accordion>

  <Accordion title="What happens to my old VibeFlow URL?">
    Your original VibeFlow URL (e.g., `yourproject.vibeflow.build`) will continue to work even after you set up a custom domain. Both URLs will point to your project.
  </Accordion>
</AccordionGroup>


# Flow Activation
Source: https://docs.vibeflow.ai/features/flow-activation

Test and debug your workflows directly on the canvas with real-time execution feedback

Flow Activation lets you run your workflows directly from the canvas to verify they work as expected before deploying. When you activate a flow, VibeFlow executes each node in sequence, captures inputs and outputs at every step, and provides real-time visual feedback so you can debug issues instantly.

## How It Works

Every flow starts with an entry node (such as a **Start Node**, **Webhook**, or **Cron**) and connects through action nodes. Flow Activation runs this entire pipeline with test data so you can see exactly what happens at each step.

<img alt="Flow canvas showing a Start Node connected to a Create Todo mutation node, connected to a Return node, with a play button to test the flow" />

## Running a Flow

<Steps>
  <Step title="Click the play button">
    Click the **play button** on the Start Node of your flow. This opens the Test Flow dialog where you can configure the input data for your test run.
  </Step>

  <Step title="Configure test data">
    Choose between **Use Test Data** (auto-generated mock data based on your node configuration) or **Custom JSON Input** to provide your own payload. VibeFlow analyzes downstream nodes and generates realistic mock values. For example, a `text` field gets `"Mock text"` as a default value.

    <img alt="Test flow dialog showing Input Mode toggle between Use Test Data and Custom JSON Input, with auto-generated test data preview showing a JSON object with a text field" />
  </Step>

  <Step title="Observe execution">
    Once you click **Run Test**, VibeFlow executes each node in topological order. Nodes light up as they execute, transitioning from idle to executing to completed (or error). Edges animate to show data flowing between nodes.
  </Step>

  <Step title="Inspect captured data">
    After execution, click any node to see its **Captured Input** and **Captured Output**. This shows the exact data that flowed in and out of each node, along with timestamps.
  </Step>
</Steps>

## Captured Input & Output

Every node in an activated flow captures the data it received and the data it produced. This makes it straightforward to trace how data transforms as it moves through your workflow.

### Captured Input

The input panel shows the exact payload a node received from its upstream connection. In this example, the **Create Todo** mutation node receives the `text` field from the Start Node input.

<img alt="Captured Input panel for the Create Todo mutation node, showing a Mutation Insert with the JSON input containing a text field with Mock text value" />

### Captured Output

The output panel shows what a node returned after execution. For a mutation insert, this includes the newly created document with its generated `_id` and `id` fields alongside the input data.

<img alt="Captured Output panel for the Create Todo mutation node, showing the resulting document with _id, id, and text fields after the insert mutation" />

### Discovering Available Variables

Captured data is also the easiest way to figure out which variables you can use when wiring up nodes. After running a flow, you can see every field a node produces and **drag variables** directly from the captured panels into fields on other nodes.

For a full guide on variable references and how to pass data between nodes, see [Named References](/concepts/named-references).

## Auto-Generated Test Data

When you select **Use Test Data**, VibeFlow automatically generates mock values based on your node configuration:

| Field Pattern                          | Generated Value                   |
| -------------------------------------- | --------------------------------- |
| `email`                                | `test@example.com`                |
| `firstName`                            | `John`                            |
| `lastName`                             | `Doe`                             |
| `name`                                 | `Mock Name`                       |
| `username`                             | `johndoe123`                      |
| `phone`                                | `+1234567890`                     |
| `address`                              | `123 Mock Street`                 |
| `url`, `link`                          | `https://example.com`             |
| `image`, `avatar`                      | `https://via.placeholder.com/150` |
| `text`, `description`                  | `Mock text`                       |
| `title`, `subject`                     | `Mock Title`                      |
| `price`, `cost`                        | `99.99`                           |
| `status`                               | `active`                          |
| `tags`, `items`                        | `["item1", "item2", "item3"]`     |
| Date fields (`date`, `createdAt`)      | Current ISO timestamp             |
| Boolean fields (`active`, `completed`) | `true` / `false`                  |
| ID fields                              | `mock_<field>_<random>`           |

This means you can test flows immediately without manually crafting input payloads. For more control, switch to **Custom JSON Input** and provide your own JSON.

## Authentication Toggle

Nodes that support authentication display an **Auth** toggle at the bottom. When enabled, the node requires a valid user session to execute. During flow activation, authentication is automatically simulated. VibeFlow stubs auth calls with a simulated user identity, so auth-enabled nodes execute normally without requiring a real login session.

## Error Handling

If a node fails during activation, it shows an error state with the error message. Downstream nodes are automatically skipped when an upstream node fails, so you can quickly identify the root cause of issues without wading through cascading errors.

## Next Steps

<CardGroup>
  <Card title="Mutation Node" icon="pen" href="/nodes/mutation-node">
    Learn how to configure database mutations in your flows
  </Card>

  <Card title="Return Node" icon="rotate-left" href="/nodes/return-node">
    Configure how your flow returns data to the caller
  </Card>

  <Card title="Named References" icon="at" href="/concepts/named-references">
    Reference data from any upstream node using named references
  </Card>

  <Card title="Quick Start" icon="play" href="/quickstart">
    Build and test your first flow from scratch
  </Card>
</CardGroup>


# GitHub Integration
Source: https://docs.vibeflow.ai/features/github-integration

Auto-sync your VibeFlow projects to GitHub repositories

Keep your VibeFlow projects backed up and version-controlled by connecting them to GitHub. Push changes to a repo, pull updates made externally, and optionally auto-push after every agent run.

## Prerequisites

* A VibeFlow paid plan (GitHub sync is a paid feature)
* A GitHub account

## Connecting Your GitHub Account

Before you can sync projects, you need to link your GitHub account to VibeFlow.

<Steps>
  <Step title="Open GitHub settings">
    Go to **Settings > GitHub**. You'll see a **Version Control** card showing your current connection status.
  </Step>

  <Step title="Connect your account">
    Click **Connect**. You'll be redirected to GitHub to authorize VibeFlow. Once complete, the card shows **Active** along with your GitHub username.
  </Step>
</Steps>

To disconnect your account later, click **Disconnect** on the same card.

## Importing a Repository

You can import an existing GitHub repository into VibeFlow as a new project.

<Steps>
  <Step title="Go to Import">
    From the landing page, click **Connect GitHub Repository**, or navigate directly to the import page. If your account isn't linked yet, you'll be prompted to connect first.
  </Step>

  <Step title="Select a repository">
    VibeFlow lists your repositories and checks each one for compatibility (React, Vite, TypeScript). Compatible repos are highlighted. Use the search bar to filter by name.
  </Step>

  <Step title="Set up and open">
    Click a repository to import it. VibeFlow provisions a Convex backend, fetches your files, and opens the project in the editor.
  </Step>
</Steps>

## Syncing a Project to GitHub

Once your GitHub account is connected, you can link any open project to a repository directly from the editor toolbar.

### Connecting a Project

<Steps>
  <Step title="Click the GitHub icon">
    In the editor top bar, click the **GitHub icon**. A **Connect GitHub Repository** dialog opens.
  </Step>

  <Step title="Choose a repository name">
    Enter a name for the new repo (or click the dice icon to generate a random one). The repo is created as **private** under your GitHub account.
  </Step>

  <Step title="Set the branch">
    The default branch is `main`. Change it if you prefer a different branch name.
  </Step>

  <Step title="Create & Connect">
    Click **Create & Connect**. VibeFlow creates the repository and automatically pushes your current project files as the initial commit.
  </Step>
</Steps>

### Pushing Changes

1. Click the **GitHub icon** in the top bar to open the sync popover.
2. Click **Push Latest Changes**.
3. Enter a commit message (a timestamped message is pre-filled) and click **Push**.

If nothing has changed since your last push, VibeFlow lets you know the repo is already up to date.

### Pulling Changes

If commits are made outside VibeFlow (for example, by editing files directly on GitHub or from another tool), a blue dot appears on the GitHub icon to indicate new changes are available.

1. Open the sync popover.
2. Click **Pull Latest Changes**.

VibeFlow fetches the latest files and updates your project in the editor.

### Auto-Push After Agent Runs

When **Auto-push after agent** is enabled (it is by default), VibeFlow automatically pushes your project to GitHub every time the Vibe Agent finishes a task. You can toggle this setting on or off in the sync popover.

### Disconnecting a Project

To unlink a project from its GitHub repo, open the sync popover and click **Disconnect**. This removes the link but does not delete the repository on GitHub.

## Frequently Asked Questions

<AccordionGroup>
  <Accordion title="Does VibeFlow create public or private repositories?">
    All repositories created through VibeFlow are **private** by default.
  </Accordion>

  <Accordion title="Can I connect to an existing repository instead of creating a new one?">
    To work with an existing repo, use the **Import from GitHub** flow on the landing page. The in-editor sync feature creates a new repo for each project.
  </Accordion>

  <Accordion title="What happens if I disconnect a project from GitHub?">
    The link between VibeFlow and the repo is removed. Your code stays in both places; nothing is deleted on either side.
  </Accordion>

  <Accordion title="Do I need a paid plan?">
    Yes. GitHub sync is available on paid plans. Free users see a prompt to subscribe when they click the GitHub icon.
  </Accordion>
</AccordionGroup>


# VibeFlow MCP
Source: https://docs.vibeflow.ai/features/mcp

Connect any MCP-compatible AI client to VibeFlow and build projects directly from your editor.

The VibeFlow MCP (Model Context Protocol) server lets any MCP-compatible AI client talk directly to VibeFlow. You can scaffold projects, manage design systems, and open projects for editing, all without leaving your editor.

***

## Available tools

### Project tools

| Tool                       | Description                                                                                                                                                    |
| -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `initiate_project`         | Builds a project from a plain-text prompt. Handles workflows, database, frontend, and auth when needed. Only `prompt` is required; VibeFlow handles the build. |
| `get_project`              | Polls the build status of a project using its `projectId`. Returns one of: `building` · `ready` · `failed`                                                     |
| `open_project_for_editing` | Returns a direct editor URL to open an existing project in VibeFlow for review or editing.                                                                     |
| `export_flow_json`         | Exports a project's flow graph (nodes and edges) as JSON.                                                                                                      |

### Design System tools

| Tool                             | Description                                                                                                            |
| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| `get_all_design_systems`         | Lists all design systems in your VibeFlow account. Use this before creating a new one or referencing one in a project. |
| `create_design_system`           | Creates a new design system with the specified name, description, and guidelines.                                      |
| `update_design_system`           | Updates an existing design system's name, description, or guidelines.                                                  |
| `add_component_to_design_system` | Adds a reusable component (button, card, form, nav, etc.) to an existing design system.                                |

***

## Typical workflow

```
1. initiate_project  →  kick off a build from a prompt
2. get_project       →  poll until status is "ready"
3. open_project_for_editing  →  get the editor URL to review or modify
```

For design-system-first projects:

```
1. get_all_design_systems          →  pick or confirm a design system
2. create_design_system (if none)  →  generate one from your codebase
3. initiate_project                →  build using the design system
```

***

## Getting your API key

1. Go to **Settings → MCP** in VibeFlow.
2. Click **Create API Key** to generate your key.
3. Copy the **MCP URL** and **API Key**. You'll need both when connecting.

***

## Transport

| Field     | Value                          |
| --------- | ------------------------------ |
| Transport | Streamable HTTP                |
| MCP URL   | `https://tool.vibeflow.ai/mcp` |

Authentication is passed as a bearer token in the `Authorization` header:

```
Authorization: Bearer YOUR_API_KEY
```

Any MCP client that supports HTTP transport with custom headers can connect to VibeFlow.

***

## Connecting your client

### Claude Code

Run the following command in your terminal:

```bash theme={null}
claude mcp add --transport http \
  vibeflow https://tool.vibeflow.ai/mcp \
  --header "Authorization: Bearer YOUR_API_KEY"
```

Replace `YOUR_API_KEY` with the key from your Settings page.

***

### Cursor

Cursor uses `mcp-remote` as a bridge for HTTP-based MCP servers. Add the following to your Cursor MCP config (`~/.cursor/mcp.json` or the MCP settings panel):

```json theme={null}
{
  "vibeflow": {
    "command": "npx",
    "args": [
      "-y",
      "mcp-remote",
      "https://tool.vibeflow.ai/mcp"
    ],
    "env": {
      "HTTP_AUTHORIZATION": "Bearer YOUR_API_KEY"
    }
  }
}
```

Replace `YOUR_API_KEY` with the key from your Settings page.

***

### Other MCP clients

For any other client that supports Streamable HTTP transport, configure it with:

* **MCP URL:** `https://tool.vibeflow.ai/mcp`
* **Auth header:** `Authorization: Bearer YOUR_API_KEY`

Refer to your client's documentation for how to set custom HTTP headers on MCP connections.

***

## Regenerating your API key

Go to **Settings → MCP** and click the regenerate icon next to your API Key. Your old key is immediately invalidated. Update it in your client config after regenerating.


# Organizations
Source: https://docs.vibeflow.ai/features/organizations

Collaborate on VibeFlow projects as a team with shared billing and credit allocations

Organizations let you collaborate on VibeFlow projects as a team. Each organization has a custom Enterprise plan tailored to the team's needs, with dedicated credit allocations for every builder.

## Getting Access

Organizations are created and managed by the VibeFlow team. To set up an organization for your team, reach out to us:

* **Email:** [founders@vibeflow.ai](mailto:founders@vibeflow.ai?subject=Organization%20Setup)
* **Book a call:** [vibeflow.cal.com/founders/15min](https://vibeflow.cal.com/founders/15min)

Once your organization is created, your team members will be added by an admin. Each member will see the organization appear automatically in their sidebar alongside their personal workspace.

## Switching Contexts

Use the **organization switcher** in the sidebar to move between your personal workspace and any organization you belong to.

* **Personal.** Shows your own projects, uses your personal credits.
* **Organization.** Shows org projects, uses org-allocated credits.

You can belong to multiple organizations and switch between them at any time.

## Roles

Every organization member has a **role** that controls what they can manage:

| Capability                      | Owner | Admin                           | Member                 |
| ------------------------------- | ----- | ------------------------------- | ---------------------- |
| View all org projects           | Yes   | Yes                             | Only assigned projects |
| Use the editor and chat         | Yes   | Yes                             | Yes                    |
| Invite and remove members       | Yes   | Yes (cannot touch other admins) | No                     |
| Change member roles             | Yes   | Yes (members only)              | No                     |
| Update org name, slug, logo     | Yes   | Yes                             | No                     |
| Manage billing and subscription | Yes   | Yes                             | No                     |
| Delete the organization         | Yes   | No                              | No                     |
| Transfer ownership              | Yes   | No                              | No                     |

* **Owner.** Full control over the organization. Cannot be removed or demoted. Must transfer ownership before leaving.
* **Admin.** Can manage members, invites, and settings, but cannot modify other admins, delete the org, or transfer ownership.
* **Member.** Can work in org projects they are assigned to but has no management capabilities.

## Inviting Members

Navigate to **Organization Settings > Members** to invite team members:

1. Enter the invitee's email address.
2. Choose a role (**Admin** or **Member**).
3. Click **Invite**.

An invite email is sent with a link. Invites expire after 7 days and can be resent or revoked from the **Invites** tab.

## Enterprise Billing

Each organization operates on a **custom Enterprise plan** configured by the VibeFlow team. Plans include:

* **Builder seats** with a monthly credit allocation per builder.
* **Overage billing** — if any builder exceeds their allocation, additional usage is billed automatically.
* **Centralized billing** — one invoice covers the entire team.

To adjust your plan, seats, or credits, contact your account manager or email [founders@vibeflow.ai](mailto:founders@vibeflow.ai).

## Organization Projects

When you are in an organization context (selected in the sidebar switcher), any project you create belongs to the organization. All org members with access can open and collaborate on these projects.

* **Owners and Admins** see every project in the organization automatically.
* **Members** only see projects they have been explicitly added to as collaborators.

## Credits in an Organization

When working on an org project, credits are deducted from your **org-allocated credits** first. Each builder's allocation is tracked individually. If a builder exceeds their monthly allocation, the overage is charged to the organization automatically.

Personal credits (free tier or personal Pro subscription) are used only when you are working outside the organization context.

## Leaving or Deleting an Organization

* Any **Admin** or **Member** can leave an organization from **Organization Settings > General > Leave Organization**.
* The **Owner** cannot leave without first transferring ownership to another member.
* Only the **Owner** can delete an organization. Deletion is a soft delete. The organization is marked as deleted and becomes inaccessible to all members.

## Frequently Asked Questions

<AccordionGroup>
  <Accordion title="Can I create an organization myself?">
    Organizations are set up by the VibeFlow team. Contact us at [founders@vibeflow.ai](mailto:founders@vibeflow.ai) and we'll get your team onboarded.
  </Accordion>

  <Accordion title="Can I belong to multiple organizations?">
    Yes. You can be a member of as many organizations as you like and switch between them using the sidebar switcher. Your personal workspace is always available alongside your organizations.
  </Accordion>

  <Accordion title="Do unused org credits roll over?">
    No. Each builder's monthly credit allocation resets at the start of each billing cycle. Only personal wallet credits (from referrals or promo codes) persist.
  </Accordion>

  <Accordion title="Can a member use personal credits on an org project?">
    No. When you are working in an org project, only org-allocated credits are consumed. Personal credits are used only in your personal workspace.
  </Accordion>

  <Accordion title="How does overage billing work?">
    When a builder exceeds their monthly credit allocation, the extra usage is billed automatically at the rate defined in your Enterprise plan.
  </Accordion>
</AccordionGroup>


# Stored API Keys
Source: https://docs.vibeflow.ai/features/stored-api-keys

Store and manage API keys for AI providers and third-party services

Stored API Keys let you save your API keys once and reuse them across all your flows. Instead of pasting a key into every node, you select a stored key from a dropdown.

## Supported Providers

| Provider           | Key Prefix                     |
| ------------------ | ------------------------------ |
| **OpenAI**         | `sk-...`                       |
| **Anthropic**      | `sk-ant-...`                   |
| **Google AI**      | `AI...`                        |
| **Mistral**        | --                             |
| **Azure OpenAI**   | --                             |
| **Stripe**         | `sk_test_...` or `sk_live_...` |
| **Resend**         | `re_...`                       |
| **Custom / Other** | Any key format                 |

## Adding a Key

<Steps>
  <Step title="Open Keys & Connectors">
    Go to **Settings > Keys & Connectors**. The **Stored API Keys** section lists all your saved keys.
  </Step>

  <Step title="Click Add API Key">
    Click the **Add API Key** button in the top-right corner of the section.
  </Step>

  <Step title="Fill in the details">
    * **Name:** A label you'll recognize later (e.g. "Production OpenAI Key").
    * **Key Type:** Select the provider from the dropdown.
    * **API Key:** Paste your key. The field is masked by default.
  </Step>

  <Step title="Store the key">
    Click **Store Key**. The key is encrypted and saved. Only the last four characters are shown for identification.
  </Step>
</Steps>

## Deleting a Key

Hover over a key in the list and click the **trash icon**. Confirm deletion in the dialog. Any flows that reference the deleted key will need to be updated with a new key.

## Using Stored Keys in Nodes

Nodes that require an API key, such as **Agent**, **Email (Resend)**, and **Stripe**, include a key selector with two modes:

* **Stored:** Pick a saved key from a dropdown. If you have stored keys matching the node's provider, this mode is selected automatically.
* **Manual:** Paste a key directly into the field, as usual.

You can switch between modes at any time. When you select a stored key, the node references it by ID so the actual secret is never embedded in your flow configuration.

<Tip>
  When you have stored keys available, nodes default to **Stored** mode so you can get started faster.
</Tip>

## Security

* Keys are **encrypted at rest** and never exposed in the browser after storage.
* Only the **last four characters** are displayed for identification.
* Keys are resolved server-side at execution time. They are never sent to the client or included in exported flow data.


# AgentMail
Source: https://docs.vibeflow.ai/integrations/agentmail

Give your AI agents their own email inboxes to send, receive, and act upon emails

AgentMail is an API platform for giving AI agents their own inboxes to send, receive, and act upon emails. This allows agents to assume their own identity and communicate via email with services, people, and other agents.

**Required Configuration:**

* API Key

## Getting Your API Key

<Steps>
  <Step title="Log in to AgentMail Console">
    Go to [console.agentmail.to](https://console.agentmail.to/) and log in or create an account.
  </Step>

  <Step title="Navigate to API Keys">
    In the left sidebar, click **API Keys**.
  </Step>

  <Step title="Create a new API Key">
    Click **Create New API Key**, give it a name, and copy the key.

    <Warning>Store your API key securely. It will only be shown once. If lost, you'll need to create a new one.</Warning>
  </Step>

  <Step title="Add to VibeFlow">
    Paste the API key into your VibeFlow AgentMail connector under **Settings** > **Connectors**.
  </Step>
</Steps>

## Available Endpoints

<AccordionGroup>
  <Accordion title="GET /api/actions/agentmails/inboxes">
    **List Inboxes:** Retrieve all inboxes associated with your AgentMail account.
  </Accordion>

  <Accordion title="POST /api/actions/agentmails/inboxes">
    **Create Inbox:** Create a new inbox for an AI agent, giving it a dedicated email identity.
  </Accordion>

  <Accordion title="GET /api/actions/agentmails/inboxes/{inbox_id}">
    **Get Inbox:** Retrieve details of a specific inbox by its ID.
  </Accordion>

  <Accordion title="GET /api/actions/agentmails/inboxes/{inbox_id}/messages">
    **List Messages:** List all messages in a specific inbox.
  </Accordion>

  <Accordion title="GET /api/actions/agentmails/inboxes/{inbox_id}/messages/{message_id}">
    **Get Message:** Retrieve a specific message by its ID.
  </Accordion>

  <Accordion title="GET /api/actions/agentmails/inboxes/{inbox_id}/messages/{message_id}/attachments/{attachment_id}">
    **Get Attachment:** Retrieve a specific attachment from a message.
  </Accordion>

  <Accordion title="POST /api/actions/agentmails/inboxes/{inbox_id}/messages/send">
    **Send Message:** Send a new email from a specific inbox.
  </Accordion>

  <Accordion title="POST /api/actions/agentmails/inboxes/{inbox_id}/messages/{message_id}/reply">
    **Reply To Message:** Reply to an existing message in a thread.
  </Accordion>

  <Accordion title="GET /api/actions/agentmails/inboxes/{inbox_id}/threads">
    **List Threads:** List all email threads in a specific inbox.
  </Accordion>

  <Accordion title="GET /api/actions/agentmails/inboxes/{inbox_id}/threads/{thread_id}">
    **Get Thread:** Retrieve a full email thread by its ID.
  </Accordion>
</AccordionGroup>


# Apify
Source: https://docs.vibeflow.ai/integrations/apify

Run Apify actors for web scraping and automation

Apify integration for running actors on the [Apify platform](https://apify.com) — start an actor run with custom input, optionally wait for completion, fetch dataset results, and poll long-running runs by ID.

**Required Configuration:**

* API key authentication

## Setup

<Steps>
  <Step title="Create an Apify Account">
    Sign up or log in at [apify.com](https://apify.com).
  </Step>

  <Step title="Generate an API Token">
    Go to [Settings > API & Integrations](https://console.apify.com/settings/integrations) in your Apify console and copy your personal API token.
  </Step>

  <Step title="Add API Token to VibeFlow">
    In VibeFlow, navigate to **Settings** > **Connectors**, select **Apify**, and paste your API token into the connector modal.

    Your API token is encrypted by default and stored securely.
  </Step>
</Steps>

## Choosing an Actor

Apify actors are pre-built scrapers and automation scripts. You have two options:

* **Bring your own actor:** if you already know which actor you want to run (e.g. `apify/web-scraper`, `apify/instagram-scraper`), pass its ID directly to the run endpoint.
* **Let the Vibe Agent find one:** describe what you want to scrape or automate, and the agent will search the [Apify Store](https://apify.com/store) for a suitable actor and wire it up for you.

## Available Endpoints

<AccordionGroup>
  <Accordion title="POST /api/actions/apify/actor">
    Run an Apify actor with custom input. Optionally waits for the run to complete and returns the dataset results.
  </Accordion>

  <Accordion title="GET /api/actions/apify/actor/run/{runId}">
    Get the status and output of an Apify actor run by its run ID — useful for polling long-running jobs started asynchronously.
  </Accordion>
</AccordionGroup>


# Browser Use
Source: https://docs.vibeflow.ai/integrations/browser-use

Browser automation and web scraping capabilities

Browser automation and web scraping capabilities.

**Required Configuration:**

* API Key

## Getting Your API Key

<Steps>
  <Step title="Sign up or log in">
    Go to [cloud.browser-use.com](https://cloud.browser-use.com/) and create an account or log in.
  </Step>

  <Step title="Open API Keys settings">
    Navigate to [Settings → API Keys](https://cloud.browser-use.com/settings?tab=api-keys).
  </Step>

  <Step title="Create a new key">
    Click **Create API Key**, enter a name for the key in the modal, and confirm. Copy the key and add it to your VibeFlow connector.
  </Step>
</Steps>

## Available Endpoints

<AccordionGroup>
  <Accordion title="POST /api/actions/browser-use/task">
    Create and execute a browser automation task
  </Accordion>

  <Accordion title="POST /api/actions/browser-use/session">
    Create a new browser session
  </Accordion>

  <Accordion title="POST /api/actions/browser-use/profile">
    Create a new browser profile
  </Accordion>

  <Accordion title="GET /api/actions/browser-use/profile">
    List browser profiles
  </Accordion>

  <Accordion title="GET /api/actions/browser-use/profile/:profileId">
    Get a browser profile
  </Accordion>
</AccordionGroup>


# ElevenLabs
Source: https://docs.vibeflow.ai/integrations/elevenlabs

Text-to-speech, speech-to-text, and AI music generation via ElevenLabs

ElevenLabs integration for generating lifelike speech, transcribing audio, generating music, and accessing available AI models.

**Required Configuration:**

* API key authentication

<Warning>
  ElevenLabs Free Tier may trigger a `detected_unusual_activity` error when used with VibeFlow. This happens because VibeFlow's servers can be flagged as a proxy or VPN by ElevenLabs' abuse detection system.

  If you see this error, upgrading to any paid ElevenLabs plan will resolve it.
</Warning>

## Setup

<Steps>
  <Step title="Create an ElevenLabs Account">
    Sign up or log in at [elevenlabs.io](https://elevenlabs.io).

    The Free Tier works but may occasionally trigger abuse detection errors due to VibeFlow's infrastructure being flagged as a proxy. If this happens, upgrading to any paid plan at [elevenlabs.io/app/subscription](https://elevenlabs.io/app/subscription) will resolve it.
  </Step>

  <Step title="Generate an API Key">
    Go to your [API Keys dashboard](https://elevenlabs.io/app/developers/api-keys) and generate a new API key.

    Make sure the API key has **all permissions enabled**, as restricting scopes will cause endpoints to fail in VibeFlow.
  </Step>

  <Step title="Add API Key to VibeFlow">
    In VibeFlow, navigate to **Settings** > **Connectors**, select **ElevenLabs**, and paste your API key into the connector modal.

    Your API key is encrypted by default and stored securely.
  </Step>
</Steps>

## Available Endpoints

<AccordionGroup>
  <Accordion title="POST /api/actions/elevenlabs/text-to-speech">
    Convert text into lifelike speech using ElevenLabs voices.
  </Accordion>

  <Accordion title="POST /api/actions/elevenlabs/speech-to-text">
    Transcribe audio into text using ElevenLabs speech recognition.
  </Accordion>

  <Accordion title="POST /api/actions/elevenlabs/music">
    Generate AI music using ElevenLabs music generation models.
  </Accordion>

  <Accordion title="GET /api/actions/elevenlabs/models">
    Retrieve a list of all available ElevenLabs models.
  </Accordion>

  <Accordion title="GET /api/actions/elevenlabs/models/:modelId">
    Retrieve details for a specific ElevenLabs model by ID.
  </Accordion>
</AccordionGroup>


# Firecrawl
Source: https://docs.vibeflow.ai/integrations/firecrawl

Scrape URLs, search the web, and crawl websites into LLM-ready markdown

Firecrawl integration for scraping URLs, searching the web, autonomous web data gathering, and secure browser sessions to turn websites into LLM-ready markdown.

**Required Configuration:**

* API key authentication

## Setup

<Steps>
  <Step title="Create a Firecrawl Account">
    Sign up or log in at [firecrawl.dev](https://firecrawl.dev).
  </Step>

  <Step title="Generate an API Key">
    Go to your [Firecrawl dashboard](https://firecrawl.dev/app) and generate a new API key.
  </Step>

  <Step title="Add API Key to VibeFlow">
    In VibeFlow, navigate to **Settings** > **Connectors**, select **Firecrawl**, and paste your API key into the connector modal.

    Your API key is encrypted by default and stored securely.
  </Step>
</Steps>

## Available Endpoints

<AccordionGroup>
  <Accordion title="POST /api/actions/firecrawl/scrape">
    Scrape a single URL and extract its content.
  </Accordion>

  <Accordion title="POST /api/actions/firecrawl/search">
    Search the web and optionally scrape the results.
  </Accordion>

  <Accordion title="POST /api/actions/firecrawl/crawl">
    Start a crawl job on a URL.
  </Accordion>

  <Accordion title="GET /api/actions/firecrawl/crawl/{id}">
    Get the status of a crawl job.
  </Accordion>

  <Accordion title="POST /api/actions/firecrawl/map">
    Map all URLs from a website.
  </Accordion>

  <Accordion title="POST /api/actions/firecrawl/batch/scrape">
    Batch scrape multiple URLs in a single job.
  </Accordion>

  <Accordion title="GET /api/actions/firecrawl/batch/scrape/{id}">
    Get the status of a batch scrape job.
  </Accordion>
</AccordionGroup>


# Google Calendar
Source: https://docs.vibeflow.ai/integrations/google-calendar

Event and scheduling management via Google Calendar

Google Calendar integration for managing events, calendars, and scheduling.

**Required Configuration:**

* OAuth2 authentication (handled automatically via VibeFlow Cloud or your own credentials via BYOK)

## BYOK (Bring Your Own Keys)

If you prefer to use your own Google OAuth credentials instead of VibeFlow's managed OAuth, follow these steps:

<Steps>
  <Step title="Create a Google Cloud Project">
    Go to the [Google Cloud Console](https://console.cloud.google.com) and create a new project (or use an existing one).

    Enable the following APIs for your project:

    * **Google Calendar API**
    * **Google People API**
  </Step>

  <Step title="Create OAuth Credentials">
    In your Google Cloud project, navigate to **APIs & Services** > **Credentials** and click **Create Credentials** > **OAuth client ID**.

    * **Application type**: Web application
    * Add the following **Authorized redirect URI**:
      ```
      https://integration.vibeflow.ai/api/oauth/callback/google-calendar
      ```
  </Step>

  <Step title="Configure OAuth Scopes">
    Ensure the following scopes are enabled on your OAuth consent screen:

    ```
    https://www.googleapis.com/auth/userinfo.email
    https://www.googleapis.com/auth/userinfo.profile
    https://www.googleapis.com/auth/calendar
    ```
  </Step>

  <Step title="Add Credentials to VibeFlow">
    Copy your **Client ID** and **Client Secret** from Google Cloud Console and paste them into the VibeFlow connector modal when setting up the Google Calendar integration.

    Your credentials are encrypted by default and stored securely.
  </Step>
</Steps>

<Info>
  BYOK is ideal for businesses that require data isolation, custom branding, or stricter compliance requirements.
</Info>

## Available Endpoints

<AccordionGroup>
  <Accordion title="POST /api/actions/google-calendar/create-event">
    Create a new calendar event
  </Accordion>

  <Accordion title="GET /api/actions/google-calendar/list-events">
    List calendar events
  </Accordion>

  <Accordion title="GET /api/actions/google-calendar/get-event">
    Get a specific event by ID
  </Accordion>

  <Accordion title="PUT /api/actions/google-calendar/update-event">
    Update an existing event
  </Accordion>

  <Accordion title="DELETE /api/actions/google-calendar/delete-event">
    Delete a calendar event
  </Accordion>
</AccordionGroup>


# Google Sheets
Source: https://docs.vibeflow.ai/integrations/google-sheets

Read, write, and manage spreadsheet data via Google Sheets

Google Sheets integration for reading, writing, and managing spreadsheet data.

**Required Configuration:**

* OAuth2 authentication (handled automatically via VibeFlow Cloud or your own credentials via BYOK)

## BYOK (Bring Your Own Keys)

If you prefer to use your own Google OAuth credentials instead of VibeFlow's managed OAuth, follow these steps:

<Steps>
  <Step title="Create a Google Cloud Project">
    Go to the [Google Cloud Console](https://console.cloud.google.com) and create a new project (or use an existing one).

    Enable the following APIs for your project:

    * **Google Sheets API**
    * **Google Drive API**
    * **Google People API**
  </Step>

  <Step title="Create OAuth Credentials">
    In your Google Cloud project, navigate to **APIs & Services** > **Credentials** and click **Create Credentials** > **OAuth client ID**.

    * **Application type**: Web application
    * Add the following **Authorized redirect URI**:
      ```
      https://integration.vibeflow.ai/api/oauth/callback/google-sheets
      ```
  </Step>

  <Step title="Configure OAuth Scopes">
    Ensure the following scopes are enabled on your OAuth consent screen:

    ```
    https://www.googleapis.com/auth/userinfo.email
    https://www.googleapis.com/auth/userinfo.profile
    https://www.googleapis.com/auth/spreadsheets
    https://www.googleapis.com/auth/drive.file
    ```
  </Step>

  <Step title="Add Credentials to VibeFlow">
    Copy your **Client ID** and **Client Secret** from Google Cloud Console and paste them into the VibeFlow connector modal when setting up the Google Sheets integration.

    Your credentials are encrypted by default and stored securely.
  </Step>
</Steps>

<Info>
  BYOK is ideal for businesses that require data isolation, custom branding, or stricter compliance requirements.
</Info>

## Available Endpoints

<AccordionGroup>
  <Accordion title="POST /api/actions/google-sheets/read">
    Read data from a Google Sheet
  </Accordion>

  <Accordion title="POST /api/actions/google-sheets/write">
    Write data to a Google Sheet
  </Accordion>

  <Accordion title="POST /api/actions/google-sheets/append">
    Append data to a Google Sheet
  </Accordion>

  <Accordion title="POST /api/actions/google-sheets/update">
    Update existing data in a Google Sheet
  </Accordion>
</AccordionGroup>


# LinkedIn
Source: https://docs.vibeflow.ai/integrations/linkedin

Social media posting via LinkedIn

LinkedIn integration for social media actions.

**Required Configuration:**

* OAuth2 authentication. Connect your LinkedIn account via the OAuth flow in the VibeFlow Connectors settings.

## Available Endpoints

<AccordionGroup>
  <Accordion title="POST /api/actions/linkedin/post">
    Create a LinkedIn post
  </Accordion>
</AccordionGroup>


# Linq
Source: https://docs.vibeflow.ai/integrations/linq

Send and receive iMessage, RCS, and SMS via the Linq Partner API

The Linq Partner API enables you to integrate iMessage, RCS, and SMS messaging directly into your applications. Build powerful conversational experiences, automate customer communication, and leverage the same messaging infrastructure trusted by 50,000+ teams.

**Required Configuration:**

* API key authentication

## Setup

<Steps>
  <Step title="Get a Linq API Key">
    You can either bring your own Linq API key, or request one from VibeFlow by emailing [founders@vibeflow.ai](mailto:founders@vibeflow.ai).
  </Step>

  <Step title="Add API Key to VibeFlow">
    In VibeFlow, navigate to **Settings** > **Connectors**, select **Linq**, and paste your API key into the connector modal.

    Your API key is encrypted by default and stored securely.
  </Step>
</Steps>

## Available Endpoints

<AccordionGroup>
  <Accordion title="POST /api/actions/linqapp/chats">
    Create a new chat and send an iMessage.
  </Accordion>

  <Accordion title="GET /api/actions/linqapp/chats">
    List chats associated with your Linq account.
  </Accordion>

  <Accordion title="POST /api/actions/linqapp/chats/{chatId}/messages">
    Send a message to an existing chat.
  </Accordion>

  <Accordion title="GET /api/actions/linqapp/chats/{chatId}/messages">
    Retrieve messages from a chat.
  </Accordion>

  <Accordion title="POST /api/actions/linqapp/messages/{messageId}/reactions">
    Add or remove a reaction on a message.
  </Accordion>

  <Accordion title="GET /api/actions/linqapp/contact_card">
    Retrieve contact cards.
  </Accordion>

  <Accordion title="POST /api/actions/linqapp/contact_card">
    Set up a contact card.
  </Accordion>

  <Accordion title="PATCH /api/actions/linqapp/contact_card">
    Update an existing contact card.
  </Accordion>

  <Accordion title="POST /api/actions/linqapp/chats/{chatId}/leave">
    Leave a group chat.
  </Accordion>

  <Accordion title="POST /api/actions/linqapp/chats/{chatId}/typing">
    Start a typing indicator in a chat.
  </Accordion>

  <Accordion title="DELETE /api/actions/linqapp/chats/{chatId}/typing">
    Stop a typing indicator in a chat.
  </Accordion>
</AccordionGroup>


# Notion
Source: https://docs.vibeflow.ai/integrations/notion

Read, write, and manage Notion pages and databases

Notion integration for reading, creating, and updating pages and databases in your Notion workspace.

**Required Configuration:**

* OAuth2 authentication. Connect your Notion account via the OAuth flow in the VibeFlow Connectors settings.

## Setting Up Notion

<Steps>
  <Step title="Open Connectors">
    Go to **Settings** > **Connectors** in your VibeFlow dashboard and select **Notion**.
  </Step>

  <Step title="Authorize Access">
    Follow the OAuth flow to connect your Notion workspace. You'll be asked to select which pages and databases VibeFlow can access.
  </Step>

  <Step title="Use in Workflows">
    Once connected, use Notion in your workflows to read, create, and update pages and databases.
  </Step>
</Steps>

## Available Endpoints

### Database Operations

<AccordionGroup>
  <Accordion title="POST /api/actions/notion/databases">
    Create a new database in a Notion workspace.
  </Accordion>

  <Accordion title="GET /api/actions/notion/databases/{databaseId}">
    Retrieve a specific database by ID.
  </Accordion>

  <Accordion title="POST /api/actions/notion/databases/{databaseId}/query">
    Query a database with filters and sorting options.
  </Accordion>

  <Accordion title="POST /api/actions/notion/databases/search">
    Search across all databases in your Notion workspace.
  </Accordion>
</AccordionGroup>

### Page Operations

<AccordionGroup>
  <Accordion title="GET /api/actions/notion/pages/{pageId}">
    Retrieve a specific page by ID.
  </Accordion>

  <Accordion title="POST /api/actions/notion/pages">
    Create a new page in a workspace or database.
  </Accordion>

  <Accordion title="PATCH /api/actions/notion/pages/{pageId}">
    Update the properties of an existing page.
  </Accordion>

  <Accordion title="DELETE /api/actions/notion/pages/{pageId}">
    Archive a page by ID.
  </Accordion>

  <Accordion title="POST /api/actions/notion/pages/search">
    Search across all pages in your Notion workspace.
  </Accordion>
</AccordionGroup>

### Block Operations

<AccordionGroup>
  <Accordion title="GET /api/actions/notion/blocks/{blockId}">
    Retrieve a specific block by ID.
  </Accordion>

  <Accordion title="GET /api/actions/notion/blocks/{blockId}/children">
    Retrieve all children blocks of a given block.
  </Accordion>

  <Accordion title="PATCH /api/actions/notion/blocks/{blockId}/children">
    Append new children blocks to an existing block.
  </Accordion>

  <Accordion title="PATCH /api/actions/notion/blocks/{blockId}">
    Update the content or properties of an existing block.
  </Accordion>

  <Accordion title="DELETE /api/actions/notion/blocks/{blockId}">
    Delete a block by ID.
  </Accordion>
</AccordionGroup>


# Integrations
Source: https://docs.vibeflow.ai/integrations/overview

Connect external services to your VibeFlow applications

VibeFlow provides multiple ways to connect your applications with external services:

* **Native integrations:** pre-built connectors with dedicated configuration for popular third-party services (listed below).
* **Composio integrations:** through our partnership with [Composio](https://composio.dev), VibeFlow supports **50+ additional providers** beyond the native integrations listed below — including Gmail, GitHub, Jira, HubSpot, Salesforce, Airtable, and many more.
* **HTTP Request Node:** connect to any API with custom HTTP requests, giving you flexibility beyond the built-in integrations.

## Available Integrations

<div>
  <a href="/integrations/twilio">
    <img />

    <div>
      <div>Twilio</div>
      <div>SMS, WhatsApp, and calls</div>
    </div>
  </a>

  <a href="/integrations/slack">
    <img />

    <div>
      <div>Slack</div>
      <div>Messaging and notifications</div>
    </div>
  </a>

  <a href="/integrations/linkedin">
    <img />

    <div>
      <div>LinkedIn</div>
      <div>Social media posting</div>
    </div>
  </a>

  <a href="/integrations/browser-use">
    <img />

    <div>
      <div>Browser Use</div>
      <div>Browser automation and scraping</div>
    </div>
  </a>

  <a href="/integrations/stripe">
    <img />

    <div>
      <div>Stripe</div>
      <div>Payment processing and billing</div>
    </div>
  </a>

  <a href="/integrations/wordpress">
    <img />

    <div>
      <div>WordPress</div>
      <div>Posts, pages, and users</div>
    </div>
  </a>

  <a href="/integrations/google-calendar">
    <img />

    <div>
      <div>Google Calendar</div>
      <div>Event and scheduling management</div>
    </div>
  </a>

  <a href="/integrations/google-sheets">
    <img />

    <div>
      <div>Google Sheets</div>
      <div>Read, write, and manage spreadsheets</div>
    </div>
  </a>

  <a href="/integrations/zoom">
    <img />

    <div>
      <div>Zoom</div>
      <div>Meeting scheduling and management</div>
    </div>
  </a>

  <a href="/integrations/elevenlabs">
    <img />

    <div>
      <div>ElevenLabs</div>
      <div>Text-to-speech, speech-to-text, and music</div>
    </div>
  </a>

  <a href="/integrations/notion">
    <img />

    <div>
      <div>Notion</div>
      <div>Pages, databases, and workspace content</div>
    </div>
  </a>

  <a href="/integrations/agentmail">
    <img />

    <div>
      <div>AgentMail</div>
      <div>Email inboxes for AI agents</div>
    </div>
  </a>

  <a href="/integrations/supermemory">
    <img />

    <div>
      <div>Supermemory</div>
      <div>Memory and context for AI agents</div>
    </div>
  </a>

  <a href="/integrations/linq">
    <img />

    <div>
      <div>Linq</div>
      <div>iMessage, RCS, and SMS messaging</div>
    </div>
  </a>

  <a href="/integrations/firecrawl">
    <img />

    <div>
      <div>Firecrawl</div>
      <div>Web scraping, search, and crawling</div>
    </div>
  </a>

  <a href="/integrations/telegram">
    <img />

    <div>
      <div>Telegram</div>
      <div>Bot messaging, media, and chat management</div>
    </div>
  </a>

  <a href="/integrations/apify">
    <img />

    <div>
      <div>Apify</div>
      <div>Run actors for scraping and automation</div>
    </div>
  </a>

  <a href="/integrations/sharepoint">
    <img />

    <div>
      <div>SharePoint</div>
      <div>Sites, files, lists, and Excel tables</div>
    </div>
  </a>
</div>

## Setting Up Integrations

To use any of these integrations in your VibeFlow application:

<Steps>
  <Step title="Navigate to Connectors">
    Go to **Settings** > **Connectors** in your VibeFlow dashboard
  </Step>

  <Step title="Add Connection">
    Click **Add Connection** and select the provider you want to connect
  </Step>

  <Step title="Configure Credentials">
    Provide the required configuration:

    * **API Key integrations**: Enter your API keys and credentials
    * **OAuth integrations**: Follow the OAuth flow to authorize access to your account

    Your credentials are encrypted and stored securely.
  </Step>

  <Step title="Use in Workflows">
    Use the integration in your workflows via the HTTP Request Node or Agent Node
  </Step>
</Steps>

<Info>
  Your credentials are stored securely and encrypted. Some OAuth integrations may show a "Continue to Composio" screen during authorization. This is our secure authentication partner that handles the OAuth flow on our behalf. Your credentials are never shared with third parties.
</Info>

<Tip>
  Don't see the integration you need? [Request an integration](https://app.vibeflow.ai/settings/integrations) and we'll consider adding it to VibeFlow.
</Tip>


# SharePoint
Source: https://docs.vibeflow.ai/integrations/sharepoint

Manage SharePoint sites, files, lists, and Excel tables via Microsoft Graph

Microsoft SharePoint integration (via Microsoft Graph) for managing sites, drives, files, folders, sharing links, lists, list items, and Excel tables — including base64 file uploads, search and metadata filtering, and pre-authenticated download URLs.

**Required Configuration:**

* OAuth2 authentication through VibeFlow Cloud or your own Microsoft Entra ID app credentials via BYOK.

## BYOK (Bring Your Own Keys)

Use VibeFlow Cloud for the fastest setup, or use BYOK if you want each workspace to authorize through your own Microsoft Entra ID (Azure AD) app registration.

<Steps>
  <Step title="Open the SharePoint Connector">
    Go to **Settings** > **Connectors** in your VibeFlow dashboard and select **SharePoint**.

    Choose **Cloud (Recommended)** to use VibeFlow-managed credentials, or choose **Your Own Credentials** to configure BYOK.
  </Step>

  <Step title="Register an Application in Microsoft Entra ID">
    Go to the [Microsoft Entra admin center](https://entra.microsoft.com) and navigate to **Identity** > **Applications** > **App registrations**. Click **New registration**.

    * **Name**: Choose a name for your app
    * **Supported account types**: Choose the option that matches your tenant setup. For multi-tenant access, use **Accounts in any organizational directory and personal Microsoft accounts**.
    * **Redirect URI**: Web →
      ```
      https://integration.vibeflow.ai/api/oauth/callback/sharepoint
      ```
  </Step>

  <Step title="Configure API Permissions">
    In your app registration, go to **API permissions** > **Add a permission** > **Microsoft Graph** > **Delegated permissions** and add the following scopes:

    ```
    offline_access
    openid
    email
    User.Read
    Sites.Read.All
    Sites.ReadWrite.All
    Files.Read.All
    Files.ReadWrite.All
    ```

    You can limit these scopes for least-privilege access, but SharePoint actions that depend on omitted permissions will not work. For example, file write operations require `Files.ReadWrite.All`, and site/list write operations require `Sites.ReadWrite.All`.

    Click **Grant admin consent** if your tenant requires it.
  </Step>

  <Step title="Create a Client Secret">
    Go to **Certificates & secrets** > **Client secrets** > **New client secret**. Copy the secret **Value** immediately — it will not be shown again.
  </Step>

  <Step title="Add Credentials to VibeFlow">
    In the VibeFlow SharePoint connector modal, select **Your Own Credentials** and paste:

    * **Client ID**: the **Application (client) ID** from your Microsoft Entra app registration
    * **Client Secret**: the client secret **Value** from **Certificates & secrets**

    Your credentials are encrypted by default and stored securely.
  </Step>

  <Step title="Authorize SharePoint">
    Continue the connector setup and sign in with the Microsoft account that should grant SharePoint access. After consent is complete, you can use SharePoint actions in your workflows.
  </Step>
</Steps>

<Info>
  BYOK is ideal for businesses that require data isolation, custom branding, or stricter compliance requirements.
</Info>

## Available Endpoints

<AccordionGroup>
  <Accordion title="GET /api/actions/sharepoint/me">
    Get information about the current authenticated user.
  </Accordion>

  <Accordion title="GET /api/actions/sharepoint/sites">
    List SharePoint sites accessible to the user.
  </Accordion>

  <Accordion title="POST /api/actions/sharepoint/sites/search">
    Search SharePoint sites by keyword.
  </Accordion>

  <Accordion title="POST /api/actions/sharepoint/sites/get">
    Get a specific SharePoint site.
  </Accordion>

  <Accordion title="POST /api/actions/sharepoint/files/list">
    List files in a folder.
  </Accordion>

  <Accordion title="POST /api/actions/sharepoint/files/get">
    Get a file by its ID.
  </Accordion>

  <Accordion title="POST /api/actions/sharepoint/files/find">
    Find a file by name.
  </Accordion>

  <Accordion title="POST /api/actions/sharepoint/files/search">
    Search files across a site or drive.
  </Accordion>

  <Accordion title="POST /api/actions/sharepoint/files/search-and-filter">
    Search and filter files using metadata.
  </Accordion>

  <Accordion title="POST /api/actions/sharepoint/files/metadata">
    Retrieve metadata for a file.
  </Accordion>

  <Accordion title="POST /api/actions/sharepoint/files/download">
    Download a file (returns a pre-authenticated download URL).
  </Accordion>

  <Accordion title="POST /api/actions/sharepoint/files/download-batch">
    Download multiple files in a single batch request.
  </Accordion>

  <Accordion title="POST /api/actions/sharepoint/files/select">
    Select files for further operations.
  </Accordion>

  <Accordion title="POST /api/actions/sharepoint/folders">
    Create a new folder.
  </Accordion>

  <Accordion title="POST /api/actions/sharepoint/files">
    Upload a file (supports base64 file content).
  </Accordion>

  <Accordion title="POST /api/actions/sharepoint/files/sharing-links">
    Create a sharing link for a file.
  </Accordion>

  <Accordion title="POST /api/actions/sharepoint/lists">
    Create a new list on a SharePoint site.
  </Accordion>

  <Accordion title="POST /api/actions/sharepoint/lists/items">
    Create a new item in a list.
  </Accordion>

  <Accordion title="PATCH /api/actions/sharepoint/lists/items">
    Update an existing list item.
  </Accordion>

  <Accordion title="POST /api/actions/sharepoint/lists/items/search">
    Find files in a list using metadata filters.
  </Accordion>

  <Accordion title="POST /api/actions/sharepoint/excel/table">
    Read an Excel table stored in SharePoint.
  </Accordion>
</AccordionGroup>


# Slack
Source: https://docs.vibeflow.ai/integrations/slack

Messaging and notification endpoints for Slack

Slack messaging and notification endpoints for sending messages, managing reactions, and retrieving channel information.

**Required Configuration:**

* API Key (Bot Token)

## Getting Your Bot Token

<Steps>
  <Step title="Create a Slack App">
    Go to [api.slack.com/apps](https://api.slack.com/apps) and click **Create New App** → **From scratch**. Give it a name and select your workspace.
  </Step>

  <Step title="Add Bot Token Scopes">
    In the left sidebar, go to **OAuth & Permissions**. Under **Scopes** → **Bot Token Scopes**, add the permissions your app needs (e.g. `chat:write`, `channels:read`, `users:read`).
  </Step>

  <Step title="Install the app to your workspace">
    Scroll up to **OAuth Tokens for Your Workspace** and click **Install to Workspace**. Approve the permissions when prompted.
  </Step>

  <Step title="Copy the Bot Token">
    After installation, copy the **Bot User OAuth Token** (starts with `xoxb-`). Add it to your VibeFlow connector.
  </Step>
</Steps>

## Available Endpoints

<AccordionGroup>
  <Accordion title="POST /api/actions/slack/send-message">
    Send a message to a Slack channel or DM
  </Accordion>

  <Accordion title="POST /api/actions/slack/list-channels">
    List all channels in the Slack workspace
  </Accordion>

  <Accordion title="POST /api/actions/slack/get-channel-info">
    Get detailed information about a specific channel
  </Accordion>

  <Accordion title="POST /api/actions/slack/get-user-info">
    Get detailed information about a specific user
  </Accordion>

  <Accordion title="POST /api/actions/slack/list-users">
    List all users in the Slack workspace
  </Accordion>

  <Accordion title="POST /api/actions/slack/get-conversation-history">
    Retrieve message history from a channel or direct message
  </Accordion>

  <Accordion title="POST /api/actions/slack/get-thread-replies">
    Retrieve all replies to a thread in a channel
  </Accordion>

  <Accordion title="POST /api/actions/slack/update-message">
    Update an existing message in a channel
  </Accordion>

  <Accordion title="POST /api/actions/slack/delete-message">
    Delete a message from a channel
  </Accordion>

  <Accordion title="POST /api/actions/slack/add-reaction">
    Add an emoji reaction to a message
  </Accordion>

  <Accordion title="POST /api/actions/slack/remove-reaction">
    Remove an emoji reaction from a message
  </Accordion>
</AccordionGroup>


# Stripe
Source: https://docs.vibeflow.ai/integrations/stripe

Payment processing, customers, charges, and billing via Stripe

Stripe payment processing integration for managing payments, customers, charges, coupons, and billing.

**Required Configuration:**

* API Key (Secret Key)

## Getting Your API Key

<Steps>
  <Step title="Sign up or log in">
    Go to [dashboard.stripe.com](https://dashboard.stripe.com/) and create an account or log in.
  </Step>

  <Step title="Open API Keys">
    In the left sidebar, navigate to **Developers** → **API Keys**.
  </Step>

  <Step title="Copy your Secret Key">
    Under **Standard keys**, copy the **Secret key** (starts with `sk_live_` or `sk_test_`). Add it to your VibeFlow connector.

    <Warning>Never expose your Secret Key publicly. Use the test key (`sk_test_`) during development.</Warning>
  </Step>
</Steps>

## Available Endpoints

<AccordionGroup>
  <Accordion title="GET /api/actions/stripe/balance">
    Get account balance
  </Accordion>

  <Accordion title="GET /api/actions/stripe/charges">
    Get all charges
  </Accordion>

  <Accordion title="POST /api/actions/stripe/charges">
    Create a charge
  </Accordion>

  <Accordion title="GET /api/actions/stripe/charges/{id}">
    Get a specific charge
  </Accordion>

  <Accordion title="POST /api/actions/stripe/charges/{id}">
    Update a charge
  </Accordion>

  <Accordion title="GET /api/actions/stripe/coupons">
    Get all coupons
  </Accordion>

  <Accordion title="POST /api/actions/stripe/coupons">
    Create a coupon
  </Accordion>

  <Accordion title="GET /api/actions/stripe/customers">
    Get all customers
  </Accordion>

  <Accordion title="POST /api/actions/stripe/customers">
    Create a customer
  </Accordion>

  <Accordion title="GET /api/actions/stripe/customers/{id}">
    Get a specific customer
  </Accordion>

  <Accordion title="POST /api/actions/stripe/customers/{id}">
    Update a customer
  </Accordion>

  <Accordion title="DELETE /api/actions/stripe/customers/{id}">
    Delete a customer
  </Accordion>

  <Accordion title="POST /api/actions/stripe/customer-cards/{customer_id}/cards">
    Add a customer card
  </Accordion>

  <Accordion title="GET /api/actions/stripe/customer-cards/{customer_id}/cards/{card_id}">
    Get a customer card
  </Accordion>

  <Accordion title="DELETE /api/actions/stripe/customer-cards/{customer_id}/cards/{card_id}">
    Remove a customer card
  </Accordion>

  <Accordion title="POST /api/actions/stripe/meter-events">
    Create a meter event
  </Accordion>

  <Accordion title="POST /api/actions/stripe/sources">
    Create a source
  </Accordion>

  <Accordion title="GET /api/actions/stripe/sources/{id}">
    Get a source
  </Accordion>

  <Accordion title="POST /api/actions/stripe/tokens">
    Create a token
  </Accordion>
</AccordionGroup>


# Supermemory
Source: https://docs.vibeflow.ai/integrations/supermemory

Long-term and short-term memory and context infrastructure for AI agents

Supermemory is the state-of-the-art memory and context infrastructure for AI agents. It provides perfect recall about your users, enabling agents that are more intelligent, more personalized, and more consistent. Supermemory includes the full context stack: agent memory, content extraction, connectors and syncing, and a managed RAG platform.

In VibeFlow, Supermemory works seamlessly with the **Agent Node** to give your agents persistent, searchable memory across sessions.

**Required Configuration:**

* API Key

## Getting Your API Key

<Steps>
  <Step title="Sign in to Supermemory Console">
    Go to [console.supermemory.ai](https://console.supermemory.ai/) and log in or create an account.
  </Step>

  <Step title="Navigate to API Keys">
    Go to the [API Keys page](https://console.supermemory.ai/keys?create=false) from the console.
  </Step>

  <Step title="Create a new API Key">
    Click **Create New**, give it a name, set an expiry date (longer is better), and set permissions to **Full Access**.

    <Warning>Store your API key securely. Use a long expiry date to avoid disruption to your agents.</Warning>
  </Step>

  <Step title="Add to VibeFlow">
    Paste the API key into your VibeFlow Supermemory connector under **Settings** > **Connectors**.
  </Step>
</Steps>

## Available Endpoints

<AccordionGroup>
  <Accordion title="POST /api/actions/supermemory/documents">
    **Add Document:** Store a new document or piece of information into Supermemory for future retrieval.
  </Accordion>

  <Accordion title="POST /api/actions/supermemory/search/documents">
    **Search Documents:** Semantically search through stored documents to retrieve relevant context for your agent.
  </Accordion>

  <Accordion title="POST /api/actions/supermemory/profile">
    **Get User Profile:** Fetch a user's profile and aggregated memory context built up over time.
  </Accordion>

  <Accordion title="POST /api/actions/supermemory/documents/list">
    **List Documents:** List all documents stored in Supermemory for a given user or session.
  </Accordion>

  <Accordion title="DELETE /api/actions/supermemory/documents/{id}">
    **Delete Document:** Remove a specific document from Supermemory by its ID.
  </Accordion>
</AccordionGroup>


# Telegram
Source: https://docs.vibeflow.ai/integrations/telegram

Send messages, media, polls, and manage chats via the Telegram Bot API

Telegram Bot API integration for sending messages, photos, documents, polls, locations, managing chats, and receiving updates.

**Required Configuration:**

* Bot token authentication

## Setup

<Steps>
  <Step title="Create a Telegram Bot">
    Open Telegram and start a chat with [@BotFather](https://t.me/BotFather). Send `/newbot` and follow the prompts to choose a name and username for your bot.

    BotFather will return a bot token that looks like `123456789:ABCdefGhIJKlmNoPQRstuVWXyz`.
  </Step>

  <Step title="Add Bot Token to VibeFlow">
    In VibeFlow, navigate to **Settings** > **Connectors**, select **Telegram**, and paste your bot token into the connector modal.

    Your bot token is encrypted by default and stored securely.
  </Step>
</Steps>

## Finding a Chat ID

Most Telegram endpoints require a `chat_id` to identify which chat to send to. Chat IDs are not visible in the Telegram UI, so you'll need a helper bot to look them up.

<Steps>
  <Step title="For your personal chat ID">
    Open Telegram and start a chat with [@userinfobot](https://t.me/userinfobot). Send any message and it will reply with your numeric user ID — this is the `chat_id` to use when your bot messages you directly.
  </Step>

  <Step title="For a group or channel chat ID">
    Add [@RawDataBot](https://t.me/RawDataBot) (or [@getmyid\_bot](https://t.me/getmyid_bot)) to the group or channel. It will post a message containing the chat's `id` field — that's the `chat_id`. Group chat IDs are negative numbers (e.g. `-1001234567890`); user IDs are positive.

    You can remove the helper bot once you have the ID.
  </Step>

  <Step title="For a chat with your own bot">
    Have the user send a message to your bot first, then call `POST /api/actions/telegram/get-updates` — the response includes `chat.id` for each incoming message.
  </Step>
</Steps>

<Tip>
  Bots can only message users who have started a conversation with them first (by sending `/start` or any message). For groups, the bot must be added as a member.
</Tip>

## Available Endpoints

<AccordionGroup>
  <Accordion title="POST /api/actions/telegram/send-message">
    Send a text message to a chat.
  </Accordion>

  <Accordion title="POST /api/actions/telegram/edit-message">
    Edit a previously sent message.
  </Accordion>

  <Accordion title="POST /api/actions/telegram/delete-message">
    Delete a message.
  </Accordion>

  <Accordion title="POST /api/actions/telegram/forward-message">
    Forward a message from one chat to another.
  </Accordion>

  <Accordion title="POST /api/actions/telegram/send-photo">
    Send a photo to a chat.
  </Accordion>

  <Accordion title="POST /api/actions/telegram/send-document">
    Send a document to a chat.
  </Accordion>

  <Accordion title="POST /api/actions/telegram/send-location">
    Send a location to a chat.
  </Accordion>

  <Accordion title="POST /api/actions/telegram/send-poll">
    Send a poll to a chat.
  </Accordion>

  <Accordion title="POST /api/actions/telegram/get-chat-info">
    Get information about a chat.
  </Accordion>

  <Accordion title="POST /api/actions/telegram/get-chat-administrators">
    Get the list of administrators in a chat.
  </Accordion>

  <Accordion title="POST /api/actions/telegram/get-chat-member">
    Get information about a specific member of a chat.
  </Accordion>

  <Accordion title="POST /api/actions/telegram/get-chat-members-count">
    Get the number of members in a chat.
  </Accordion>

  <Accordion title="POST /api/actions/telegram/get-bot-info">
    Get information about the bot.
  </Accordion>

  <Accordion title="POST /api/actions/telegram/get-updates">
    Receive incoming updates using long polling.
  </Accordion>

  <Accordion title="POST /api/actions/telegram/answer-callback-query">
    Send a response to a callback query from an inline keyboard button.
  </Accordion>

  <Accordion title="POST /api/actions/telegram/export-chat-invite-link">
    Generate a new invite link for a chat.
  </Accordion>

  <Accordion title="POST /api/actions/telegram/set-webhook">
    Set a webhook URL to receive incoming updates.
  </Accordion>

  <Accordion title="POST /api/actions/telegram/get-messages">
    Retrieve incoming messages.
  </Accordion>
</AccordionGroup>


# Twilio
Source: https://docs.vibeflow.ai/integrations/twilio

SMS, WhatsApp, and call integration

Use Twilio for SMS, WhatsApp, and call integration.

**Required Configuration:**

* Account SID
* Auth Token

## Getting Your Credentials

<Steps>
  <Step title="Sign up or log in">
    Go to [twilio.com/console](https://www.twilio.com/console) and create an account or log in.
  </Step>

  <Step title="Find your credentials">
    On the Console home page, your **Account SID** and **Auth Token** are displayed under **Account Info**. Click the eye icon to reveal the Auth Token.
  </Step>

  <Step title="Add to VibeFlow">
    Copy both values and paste them into your VibeFlow Twilio connector.

    <Warning>Keep your Auth Token secret. If compromised, rotate it immediately from the Twilio Console.</Warning>
  </Step>
</Steps>

## Available Endpoints

<AccordionGroup>
  <Accordion title="POST /api/actions/twilio/send-message">
    Send SMS/MMS message
  </Accordion>

  <Accordion title="POST /api/actions/twilio/send-whatsapp">
    Send WhatsApp message
  </Accordion>

  <Accordion title="POST /api/actions/twilio/make-call">
    Make a phone call using text-to-speech
  </Accordion>
</AccordionGroup>


# WordPress
Source: https://docs.vibeflow.ai/integrations/wordpress

Manage posts, pages, and users via the WordPress REST API

WordPress integration for managing posts, pages, and users via the WordPress REST API.

**Required Configuration:**

* WordPress URL
* Username
* Application Password

## Getting Your Credentials

<Steps>
  <Step title="Log in to your WordPress admin">
    Go to `https://your-site.com/wp-admin` and log in with an administrator account.
  </Step>

  <Step title="Open your profile">
    Navigate to **Users** → **Profile** (or click your username in the top-right corner).
  </Step>

  <Step title="Create an Application Password">
    Scroll down to the **Application Passwords** section. Enter a name (e.g. `VibeFlow`) and click **Add New Application Password**. Copy the generated password, as it won't be shown again.
  </Step>

  <Step title="Add to VibeFlow">
    Enter your **WordPress URL**, your **Username**, and the **Application Password** in your VibeFlow connector.
  </Step>
</Steps>

## Available Endpoints

<AccordionGroup>
  <Accordion title="POST /api/actions/wordpress/posts">
    Create a post
  </Accordion>

  <Accordion title="GET /api/actions/wordpress/posts">
    Get many posts
  </Accordion>

  <Accordion title="GET /api/actions/wordpress/posts/:id">
    Get a specific post
  </Accordion>

  <Accordion title="PUT /api/actions/wordpress/posts/:id">
    Update a post
  </Accordion>

  <Accordion title="POST /api/actions/wordpress/pages">
    Create a page
  </Accordion>

  <Accordion title="GET /api/actions/wordpress/pages">
    Get many pages
  </Accordion>

  <Accordion title="GET /api/actions/wordpress/pages/:id">
    Get a specific page
  </Accordion>

  <Accordion title="PUT /api/actions/wordpress/pages/:id">
    Update a page
  </Accordion>

  <Accordion title="POST /api/actions/wordpress/users">
    Create a user
  </Accordion>

  <Accordion title="GET /api/actions/wordpress/users">
    Get many users
  </Accordion>

  <Accordion title="GET /api/actions/wordpress/users/:id">
    Get a specific user
  </Accordion>

  <Accordion title="PUT /api/actions/wordpress/users/:id">
    Update a user
  </Accordion>
</AccordionGroup>


# Zoom
Source: https://docs.vibeflow.ai/integrations/zoom

Meeting scheduling and management via Zoom

Zoom meeting integration for scheduling and managing meetings.

**Required Configuration:**

* OAuth2 authentication (BYOK only; bring your own Zoom OAuth app credentials)

## BYOK (Bring Your Own Keys)

Zoom requires you to use your own OAuth app credentials. Follow these steps to set up:

<Steps>
  <Step title="Create a Zoom OAuth App">
    Go to the [Zoom App Marketplace](https://marketplace.zoom.us/develop/create) and create a new app.

    * **App type**: General App (OAuth 2.0 user authorization)
  </Step>

  <Step title="Configure Redirect URI">
    In your app settings, add the following **OAuth Redirect URL**:

    ```
    https://integration.vibeflow.ai/api/oauth/callback/zoom
    ```
  </Step>

  <Step title="Add Required Scopes">
    Under **Scopes**, add the following:

    ```
    meeting:read:meeting
    meeting:read:list_meetings
    meeting:read:list_upcoming_meetings
    meeting:write:meeting
    meeting:update:meeting
    meeting:delete:meeting
    ```
  </Step>

  <Step title="Add Credentials to VibeFlow">
    Copy your **Client ID** and **Client Secret** from the Zoom app dashboard and paste them into the VibeFlow connector modal when setting up the Zoom integration.

    Your credentials are encrypted by default and stored securely.
  </Step>
</Steps>

<Info>
  Your credentials are encrypted by default and stored securely.
</Info>

## Available Endpoints

<AccordionGroup>
  <Accordion title="POST /api/actions/zoom/meetings">
    Create a Zoom meeting
  </Accordion>

  <Accordion title="GET /api/actions/zoom/meetings">
    List Zoom meetings
  </Accordion>

  <Accordion title="GET /api/actions/zoom/meetings/{meetingId}">
    Get a Zoom meeting
  </Accordion>

  <Accordion title="PUT /api/actions/zoom/meetings/{meetingId}">
    Update a Zoom meeting
  </Accordion>

  <Accordion title="DELETE /api/actions/zoom/meetings/{meetingId}">
    Delete a Zoom meeting
  </Accordion>
</AccordionGroup>


# Welcome to VibeFlow
Source: https://docs.vibeflow.ai/introduction

Build powerful workflows with AI, add a frontend when you need one

<img alt="VibeFlow Editor showing an Invoice Dashboard with workflow nodes, node palette, and integrations sidebar" />

## What is VibeFlow?

VibeFlow is an **AI-powered workflow platform** with a built-in database and optional frontend. Describe what you want to build, and VibeFlow's AI agent creates real TypeScript workflows, complete with APIs, automations, and integrations. You can also build and refine workflows visually by connecting nodes in our editor.

Perfect for developers, founders, and teams who want to build automations, internal tools, and full-stack applications faster.

<CardGroup>
  <Card title="AI-Powered Creation" icon="wand-magic-sparkles">
    Describe your workflow in plain language and let the AI agent build it for you
  </Card>

  <Card title="Build Visually" icon="wrench">
    Drag and drop nodes to create backend logic. Real TypeScript runs underneath.
  </Card>

  <Card title="Deploy Instantly" icon="bolt">
    Your backend automatically syncs with GitHub and deploys to production
  </Card>

  <Card title="Scale Easily" icon="rocket">
    Built on robust infrastructure that grows with your application
  </Card>
</CardGroup>

## How It Works

### **Option 1: Prompt Your Workflow Into Existence**

Describe what you need in natural language. VibeFlow's AI agent automatically creates your entire workflow, complete with database schema, API endpoints, and business logic. You can then refine it in the visual editor or continue with chat-based modifications.

Choose between two modes:

* **Full Stack:** Generates a complete project with workflows, database, and a frontend UI
* **Workflow Only:** Generates just the backend workflows and database, perfect for automations, APIs, and integrations

### **Option 2: Add a Frontend**

Need a UI? Provide a URL to clone, or import your own frontend project from GitHub. VibeFlow connects your frontend to your workflows automatically.

<Tip>
  If you're looking for a UI-only platform to iterate on your design without backend workflows, head to [ui.vibeflow.ai](https://ui.vibeflow.ai).
</Tip>

### **Option 3: Build Manually in the Editor**

Prefer hands-on control? Build your workflows step-by-step using the visual editor:

* **Data nodes:** Store and manage your application data
* **AI nodes:** Add intelligent processing and decision-making
* **Transform nodes:** Process and reshape your data
* **Trigger nodes:** Respond to user actions and events

### **Deploy Automatically**

VibeFlow generates production-ready TypeScript code and integrates with your GitHub workflow. Your frontend connects seamlessly to powerful backend APIs that handle everything your app needs.

## Key Features

<AccordionGroup>
  <Accordion title="Visual Workflow Builder">
    Create backend logic by connecting visual nodes. The AI builds real TypeScript code. Drag, drop, and configure.
  </Accordion>

  <Accordion title="GitHub Integration">
    Automatic synchronization with your repository. All changes are tracked and version controlled.
  </Accordion>

  <Accordion title="AI Agent Nodes">
    Add AI-powered processing to your workflows. Connect to LLMs for intelligent automation, content generation, and decision-making.
  </Accordion>

  <Accordion title="15+ Integrations">
    Connect to Stripe, Slack, Twilio, Notion, Zoom, ElevenLabs, LinkedIn, and more, all configurable as drag-and-drop nodes.
  </Accordion>

  <Accordion title="Custom Domains & Design Systems">
    Deploy your app on a custom domain and use built-in design systems to keep your UI consistent.
  </Accordion>
</AccordionGroup>

## Frequently Asked Questions

<AccordionGroup>
  <Accordion title="What database and language does VibeFlow use?">
    VibeFlow is built with **TypeScript** and uses **Convex** as our real-time database solution, providing automatic syncing and powerful querying capabilities.
  </Accordion>

  <Accordion title="What integrations are supported?">
    VibeFlow supports **AI Agents, HTTP Requests, Stripe payments, Email (Resend), Webhooks, Cron jobs, MCP tools**, and 15+ third-party integrations including Slack, Twilio, LinkedIn, Notion, Zoom, ElevenLabs, and more.
  </Accordion>

  <Accordion title="Do you support mobile apps?">
    For now, VibeFlow focuses exclusively on **web applications**. Mobile app
    support is not currently available.
  </Accordion>

  <Accordion title="Can I migrate my existing data?">
    Yes! If you're a business with an existing project and data, we can help
    migrate your data to VibeFlow. Simply **contact us** to discuss your migration
    needs.
  </Accordion>

  <Accordion title="Can I use my own frontend?">
    Absolutely! You can bring your own frontend and connect it to VibeFlow's backend workflows. Our system is designed to work with any frontend framework or platform.
  </Accordion>
</AccordionGroup>

## Getting Started

Ready to build your first workflow?

<CardGroup>
  <Card title="Quick Start Guide" icon="play" href="/quickstart">
    Get your first workflow running in 5 minutes
  </Card>

  <Card title="Core Concepts" icon="lightbulb" href="/concepts">
    Understand workflows, nodes, and how everything connects
  </Card>
</CardGroup>

<Tip>
  **New to VibeFlow?** Start with our [Quick Start Guide](/quickstart) to create
  your first workflow, then explore the [Nodes Reference](/nodes) to see all
  available building blocks.
</Tip>


# Agent Node
Source: https://docs.vibeflow.ai/nodes/agent-node

AI-powered text/object generation with tool calling and MCP support

## Overview

The **Agent Node** runs LLM generation in the backend.
It supports:

* `generateText` for normal text responses
* `generateObject` for structured JSON output
* tool calling through the Agent `tools` connector
* MCP tool discovery through [MCP Node](/nodes/mcp-node)

## Required Configuration

### Basic

* **Label:** Display name for the node
* **Agent Name:** Unique identifier for the agent
* **Instructions:** System prompt
* **Instructions Mode:** `Fixed | From args | Expression`
* **Input Mode:** `Fixed | From args | Expression`
* **Input Value:** Typically `__full_result__` for upstream data

### Model & Operation

* **Operation:** `generateText | generateObject`
* **Base URL** (optional): OpenAI-compatible endpoint (`https://api.openai.com/v1` default)
* **API Key:** provider key (default env expected: `OPENAI_API_KEY`)
* **Chat Model:** model id string
* **Tool max steps:** from `toolConfig.maxSteps` (default `10`, used as `stepCountIs(10)`)

### Output Schema

* **Output Schema:** used only for `generateObject`.
* For `generateText`, output is plain text wrapped as:
  * `{ content: "<text>" }`

## Example Configurations

### Supported providers

The Agent Node supports a wide range of LLM providers through an OpenAI-compatible interface:

* **OpenAI** (default): `gpt-4o`, `gpt-4o-mini`, etc.
* **Anthropic (Claude):** `claude-sonnet-4-20250514`, etc.
* **Google AI (Gemini):** `gemini-2.0-flash`, etc.
* **Groq:** `llama-3.1-70b`, `mixtral-8x7b`, etc.
* **Mistral:** `mistral-large-latest`, etc.
* **xAI (Grok):** `grok-2`, etc.
* **DeepSeek:** `deepseek-chat`, etc.
* **OpenRouter:** any OpenRouter-supported chat model
* **Together AI:** open-source models hosted on Together
* And **15+ more providers**, including custom OpenAI-compatible endpoints

Each provider has a preset Base URL and expected API Key. For example:

**OpenAI (default)**

* Base URL: `https://api.openai.com/v1`
* API Key env: `OPENAI_API_KEY`

**Groq**

* Base URL: `https://api.groq.com/openai/v1`
* API Key: Groq dashboard key

**OpenRouter**

* Base URL: `https://openrouter.ai/api/v1`
* API Key: OpenRouter key

**MiniMax**

* Base URL: `https://api.minimax.chat/v1`
* API Key: MiniMax key
* Notes: temperature must be > 0, supports `abab6.5s-chat` and `abab5.5-chat`

### Agent config: generateText

```json theme={null}
{
  "nodeType": "agent",
  "label": "Support Agent",
  "agentName": "supportAgent",
  "operation": "generateText",
  "instructionsMode": "Fixed",
  "instructionsValue": "You are a helpful customer support assistant.",
  "inputMode": "From args",
  "inputValue": "__full_result__",
  "modelConfig": {
    "provider": "openai",
    "baseUrl": "https://api.openai.com/v1",
    "chatModel": "gpt-4o-mini",
    "temperature": 0.7,
    "maxTokens": 1000
  },
  "toolConfig": {
    "maxSteps": 10
  }
}
```

### Agent config: generateObject

```json theme={null}
{
  "nodeType": "agent",
  "label": "Lead Extractor",
  "agentName": "leadExtractor",
  "operation": "generateObject",
  "instructionsMode": "Fixed",
  "instructionsValue": "Extract lead details from the input.",
  "inputMode": "From args",
  "inputValue": "__full_result__",
  "modelConfig": {
    "provider": "openai",
    "baseUrl": "https://api.openai.com/v1",
    "chatModel": "gpt-4o-mini"
  },
  "outputSchema": {
    "type": "object",
    "properties": {
      "name": { "type": "string" },
      "email": { "type": "string" },
      "company": { "type": "string" }
    }
  }
}
```

### Tools + MCP wiring example

```json theme={null}
{
  "source": "agentNodeId",
  "sourceHandle": "tools",
  "target": "mcpNodeId",
  "targetHandle": "input"
}
```

MCP node example:

```json theme={null}
{
  "nodeType": "mcp",
  "label": "MCP Tools",
  "url": "https://mcp.exa.ai/mcp",
  "authType": "none",
  "bearerToken": ""
}
```

## Input Support

Agent input currently supports:

* `string`
* multimodal content arrays (including image parts)
* object payloads (converted to text/content parts when needed)

This allows passing direct user text, structured data, or image-enabled content.

## What Are Tools?

In Agent Node context, **tools** are callable actions the model can invoke while generating a response.

* The model decides when to call a tool based on your prompt and available tool definitions.
* A tool executes backend logic (query, mutation, http, code, mcp, etc.) and returns data.
* The returned data is fed back into the model so it can continue reasoning.
* Tool calls are bounded by `toolConfig.maxSteps` (default `10`).
* Tools edges are separate from normal execution edges; they define capability, not linear flow order.

## Tool Connector (Canonical)

Use the Agent `tools` handle for tools. The canonical edge shape is:

```json theme={null}
{
  "source": "agentNodeId",
  "sourceHandle": "tools",
  "target": "toolNodeId",
  "targetHandle": "input"
}
```

Tools edges are **not** part of the main execution chain. They are used only for model tool calls.

### Supported tool target node types

* `agentNode`
* `httpRequestNode`
* `queryNode`
* `mutationNode`
* `ifNode`
* `forLoopNode`
* `editFieldsNode`
* `codeNode`
* `emailNode`
* `stripeNode`
* `mcpNode`

Unsupported tool edges are removed during flow normalization.

## MCP Integration from Agent

You can attach one or more MCP nodes to Agent tools. At runtime:

* MCP client is created from MCP node URL/auth config
* MCP tools are discovered via `mcpClient.tools()`
* discovered tools are merged into the Agent toolset
* MCP clients are closed during cleanup/finalization

## Recommended Patterns

### 1) Basic chat flow

* `frontendElementNode -> agentNode -> returnNode`

### 2) Web-search-enabled agent

* `frontendElementNode -> agentNode -> returnNode`
* `agentNode.tools -> mcpNode.input` (Exa MCP or other MCP server)

### 3) Mixed custom + MCP tools

* `agentNode.tools -> queryNode.input`
* `agentNode.tools -> httpRequestNode.input`
* `agentNode.tools -> mcpNode.input`

## Notes

* Current generated runtime path is non-streaming in this phase.
* `generateObject` remains the structured-output operation in the node UI/model.
* Keep `toolConfig.maxSteps` high enough for multi-step tool reasoning.


# Code Node
Source: https://docs.vibeflow.ai/nodes/code-node

Write custom JavaScript code to transform data, perform calculations, or implement custom logic

## Overview

The **Code Node** lets you write custom JavaScript code that runs during your workflow. Use it when you need logic that goes beyond what other nodes offer: custom transformations, calculations, string manipulation, or any data processing that requires full programmatic control.

## Required Configuration

* **JavaScript Code:** The code to execute. Must include a `return` statement that defines the node's output.

## Optional Configuration

* **Label:** Display name for the node (defaults to "Code")
* **Requires Auth:** Whether this node needs user authentication (default: false)

## Accessing Data

Inside your code, use the `$()` function to reference data from other nodes:

* **`$("Node Label")`:** Access any previous node's output by its label
* **`$("startNode")`:** Access the original input from the frontend
* **`__user_id__`:** The authenticated user's ID (available when Requires Auth is enabled)

Your code must include a `return` statement. The returned value becomes the node's output.

```javascript theme={null}
// Example: transform data from a previous node
const data = $("Query Users");
const result = data.map(item => ({
  ...item,
  fullName: item.firstName + " " + item.lastName,
  processed: true
}));

return result;
```

## Connections

Code nodes fit anywhere in your workflow:

**Input from:** Any node type that produces data

**Output to:** Any node type that consumes data:

* Mutation nodes (save processed results)
* Query nodes (use computed values as parameters)
* HTTP Request nodes (build custom request payloads)
* Agent nodes (prepare structured input for AI)
* If-Else nodes (route based on computed values)
* Edit Fields nodes (further reshape output)
* Return nodes (end workflow with computed output)
* Other Code nodes (chain complex logic across steps)

## Common Use Cases

**Custom Data Transformation.** Reshape, merge, or filter data in ways that Edit Fields cannot express.

**Calculations and Aggregation.** Sum totals, compute averages, or derive new values from input data.

**String Processing.** Parse, format, or validate strings with full regex and string method support.

**Conditional Logic.** Apply complex branching or business rules that go beyond simple if-else checks.

### Example Workflows

* **Data Pipeline**: Query Node → Code (aggregate results) → Mutation (save summary)
* **API Integration**: HTTP Request → Code (parse and validate response) → Edit Fields (format output)
* **User Processing**: Form Input → Code (validate and transform) → If-Else (route by result)

## Related Nodes

<CardGroup>
  <Card title="Edit Fields Node" icon="pen-to-square" href="/nodes/edit-fields-node">
    Transform data with a visual field mapper
  </Card>

  <Card title="If-Else Node" icon="code-branch" href="/nodes/if-else-node">
    Route workflows based on conditions
  </Card>

  <Card title="For Loop Node" icon="rotate" href="/nodes/for-loop-node">
    Iterate over arrays of data
  </Card>

  <Card title="Return Node" icon="right-from-bracket" href="/nodes/return-node">
    End workflows with computed output
  </Card>
</CardGroup>


# Collection Node
Source: https://docs.vibeflow.ai/nodes/collection-node

Define database table schemas for your application data

## Overview

The **Collection Node** defines database table schemas. It specifies what data structure your tables will have, including field names, types, and validation rules.

<img alt="Collection Node configuration showing schema fields, types, and basic indexes" />

<Warning>
  Collection nodes define schemas only; they don't connect to other nodes. Other nodes reference collections by name.
</Warning>

## Required Configuration

### Table Name

The name of your database table (e.g., `users`, `products`, `orders`)

### Schema Fields

At least one field beyond the auto-generated `id` field. Each field needs:

* **Field Name:** Non-empty identifier
* **Field Type:** Select at least one data type
* **Required/Optional:** Must be explicitly set

## Optional Configuration

### Indexes

You can add **Basic Indexes** to speed up queries on specific fields. Each index is configured with a name and one or more fields from your schema.

Basic indexes allow faster lookup and sorting operations on the selected fields. Field order matters when configuring multi-field indexes.

## How to Use

1. **Create Collection Node.** Define your table schema.
2. **Reference by Name.** In Query/Mutation nodes, set the Collection field to your table name.
3. **No Direct Connections.** Collection nodes don't connect to other nodes.

## Related Nodes

<CardGroup>
  <Card title="Query Node" icon="search" href="/nodes/query-node">
    Read data from collections
  </Card>

  <Card title="Mutation Node" icon="edit" href="/nodes/mutation-node">
    Create, update, delete collection data
  </Card>
</CardGroup>


# Cron Node
Source: https://docs.vibeflow.ai/nodes/cron-node

Schedule workflows to run automatically at specific times

## Overview

The **Cron Node** is a powerful trigger node that automatically starts workflows on a schedule. It enables you to build automated tasks that run at specific intervals, from every second to monthly, without any manual intervention.

## Required Configuration

### Basic Settings

* **Label:** Display name for the node
* **Identifier:** Unique ID for this cron job (must be unique across your entire app)
* **Trigger Interval:** Schedule type: `custom`, `seconds`, `minutes`, `hours`, `days`, `weeks`, or `monthly`

### Schedule Configuration

The configuration varies based on your selected trigger interval:

#### Custom Cron Expression

* **Cron Expression:** Standard 5-part cron format: `minute hour day month weekday`
* Examples:
  * `0 0 * * *`: Daily at midnight UTC
  * `0 9 * * 1-5`: Weekdays at 9:00 AM UTC
  * `*/15 * * * *`: Every 15 minutes
  * `0 0 1 * *`: First day of each month at midnight

#### Seconds

* **Interval:** Number of seconds between runs (e.g., 30 = every 30 seconds)

#### Minutes

* **Interval:** Number of minutes between runs (e.g., 5 = every 5 minutes)

#### Hours

* **Days Interval:** Number of hours between runs
* **Trigger Minute** (Optional): Minute of the hour to run at

#### Days

* **Days Interval:** Number of days between runs
* **Trigger Hour:** Hour of the day (0-23, UTC)
* **Trigger Minute:** Minute of the hour (0-59)

#### Weeks

* **Trigger Hour:** Hour of the day (0-23, UTC)
* **Trigger Minute:** Minute of the hour (0-59)
* Runs every Monday by default

#### Monthly

* **Trigger Hour:** Hour of the day (0-23, UTC)
* **Trigger Minute:** Minute of the hour (0-59)
* Runs on the 1st of each month

## How It Works

### Step 1: Create the Trigger

Drag a Cron Node onto your canvas. This will be the starting point of your automated workflow.

### Step 2: Configure the Schedule

1. Set a unique identifier (e.g., "daily-cleanup" or "hourly-sync")
2. Choose your trigger interval type
3. Configure the specific timing based on your selected interval
4. Remember: all times are in UTC, not your local timezone

### Step 3: Build Your Workflow

Connect the Cron Node to other nodes to define what happens when the schedule triggers. Unlike Frontend Element nodes, cron jobs start with empty input data (`{}`).

## Important Notes

### UTC Timezone

All cron schedules run in UTC (Coordinated Universal Time), not your local timezone. Make sure to convert your desired local time to UTC:

* 9:00 AM PST = 5:00 PM UTC
* 9:00 AM EST = 2:00 PM UTC
* Use a timezone converter when setting up your schedules

### No Input Data

Unlike webhooks or frontend triggers, cron jobs don't receive any input data. To work with data in cron-triggered flows:

* Use fixed values in downstream nodes
* Query data from your collections
* Fetch data from external APIs using HTTP Request nodes

### No Return Node Needed

Cron flows are backend-only and run automatically. There's no caller waiting for a response. End your flows with:

* Mutation nodes (to save results)
* HTTP Request nodes (to call external APIs)
* Email/notification nodes

**Do NOT add Return nodes to cron flows.**

## Common Use Cases

### 1. Daily Data Cleanup

```
Cron (daily at midnight)
→ Query (fetch expired sessions)
→ Mutation (delete expired records)
```

Clean up old data every day to keep your database optimized.

### 2. Hourly External Sync

```
Cron (every hour)
→ HTTP Request (fetch latest data from API)
→ Mutation (save to database)
```

Keep your app synchronized with external data sources.

### 3. Weekly Reports

```
Cron (Monday at 9 AM UTC)
→ Query (fetch weekly metrics)
→ Agent (generate summary)
→ Mutation (save report)
```

Automatically generate and store weekly reports.

### 4. Batch Notifications

```
Cron (custom: "0 9 * * 1-5")
→ Query (fetch active users)
→ For Loop
  → HTTP Request (send reminder email)
```

Send scheduled reminders to users on weekdays.

### 5. Every 15 Minutes Check

```
Cron (*/15 * * * *)
→ Query (fetch pending tasks)
→ If-Else (check if overdue)
  → Mutation (update status)
```

Monitor and update task statuses frequently.

## Connections

Cron nodes are starting points for workflows. They have no inputs, only outputs.

**Output to:** Any node type:

* Query nodes (fetch data to process)
* Mutation nodes (perform scheduled updates)
* Agent nodes (AI-powered scheduled tasks)
* HTTP Request nodes (call external APIs)
* For Loop nodes (batch processing)
* If-Else nodes (conditional logic)

**Cannot connect to:**

* Frontend Element nodes (cron is backend-only)
* Return nodes (no caller to return to)

## Cron vs Other Triggers

| Feature         | Cron Node     | Frontend Element  | Webhook             |
| --------------- | ------------- | ----------------- | ------------------- |
| **Trigger**     | Time-based    | User action       | HTTP request        |
| **Input Data**  | None ()       | Form/UI data      | body/params/headers |
| **Runs When**   | On schedule   | On user click     | On API call         |
| **Environment** | Deployed only | Always            | Always              |
| **Return Node** | No            | Yes               | Yes                 |
| **Use Case**    | Automation    | User interactions | External events     |

## Related Nodes

<CardGroup>
  <Card title="Query Node" icon="search" href="/nodes/query-node">
    Fetch data to process on schedule
  </Card>

  <Card title="Mutation Node" icon="edit" href="/nodes/mutation-node">
    Save automated task results
  </Card>

  <Card title="HTTP Request Node" icon="globe" href="/nodes/http-request-node">
    Call external APIs on schedule
  </Card>

  <Card title="Agent Node" icon="robot" href="/nodes/agent-node">
    Run AI tasks automatically
  </Card>
</CardGroup>


# Edit Fields Node
Source: https://docs.vibeflow.ai/nodes/edit-fields-node

Transform and enrich data flowing between nodes

## Overview

The **Edit Fields Node** is your data transformer. It takes data from the previous node and lets you reshape, enrich, or filter it before sending it to the next node. Perfect for mapping API responses to database schemas, adding timestamps, flattening nested objects, or any scenario where you need to modify data structure.

<img alt="Edit Fields Node configuration showing field mappings with destination names, types, and value sources" />

## Required Configuration

* **Label:** Display name for the node
* **Fields:** The field transformations to apply (at least one required)
  * **Field Name:** Output field name (static or dynamic)
  * **Field Value:** Value to assign (from input data or fixed value)
  * **Value Type:** Data type: Auto, String, Number, Boolean, JSON

## Optional Configuration

* **Include Other Input Fields:** Merge transformed fields with original input (default: true)
* **Requires Auth:** Whether this node needs user authentication (default: false)
* **Convert Types:** Auto-convert between compatible types (default: true)

## How It Works

The Edit Fields node receives data from the previous node and transforms it according to your field mappings. You can:

* **Transform existing fields:** Rename or modify field values
* **Add new fields:** Include computed values, timestamps, status flags
* **Filter fields:** Only include specific fields in the output
* **Flatten data:** Extract nested fields to top level
* **Enrich data:** Combine input data with additional fixed values

## Field Configuration

### Value Sources

* **Fixed:** Static values you set directly
* **From args:** Dynamic values from the previous node's output
  * `"__full_result__"`: Reference the entire input
  * `"user.name"`: Access nested fields with dot notation
  * `"items[0].id"`: Access array elements with indices

### Include Other Fields

* **True:** Merge your transformed fields with all original input fields
* **False:** Only output the fields you explicitly define (useful for filtering)

## Connections

Edit Fields nodes fit anywhere in your workflow:

**Input from:** Any node type that produces data

**Output to:** Any node type that consumes data:

* Mutation nodes (save transformed data)
* Query nodes (use as search parameters)
* HTTP Request nodes (format API payloads)
* Agent nodes (prepare AI input)
* If-Else nodes (conditional logic on transformed data)
* Email/Resend nodes (send formatted notifications)
* Return nodes (end workflow with transformed output)
* Other Edit Fields nodes (chain transformations)
* For Loop nodes (batch process transformed data)

## Common Use Cases

**API Response Mapping:** Transform external API data to match your database schema

**Data Enrichment:** Add timestamps, user IDs, or computed fields to existing data

**Field Filtering:** Extract only needed fields from complex objects

**Data Flattening:** Convert nested objects to flat structure for storage

**Format Conversion:** Prepare data for specific node requirements

### Example Workflows

* **User Registration:** Form Data → Edit Fields (add timestamp) → Mutation (save user)
* **API Integration:** HTTP Request → Edit Fields (map response) → Mutation (store data)
* **AI Processing:** Agent Response → Edit Fields (structure output) → Display Results

## Related Nodes

<CardGroup>
  <Card title="Mutation Node" icon="pen-to-square" href="/nodes/mutation-node">
    Save your transformed data
  </Card>

  <Card title="Query Node" icon="database" href="/nodes/query-node">
    Use transformed data as search parameters
  </Card>

  <Card title="If-Else Node" icon="code-branch" href="/nodes/if-else-node">
    Add conditional logic to transformed data
  </Card>

  <Card title="Agent Node" icon="robot" href="/nodes/agent-node">
    Prepare structured input for AI processing
  </Card>

  <Card title="HTTP Request Node" icon="globe" href="/nodes/http-request-node">
    Format data for API calls
  </Card>

  <Card title="Email Node" icon="envelope" href="/nodes/email-node">
    Send formatted email notifications
  </Card>
</CardGroup>


# For Loop Node
Source: https://docs.vibeflow.ai/nodes/for-loop-node

Iterate over data and perform batch operations in your workflows

## Overview

The **For Loop Node** allows you to iterate over arrays or lists of data and perform the same operation on each item. Perfect for batch processing, sending multiple emails, creating multiple records, or any scenario where you need to repeat an action for each item in a collection.

<img alt="For Loop Node configuration showing execution mode, array source, timeout, and continue on error" />

## Required Configuration

* **Label:** Display name for the node
* **Loop Data Source:** The array/list to iterate over:
  * **From args:** Use data from previous node (most common)
  * **Fixed:** Static array you define

## Optional Configuration

* **Requires Auth:** Whether this node needs user authentication (default: false)
* **Batch Size:** Process items in batches rather than one by one

## How It Works

The For Loop node takes an array from the previous node and executes the connected workflow for each item in the array. Each iteration provides:

* **Current item data:** Accessible via your loop variable name
* **Loop index:** The current position in the array
* **Loop context:** Information about the iteration

The loop executes the connected nodes for each item, then collects all results when complete.

## Data Access in Loops

Inside the loop, each iteration receives one item from the array:

* **`__full_result__`:** Each iteration receives one complete item from the array

The connected nodes in the loop can access this data using the standard `${args.fieldName}` pattern or `${__full_result__}` to reference the current iteration's data.

## Connections

For Loop nodes have two output handles for different purposes:

**Input from:** Any node type that produces array data

**Loop Handle (Item Processing):** Connects to any node type to process individual items

**Done Handle (Result Aggregation):** Connects to any node type to process all collected results

## Common Use Cases

**Batch Data Processing.** Create or update multiple database records from a list.

**API Integration.** Make individual API calls for each item in a dataset.

**Content Generation.** Generate content for multiple items using AI.

**File Processing.** Process multiple files or documents.

**User Notifications.** Send notifications to multiple users.

## Related Nodes

<CardGroup>
  <Card title="Query Node" icon="database" href="/nodes/query-node">
    Fetch arrays of data to loop over
  </Card>

  <Card title="Mutation Node" icon="pen-to-square" href="/nodes/mutation-node">
    Perform operations on each loop item
  </Card>

  <Card title="If-Else Node" icon="code-branch" href="/nodes/if-else-node">
    Add conditional logic within loops
  </Card>

  <Card title="Edit Fields Node" icon="pen-ruler" href="/nodes/edit-fields-node">
    Transform data for each iteration
  </Card>
</CardGroup>


# Frontend Element Node
Source: https://docs.vibeflow.ai/nodes/frontend-element-node

Hook into your frontend to trigger backend workflows

## Overview

The **Frontend Element Node** is one of several ways to trigger a VibeFlow workflow. It connects user interactions in your frontend directly to your backend logic. Use it alongside other trigger options like Webhooks and Cron nodes depending on how you want your workflow to start.

## How It Works

The Frontend Element Node is a visual starting point for workflows triggered by your frontend. It represents the entry function that your frontend calls to kick off the workflow. No configuration needed, just drag it in and connect it to other nodes.

## Connections

Frontend Element nodes are one starting point for workflows. They have no inputs, only outputs.

**Output to:** Any node type:

* Query nodes (fetch and display data)
* Mutation nodes (save data)
* Agent nodes (AI processing)
* HTTP Request nodes (API calls)
* For Loop nodes (batch processing)
* If-Else nodes (conditional logic)

## Related Nodes

<CardGroup>
  <Card title="Query Node" icon="search" href="/nodes/query-node">
    Fetch data triggered by frontend interactions
  </Card>

  <Card title="Mutation Node" icon="edit" href="/nodes/mutation-node">
    Save data from frontend forms and inputs
  </Card>

  <Card title="If-Else Node" icon="code-branch" href="/nodes/if-else-node">
    Validate frontend data before processing
  </Card>

  <Card title="Agent Node" icon="robot" href="/nodes/agent-node">
    Process frontend data with AI
  </Card>
</CardGroup>


# HTTP Request Node
Source: https://docs.vibeflow.ai/nodes/http-request-node

Make HTTP requests to external APIs and services

## Overview

The **HTTP Request Node** allows you to make HTTP requests to external APIs and web services. Use it to integrate with third-party services, fetch external data, or call webhooks.

## Required Configuration

### URL

The endpoint URL to make the request to (supports dynamic values from previous nodes)

### HTTP Method

Choose the request method:

* **GET:** Retrieve data
* **POST:** Send data
* **PUT:** Update/create data
* **PATCH:** Partial updates
* **DELETE:** Remove data

## Optional Configuration

### Authentication

Support for various authentication methods:

* **None:** No authentication required
* **Bearer Token:** Authorization header token
* **API Key:** Custom header with API key
* **Basic Auth:** Username and password
* **Integration:** Use credentials from a connected integration in your Connectors settings

### Request Data

Configure what data to send:

* **URL Parameters:** Path parameters in the URL
* **Query Parameters:** URL query string parameters
* **Headers:** Custom HTTP headers
* **Request Body** (POST/PUT/PATCH only): Specify body using key-value fields or raw JSON

### Response Handling

* **Response Path:** Extract specific data from the response

## Connections

HTTP Request nodes can:

* **Receive input** from any node that produces data
* **Send output** to business logic, data processing, or frontend nodes

## Common Use Cases

**External API Integration:** Connect with payment processors, social media APIs, or data services

**Webhook Calls:** Trigger external systems when events occur in your workflow

**Data Enrichment:** Fetch additional information from external sources

**Third-party Services:** Integrate with CRMs, email services, or analytics platforms

### Example Workflows

* **AI Image Generation:** Frontend Element → Agent Node (generate prompt) → HTTP Request (DALL-E/Midjourney API) → Return Node
* **Telegram Bot Response:** Webhook Node → Agent Node (generate response) → HTTP Request (Telegram API) → Return Node

## Authentication Examples

### Bearer Token

```
Header: Authorization: Bearer your-api-token
```

### API Key

```
Header: X-API-Key: your-api-key
(Custom header name configurable)
```

### Basic Authentication

```
Username: your-username
Password: your-password
```

### Integration

Select a connected integration from your Connectors settings. Authentication is handled automatically using the integration's stored credentials.

## Related Nodes

<CardGroup>
  <Card title="Agent Node" icon="robot" href="/nodes/agent-node">
    Use AI to process HTTP request responses
  </Card>

  <Card title="If-Else Node" icon="git-branch" href="/nodes/if-else-node">
    Handle different response scenarios conditionally
  </Card>
</CardGroup>


# If-Else Node
Source: https://docs.vibeflow.ai/nodes/if-else-node

Add conditional logic and branching to your workflows

## Overview

The **If-Else Node** is your workflow's decision maker. It evaluates conditions and routes your flow down different paths based on whether those conditions are true or false. Perfect for user validation, permission checks, API response handling, and any scenario where your workflow needs to make smart decisions.

<img alt="If-Else Node configuration showing conditions, operators, and logic mode" />

## Required Configuration

* **Label:** Display name for the node
* **Conditions:** The logic rules to evaluate (at least one required)
  * **Left Value:** What you're checking (from previous node or fixed value)
  * **Operator:** How to compare: equals, greater\_than, contains, empty, exists, etc.
  * **Right Value:** What to compare against (when applicable)
* **Logic Mode:** How to combine multiple conditions
  * **All:** Every condition must be true (AND logic)
  * **Any:** At least one condition must be true (OR logic)
  * **Custom:** Write your own logic like "(1 AND 2) OR 3"

## Optional Configuration

* **Requires Auth:** Whether this node needs user authentication (default: false)
* **Convert Types:** Auto-convert strings to numbers/booleans for comparison (default: true)

## Connections

If-Else nodes connect to any node type and create two output paths:

**Input from:** Frontend Elements, Query/Mutation nodes, Agent nodes, other If-Else nodes

**Output to:**

* **True branch:** When conditions pass
* **False branch:** When conditions fail

Can connect to any node type including:

* Query nodes (fetch data based on conditions)
* Mutation nodes (save different data per branch)
* Agent nodes (AI processing based on conditions)
* HTTP Request nodes (different API calls per branch)
* Email/Resend nodes (send notifications based on conditions)
* Return nodes (end workflow with different outputs)
* Edit Fields nodes (transform data differently per branch)
* Other If-Else nodes (nested conditional logic)

## Common Use Cases

**User Validation.** Age verification, email format checks, required field validation.

**Permission Routing.** Admin vs user flows, subscription tiers, feature flags.

**API Response Handling.** Success vs error responses, status code routing.

**Error Handling.** Network failures, invalid data recovery, user-friendly fallbacks.

### Example Workflows

* **Form Validation**: Frontend Form → If-Else (age ≥ 18) → True: Create Account / False: Show Error
* **User Permissions**: Login → If-Else (role = admin) → True: Admin Panel / False: User Dashboard
* **Data Validation**: API Call → If-Else (status = success) → True: Process Data / False: Show Error

## Related Nodes

<CardGroup>
  <Card title="Frontend Element Node" icon="window" href="/nodes/frontend-element-node">
    Collect user input to evaluate
  </Card>

  <Card title="Query Node" icon="search" href="/nodes/query-node">
    Fetch data for condition checking
  </Card>

  <Card title="Agent Node" icon="robot" href="/nodes/agent-node">
    Use AI to make complex decisions
  </Card>

  <Card title="Mutation Node" icon="edit" href="/nodes/mutation-node">
    Store results from either branch
  </Card>

  <Card title="Edit Fields Node" icon="pen-ruler" href="/nodes/edit-fields-node">
    Transform data differently per branch
  </Card>

  <Card title="Email Node" icon="envelope" href="/nodes/email-node">
    Send notifications based on conditions
  </Card>
</CardGroup>


# MCP Node
Source: https://docs.vibeflow.ai/nodes/mcp-node

Attach external MCP tool servers to Agent tools

## Overview

The **MCP Node** lets an Agent use tools exposed by a remote MCP server.
It acts as a **tool provider**, not a normal execution step in the main flow.

## What Users Can Do

With MCP connected to an Agent, users can:

* call external tools exposed by an MCP server
* augment Agent responses with real-time/tool-backed data
* combine MCP tools with internal tools (query, mutation, http, code, etc.)

Common use cases:

* web search (for example Exa MCP)
* retrieval from external systems
* domain-specific tool catalogs exposed via MCP

## Required Configuration

* **Label:** display name
* **MCP URL:** server endpoint (required)
* **Auth Type:** `none | bearer`
* **Bearer Token:** optional/required depending on server auth

## Connection Rules (Canonical)

MCP must be connected through Agent tools using this direction:

```json theme={null}
{
  "source": "agentNodeId",
  "sourceHandle": "tools",
  "target": "mcpNodeId",
  "targetHandle": "input"
}
```

Rules:

* MCP should only be connected through Agent tools edges.
* MCP is not part of the primary execution dependency chain.
* Tools edges are separate from normal `input/output` orchestration edges.

## Runtime Behavior

When Agent runs:

1. MCP client is created using MCP URL/auth
2. tools are discovered from `mcpClient.tools()`
3. discovered MCP tools are merged into Agent tool map
4. MCP client is closed during finalization/cleanup

## Example: Exa MCP

* URL: `https://mcp.exa.ai/mcp`
* Auth Type: `none` (or `bearer` if your server requires token auth).
* Connect:
  * `agent.tools -> mcp.input`

## Example: MCP with Bearer Auth

MCP node:

```json theme={null}
{
  "nodeType": "mcp",
  "label": "Private MCP",
  "url": "https://your-private-mcp.com/mcp",
  "authType": "bearer",
  "bearerToken": "YOUR_MCP_BEARER_TOKEN"
}
```

Tools edge:

```json theme={null}
{
  "source": "agentNodeId",
  "sourceHandle": "tools",
  "target": "mcpNodeId",
  "targetHandle": "input"
}
```

Notes:

* Keep bearer token in environment/secret management; avoid hardcoding in shared templates.
* If your MCP token rotates, update node config and redeploy/re-generate as needed.

## Tips

* Keep Agent `toolConfig.maxSteps` sufficient for multi-step tool calls (default `10`).
* If old flows were created before canonical tools direction, reconnect MCP edges to match:
  * `sourceHandle: "tools"` on Agent
  * `targetHandle: "input"` on MCP


# Mutation Node
Source: https://docs.vibeflow.ai/nodes/mutation-node

Create, update, and delete data in your database collections

## Overview

The **Mutation Node** modifies data in your database collections. Use it to create new records, update existing ones, or delete data.

<img alt="Mutation Node configuration showing Insert mutation type with field mappings" />

## Required Configuration

### Collection Name

The name of the collection/table to modify (e.g., `users`, `products`)

### Mutation Type

Select one of:

* **Insert:** Create new records
* **Patch:** Update specific fields on an existing record
* **Delete:** Remove records

### Type-Specific Data

Each mutation type requires specific configuration:

* **Insert**: At least one field mapping (field name + value + mode)
* **Patch**: A **Document ID** to identify which record to update, plus at least one patch field (field name + value + mode). The Document ID supports Fixed, From args, and Expression value modes.
* **Delete**: A **Delete Scope** to choose between deleting a single document or an entire table

## Optional Configuration

* **Requires Auth:** Whether this node needs user authentication (default: false)

## Connections

Mutation nodes **produce data** (mutation results) and can connect to:

* Business logic nodes (Query, Agent)
* Frontend Element nodes (output results)

## Common Use Cases

**User Management.** Create new accounts, update profiles, or delete users.

**Content Management.** Add, edit, or remove posts, products, or other content.

**Data Processing.** Save form submissions, update preferences, or process transactions.

**Bulk Operations.** Create or update multiple records from imported data.

### Example Workflows

* **User Registration**: Frontend Element → If-Else (validation) → Mutation (Insert User) → Return Results
* **Profile Update**: Frontend Element → Mutation (Patch User) → Return Results
* **Data Import**: Frontend Element → For Loop → Mutation (Insert Records) → Return Results

## Related Nodes

<CardGroup>
  <Card title="Collection Node" icon="database" href="/nodes/collection-node">
    Define the database schema that mutations modify
  </Card>

  <Card title="Query Node" icon="search" href="/nodes/query-node">
    Read data from collections
  </Card>
</CardGroup>


# Query Node
Source: https://docs.vibeflow.ai/nodes/query-node

Fetch data from your database collections

## Overview

The **Query Node** fetches data from your database collections. Use it to retrieve user information, load products, or get any data your application needs.

<img alt="Query Node configuration showing collection selection, query type, and filter operators" />

## Required Configuration

### Collection Name

The name of the collection/table to query (e.g., `users`, `products`)

### Query Type

Select either:

* **Fetch Document:** Get a single record
* **Fetch Table:** Get multiple records

## Optional Configuration

* **Requires Auth:** Whether this node needs user authentication (default: false)
* **Operators:** Add filters, sorting, and indexing
* **Selectors:** Control how documents are returned from a Fetch Table query:
  * `collect`: Return all matching documents
  * `first`: Return only the first matching document
  * `take`: Return a limited number of documents (specify a count)
  * `paginate`: Return documents in pages (specify a page size)
  * `unique`: Return a single unique document

## Connections

Query nodes **produce data** and can connect to:

* Business logic nodes (Mutation, Agent)
* Frontend Element nodes (output results)

## Common Use Cases

**Data Display.** Load user profiles, product listings, or dashboard information.

**Search & Filter.** Find specific records based on user input or criteria.

**Data Validation.** Check if records exist before processing.

**Reporting.** Fetch data for analytics, reports, or summaries.

### Example Workflows

* **User Dashboard**: Frontend Element → Query User Data → Return Results
* **Product Search**: Frontend Element → Query Products → Edit Fields (filter) → Return Results
* **Data Validation**: Frontend Element → Query Existing Records → If-Else → Mutation

## Related Nodes

<CardGroup>
  <Card title="Collection Node" icon="database" href="/nodes/collection-node">
    Define the database schema that queries reference
  </Card>

  <Card title="Mutation Node" icon="edit" href="/nodes/mutation-node">
    Create, update, or delete data
  </Card>
</CardGroup>


# Email Node
Source: https://docs.vibeflow.ai/nodes/resend-node

Send transactional emails with Resend

## Overview

The **Email Node** integrates Resend email service into your workflows. Send transactional emails, notifications, and automated messages with dynamic content and personalization.

## Required Configuration

### Step 1: API Setup

**Resend API Key**

* Get your key from [resend.com/api-keys](https://resend.com/api-keys)
* Automatically validated when entered
* Format: `re_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx`

### Step 2: Email Configuration

**From Email** (Required)

* Sender email address
* Must be a verified domain in Resend
* Example: `noreply@yourdomain.com`

**To Email** (Required)

* Recipient email address
* Can be fixed or dynamic from connected nodes

**Body Content** (Required)

* Email message content
* Supports **HTML** or **Plain Text**
* Can include dynamic variables, see [How to Add Variables](#template-variables)
* Click **"Show Preview"** to see how your email will look to recipients

## Optional Configuration

**Display Name**

* Sender name shown in inbox e.g. "Your Company Name"

**Subject**

* Email subject line

## Value Input Modes

All fields support:

* **Fixed:** Static hardcoded values
* **From args:** Dynamic values from connected nodes or user input
* **Expression:** Complex value transformations and calculations

## Template Variables

**How to Add Variables:**

When you connect nodes to the Email Node, their outputs appear as **draggable variable pills** below the body editor:

1. **Drag & Drop:** Grab a variable pill and drag it directly into your template where you want it
2. **Click to Append:** Click a variable pill to add it at the end of your template
3. **Type Manually:** Type `${variableName}` syntax directly in the template

**Available Variables:**

* `${full_result}`: Complete output from the previous node
* `${NodeName.fieldName}`: Specific field from a connected node (e.g., `${Read Table 1.result}`)

**Example HTML Template:**

```html theme={null}
<h1>Welcome ${userName}!</h1>
<p>Your email: ${email}</p>
<p>Order total: ${orderTotal}</p>
```

**Example Plain Text Template:**

```
Welcome ${userName}!

Your email: ${email}
Order total: ${orderTotal}

Thanks for your purchase!
```

## Body Content Types

**HTML.** Full HTML formatting support

* Rich text formatting
* Images and links
* CSS styling
* Best for branded emails

**Plain Text.** Simple text-only emails

* No formatting
* Works on all email clients, including text-only readers
* Best for system notifications and maximum compatibility

## Testing

1. Sign up at [resend.com](https://resend.com) (free plan available)
2. Verify your sending domain in Resend dashboard
3. Get your API key from [resend.com/api-keys](https://resend.com/api-keys)
4. Configure your email node with the API key
5. Send a test email to yourself to verify everything works

## Connections

**Input Nodes:**

* Frontend Element nodes, to trigger emails with buttons
* Query nodes, to fetch user data or email content
* Other workflow nodes, to transform data before sending

**Output Nodes:**

* Mutation nodes, to log email sends to database
* Conditional nodes, to handle different outcomes
* Other workflow nodes, to continue workflow after email

## Related Nodes

<CardGroup>
  <Card title="Agent Node" icon="robot" href="/nodes/agent-node">
    Generate personalized email content with AI
  </Card>

  <Card title="Stripe Node" icon="credit-card" href="/nodes/stripe-node">
    Send payment and order confirmation emails
  </Card>
</CardGroup>


# Return Node
Source: https://docs.vibeflow.ai/nodes/return-node

End your workflows and define what data to send back

## Overview

The **Return Node** allows you to control exactly what data gets sent back to your frontend or calling system when the workflow completes. Use it when you need to format, transform, or customize the response from your workflow.

<Warning>
  **One per flow:** Each connected flow can only have one Return node to avoid conflicts.
</Warning>

## Required Configuration

* **Label:** Display name for the node
* **Response Type:** How to format the return data:
  * **All Incoming Items:** Return complete data from previous node (most common)
  * **Body:** Return specific data or transformed results
  * **Redirect:** Redirect to a URL
  * **No Data:** Return empty response for side-effect operations

## Optional Configuration

* **Requires Auth:** Whether this node needs user authentication (default: false)

### Response Type Details

**All Incoming Items** (Most Common)

* Returns the complete result from the previous node
* Perfect for queries, mutations, and API responses
* No additional configuration needed
* Use this when you want to pass through all the data

**Body**

* Return custom or transformed data
* Requires **Response Body** and **Value Mode**:
  * **Fixed:** Static text, numbers, or JSON objects
  * **Args:** Reference specific fields from previous nodes
  * **Expression:** JavaScript expressions for data transformation

**Redirect**

* Navigate to a different URL after workflow completion
* Requires **Redirect URL**
* Perfect for post-form submissions or payment flows

**No Data**

* Empty response for operations that don't need to return data
* Used for background tasks or simple confirmations

## Connections

Return nodes are workflow endpoints:

**Input from:** Any node type

**Output to:** None. Return nodes end the workflow.

## Common Use Cases

**Data Retrieval.** Return query results or fetched information using "All Incoming Items".

**Operation Results.** Return mutation outcomes (created, updated, deleted records) using "All Incoming Items".

**Custom Responses.** Return formatted messages, status updates, or transformed data using "Body".

**Post-Action Navigation.** Redirect users after successful operations using "Redirect".

**Background Tasks.** Signal completion without data using "No Data".

### Example Workflows

* **User List**: Frontend → Query Users → **Return (All Incoming Items)**
* **Create User**: Frontend → Mutation → **Return (All Incoming Items)**
* **Custom Message**: Frontend → Process → **Return (Body: "Operation successful")**
* **After Payment**: Frontend → Payment → **Return (Redirect: "/success")**

## Expression Examples

When using **Body** response type with **Expression** mode:

```javascript theme={null}
// Return just the names from a list
${__full_result__}.map(item => item.name)

// Count active items
${__full_result__}.filter(x => x.active).length

// Create summary object
({ 
  total: ${__full_result__}.length, 
  items: ${__full_result__}.map(x => x.title) 
})

// Get first item's specific field
${__full_result__}[0].email
```

## Related Nodes

<CardGroup>
  <Card title="Query Node" icon="database" href="/nodes/query-node">
    Fetch data to return to frontend
  </Card>

  <Card title="Mutation Node" icon="pen-to-square" href="/nodes/mutation-node">
    Create/update data and return results
  </Card>

  <Card title="Edit Fields Node" icon="pen-ruler" href="/nodes/edit-fields-node">
    Transform data before returning
  </Card>

  <Card title="Agent Node" icon="robot" href="/nodes/agent-node">
    Return AI-generated responses
  </Card>
</CardGroup>


# Stripe Node
Source: https://docs.vibeflow.ai/nodes/stripe-node

Accept payments and manage subscriptions with Stripe

## Overview

The **Stripe Node** integrates Stripe payment processing into your workflows. Handle one-time payments, recurring subscriptions, and subscription management with a simple configuration.

## Required Configuration

### Step 1: API Setup

**Node Label**

* Display name for this node (generates function name)

**Payment Type:** Select one:

* **One-time Payment:** Single payment checkout
* **Recurring (Subscription):** Subscription with recurring billing
* **Cancel Subscription:** Cancel an active subscription
* **Resume Subscription:** Resume a paused/canceled subscription
* **Customer Portal:** Generate link to Stripe's billing portal

**Stripe Secret Key** (for One-time & Recurring only)

* Get your key from [dashboard.stripe.com/apikeys](https://dashboard.stripe.com/apikeys)
* Automatically validated (shows Test/Live mode)

### Step 2: Payment Details

#### One-time Payment

**Required:**

* Amount (in cents, e.g., 1000 = \$10.00)
* Currency (40+ supported: USD, EUR, GBP, JPY, etc.)
* Product Name

**Optional:** Customer Email, Customer ID, Product ID

#### Recurring (Subscription)

**Required:**

* Customer Email

**Pricing (choose one):**

* **Price ID:** Use existing Stripe Price from your dashboard
* **OR define dynamically:**
  * Amount (in cents)
  * Currency
  * Billing Interval (day, week, month, year)

**Optional:** Interval Count, Trial Period Days, Customer ID, Product Name, Product ID

#### Cancel/Resume Subscription

**Required:**

* Subscription ID

#### Customer Portal

**Required:**

* Customer ID

### Value Input Modes

All fields support:

* **Fixed:** Static values
* **From args:** Dynamic values from connected nodes or user input
* **Expression:** Complex value transformations and calculations

## Output Slots

**One-time & Recurring Payments** have 3 outputs:

* **success:** Payment completed
* **failure:** Payment failed or declined
* **expired:** Session expired

**Cancel/Resume/Portal** have 1 output:

* **output:** Operation result

## Testing

**Important:** Open your app in a new tab to test. Stripe Checkout won't work in the preview iframe.

Use test mode key (`sk_test_...`) from your stripe account or Stripe's shared key to try it out:

* `sk_test_51SMQ2dIX0cvZzaSkHVbLxzXL2wzynIbUWfBVKfrV2Mr7npuWnhvtqpmyL45WYmBVMg9o3Pwzq0ts6YrrtUV6jzug00o42QMreJ`

Then use [test cards](https://stripe.com/docs/testing):

* Success: `4242 4242 4242 4242`
* Decline: `4000 0000 0000 0002`

## Connections

**Input Nodes:**

* Frontend Element nodes: Buttons to trigger payments
* Query nodes: Fetch pricing, customer data, or subscription IDs
* Other workflow nodes: Pre-payment actions (transform data, calculate amounts, etc.)

**Output Nodes:**

* Mutation nodes: Save payment records to database
* Conditional nodes: Route based on payment outcome
* Other workflow nodes: Post-payment actions (send emails, grant access, etc.)

## Related Nodes

<CardGroup>
  <Card title="Frontend Element Node" icon="mouse-pointer" href="/nodes/frontend-element-node">
    Trigger payments with buttons
  </Card>

  <Card title="Mutation Node" icon="database" href="/nodes/mutation-node">
    Save payment records
  </Card>
</CardGroup>


# Webhook Node
Source: https://docs.vibeflow.ai/nodes/webhook-node

Create REST API endpoints to trigger workflows from external services

## Overview

The **Webhook Node** is a powerful trigger node that starts workflows via REST API calls. It creates HTTP endpoints that external services, applications, or frontend clients can call to trigger automated workflows with data.

## Required Configuration

### Basic Settings

* **Label:** Display name for the node
* **Path:** URL path for the webhook endpoint (e.g., "/create-user", "/sync-data")
* **Method:** HTTP method: `POST`, `GET`, `PUT`, `PATCH`, or `DELETE`

### Authentication

Choose how to secure your webhook endpoint:

#### None

* No authentication required
* **Warning:** Anyone with the URL can trigger the workflow

#### Basic Auth

* **Username:** Required username for basic authentication
* **Password:** Required password for basic authentication
* Credentials sent in `Authorization` header as Base64-encoded `username:password`

#### Bearer Token

* **API Key:** Token value (leave empty, users fill in UI)
* **Environment Variable:** Variable name to store the token (e.g., "WEBHOOK\_API\_KEY")
* Sent as `Authorization: Bearer <token>`

#### Header Auth

* **Header Name:** Custom header name (e.g., "X-API-Key")
* **Prefix:** Optional prefix (e.g., "Bearer", "Token")
* **API Key:** Token value (leave empty, users fill in UI)
* **Environment Variable:** Variable name to store the token
* Sent as custom header: `X-API-Key: <token>` or `X-API-Key: Bearer <token>`

#### Query Parameter Auth

* **Query Parameter Name:** URL parameter name (e.g., "api\_key")
* **API Key:** Token value (leave empty, users fill in UI)
* **Environment Variable:** Variable name to store the token
* Added to URL: `?api_key=<token>`

### Response Mode

Control when the webhook responds to the caller:

* **immediately:** Return response right away (for async processing)
* **lastNode:** Wait for the entire workflow to finish before responding
* **onReceived:** Acknowledge receipt immediately, process asynchronously

## How It Works

### Step 1: Create the Trigger

Drag a Webhook Node onto your canvas. This will be the entry point for external API calls to your workflow.

### Step 2: Configure the Endpoint

1. Set the HTTP method (POST for data creation, GET for retrieval, etc.)
2. Define the webhook path (e.g., "/users/create")
3. Choose authentication method to secure the endpoint
4. Select response mode based on your use case

### Step 3: Build Your Workflow

Connect the Webhook Node to backend nodes (Query, Mutation, Agent, etc.) to process the incoming data.

### Step 4: Access Webhook Data

Use the `$"startNode"` reference to access incoming request data in downstream nodes.

## Accessing Webhook Data

The webhook is the starting node of your workflow. Use `$"startNode"` to access different parts of the HTTP request:

### 1. Request Body (POST/PUT/PATCH)

Access JSON body fields using `$"startNode".body.<field>`

**Example:** POST request with body `{ "name": "John", "email": "john@example.com" }`

```json theme={null}
// In a Mutation node field
{
  "field": "name",
  "mode": "From args",
  "value": "$\"startNode\".body.name"
}
```

### 2. Query Parameters (All Methods)

Access URL query parameters using `$"startNode".queryParams.<param>`

**Example:** GET request to `/users?status=active&limit=10`

```json theme={null}
// In a Query filter
{
  "field": "status",
  "operator": "==",
  "value": "$\"startNode\".queryParams.status",
  "valueMode": "From args"
}
```

### 3. URL Path Parameters

Access URL path variables using `$"startNode".params.<param>`

**Example:** PATCH request to `/users/:userId`

```json theme={null}
// In a Query filter to find the user
{
  "field": "_id",
  "operator": "==",
  "value": "$\"startNode\".params.userId",
  "valueMode": "From args"
}
```

### 4. Request Headers

Access HTTP headers using `$"startNode".headers.<header>` or `$"startNode".headers["header-name"]`

**Example:** Access custom request ID header

```json theme={null}
// In a Mutation field
{
  "field": "requestId",
  "mode": "From args",
  "value": "$\"startNode\".headers[\"x-request-id\"]"
}
```

### 5. HTTP Method

Access the HTTP method using `$"startNode".method`

**Example:** Conditional logic based on method

```json theme={null}
// In an If-Else condition
{
  "field": "$\"startNode\".method",
  "operator": "equals",
  "value": "POST"
}
```

## Common Use Cases

### 1. Create Resource from External Service

```
Webhook (POST /users)
→ Mutation (insert using $"startNode".body)
→ Return (respond with created user)
```

External service sends user data, workflow creates database record and returns result.

### 2. Query Data via API

```
Webhook (GET /users?status=active)
→ Query (filter by $"startNode".queryParams.status)
→ Return (respond with user list)
```

External service queries your data through REST API.

### 3. Update Resource with Path Parameters

```
Webhook (PATCH /users/:userId)
→ Query (find user by $"startNode".params.userId)
→ Mutation (patch with $"startNode".body)
→ Return (respond with updated user)
```

External service updates a specific resource by ID.

### 4. AI Processing from External Call

```
Webhook (POST /analyze)
→ Agent (process $"startNode".body.text)
→ Mutation (save analysis)
→ Return (respond with AI results)
```

External service triggers AI analysis and receives results.

### 5. Conditional Webhook Processing

```
Webhook (POST /event)
→ If-Else (check $"startNode".body.action)
  → [true: Create Mutation]
  → [false: Update Mutation]
→ Return
```

Route webhook requests to different operations based on data.

### 6. Batch Processing from API

```
Webhook (POST /batch)
→ For Loop ($"startNode".body.items)
  → Mutation (process each item)
→ Return (respond with results)
```

Process arrays of data sent via webhook.

### 7. Proxy to External API

```
Webhook (POST /sync)
→ HTTP Request (forward $"startNode".body to external API)
→ Return (respond with external API result)
```

Act as a proxy to transform or route requests to other services.

## Important Notes

### Webhook is a Start Node

Like Frontend Element and Cron nodes, webhooks are trigger nodes that start workflows. They have no inputs, only outputs.

### No Frontend Node Needed

Unlike Frontend Element flows, webhook flows are triggered by external HTTP requests, not user interactions. Do NOT create frontend nodes for webhook-triggered workflows.

### Security Best Practices

* Always use authentication for production webhooks
* Leave "API Key" field empty in configurations; users should provide credentials in the UI
* Store sensitive tokens in environment variables
* Use HTTPS URLs in production

### Response Modes Guide

* **immediately:** Best for async processing where caller doesn't need to wait
* **lastNode:** Best when caller needs the workflow result
* **onReceived:** Best for long-running workflows where caller just needs acknowledgment

### Unique Endpoints

Each webhook path represents a unique REST API endpoint. Use descriptive paths like:

* `/users/create`
* `/orders/webhook`
* `/sync/data`

## Connections

Webhook nodes are starting points for workflows. They have no inputs, only outputs.

**Output to:** Backend nodes:

* Query nodes (fetch data based on webhook input)
* Mutation nodes (create/update/delete based on webhook data)
* Agent nodes (AI processing of webhook data)
* HTTP Request nodes (forward to external APIs)
* For Loop nodes (batch process webhook arrays)
* If-Else nodes (conditional webhook logic)

**Must connect to:**

* Return node (to send response back to caller)

**Cannot connect to:**

* Frontend Element nodes (webhook is the trigger, not a UI element)

## Webhook vs Other Triggers

| Feature            | Webhook Node              | Frontend Element  | Cron Node     |
| ------------------ | ------------------------- | ----------------- | ------------- |
| **Trigger**        | HTTP request              | User action       | Time-based    |
| **Input Data**     | body/params/headers/query | Form/UI data      | None ()       |
| **Runs When**      | On API call               | On user click     | On schedule   |
| **Environment**    | Always                    | Always            | Deployed only |
| **Return Node**    | Yes                       | Yes               | No            |
| **Authentication** | Multiple types            | Session-based     | N/A           |
| **Use Case**       | External integrations     | User interactions | Automation    |

## Related Nodes

<CardGroup>
  <Card title="Query Node" icon="search" href="/nodes/query-node">
    Fetch data based on webhook input
  </Card>

  <Card title="Mutation Node" icon="edit" href="/nodes/mutation-node">
    Create/update data from webhooks
  </Card>

  <Card title="Return Node" icon="reply" href="/nodes/return-node">
    Send response back to webhook caller
  </Card>

  <Card title="HTTP Request Node" icon="globe" href="/nodes/http-request-node">
    Forward webhook data to external APIs
  </Card>
</CardGroup>


# Quick Start Guide
Source: https://docs.vibeflow.ai/quickstart

Build your first backend workflow in 5 minutes, powered by AI

## Welcome to VibeFlow!

This guide will show you how to create a complete backend workflow using just natural language prompts. In under 5 minutes, you'll have working APIs, a database, and AI processing, all built with real TypeScript.

<Note>
  **How it works:** VibeFlow's AI agent turns your description into
  production-ready TypeScript workflows. You can refine them visually or keep prompting.
</Note>

## What You'll Build

In this quickstart, you'll create a modern landing page with contact form by simply describing it. VibeFlow will automatically generate:

* Database to store contact submissions
* Form handling workflows
* AI-powered response generation
* Production-ready TypeScript code

## Prerequisites

You'll need:

* An app idea (or use our examples)
* 2 minutes of your time

That's it!

## Step 1: Create Your App

<Steps>
  <Step title="Sign in to VibeFlow">
    Visit [app.vibeflow.ai](https://app.vibeflow.ai) and sign in with your
    GitHub account.
  </Step>

  <Step title="Describe Your Workflow">
    In the chat interface, describe what you want to automate. Try this example: *"Build a customer support workflow: receive incoming requests via a form, use an AI agent to classify the request type (billing, technical, general), look up the customer in the database, then generate a tailored response based on their history and send it via email"*
  </Step>
</Steps>

## Step 2: Build Your Backend

The AI agent will start generating your backend based on your prompt. You'll see nodes appear on the canvas as it builds out the workflow: database collections, queries, mutations, and any logic your app needs.

You can refine things as you go:

* **Keep prompting** - ask the AI to adjust, add, or remove parts of the workflow
* **Edit visually** - drag nodes around, tweak configurations, and rewire connections directly on the canvas
* **Test as you build** - use [Flow Activation](/features/flow-activation) to run your workflow and verify it works

Once you're happy with the result, VibeFlow generates production-ready TypeScript and pushes it to your GitHub repository.

## Next Steps

Now that you've experienced VibeFlow's AI-powered backend creation, here's what to explore next:

<CardGroup>
  <Card title="Try More Complex Apps" icon="rocket" href="/concepts">
    Build e-commerce, social apps, or SaaS platforms with advanced prompts
  </Card>

  <Card title="Learn Manual Editing" icon="wrench" href="/using-the-editor">
    Fine-tune your workflows using the visual node editor
  </Card>
</CardGroup>


# Video Tutorials
Source: https://docs.vibeflow.ai/tutorials

Learn VibeFlow through step-by-step video tutorials

## Video Learning Center

Learn how to add AI capabilities to your applications with VibeFlow's AI Agent nodes.

<Note>
  **New to VibeFlow?** Start with our AI Agent tutorial below to see how you can
  enhance your existing applications.
</Note>

## Getting Started Videos

### Add an AI Agent to Your Lovable App (5 minutes)

Learn how to integrate AI capabilities into your Lovable-generated frontend using VibeFlow's AI Agent nodes.

<iframe title="Add an AI Agent to Your Lovable App" />

**What you'll learn:**

* Connecting your Lovable app to VibeFlow
* Setting up an AI Agent node
* Configuring different AI models
* Testing and deploying your AI-powered backend

**What you'll build:**

* AI-powered chat functionality
* Smart content generation
* Automated user interactions
* Real-time AI responses

***

## Request a Tutorial

Missing a tutorial for your specific use case? We create new content based on community requests.

<CardGroup>
  <Card title="Request Tutorial" icon="video" href="mailto:founders@vibeflow.ai?subject=Tutorial Request">
    Tell us what tutorial you'd like to see next
  </Card>

  <Card title="Submit Your Build" icon="share">
    Share your VibeFlow creation to be featured
  </Card>
</CardGroup>

***

## Stay Updated

* **Discord Community**: [Join discussions](https://discord.com/invite/Ctm2A2uEaq)

<Tip>
  **Learning Style Preference?** Some people learn better with videos, others
  with written guides. All our video content has corresponding written
  documentation, so choose what works best for you!
</Tip>

## Tutorial Support

Having trouble following a tutorial? Here's how to get help:

<AccordionGroup>
  <Accordion title="Community Help">
    Join our Discord community where fellow builders help each other with
    tutorials and projects.
  </Accordion>

  <Accordion title="Direct Support">
    Stuck on something specific? Email us directly and we'll help you get unstuck.
  </Accordion>
</AccordionGroup>

## Next Steps

<CardGroup>
  <Card title="Start Building" icon="play" href="/quickstart">
    Ready to try it yourself? Start with our written quick start guide
  </Card>

  <Card title="Join Community" icon="users" href="https://discord.com/invite/Ctm2A2uEaq">
    Connect with other builders and share your progress
  </Card>

  <Card title="Get Help" icon="question-circle" href="mailto:founders@vibeflow.ai">
    Need personalized help? Reach out to our team
  </Card>
</CardGroup>


# Using the Editor
Source: https://docs.vibeflow.ai/using-the-editor

Master VibeFlow's visual editor to build powerful backends without code

## The Visual Editor

VibeFlow's visual editor lets you build backend workflows by connecting nodes on a canvas. Right-click to add nodes, click to configure them, and connect them to implement your API endpoints.

## Editor Layout

### 1. Flow Canvas (Center)

The main workspace where you build your backend visually:

* Drag and drop nodes from the left sidebar
* Connect nodes by their handles to define your logic
* Right-click the canvas to open the context menu
* Click any node to configure it

### 2. Node Palette (Left Sidebar)

A categorized list of all available nodes. Drag nodes from here onto the canvas to add them to your workflow.

### 3. AI Chat (Left, Collapsible)

Describe what you want to build in natural language and let AI generate or modify your workflow. You can collapse this panel when you don't need it.

### 4. Tabbed Panel (Right)

A panel with multiple tabs for different tasks:

* **Code:** View and edit the generated source code
* **Preview:** Live preview of your running application with real-time updates
* **Additional tabs** for configuration and testing

### 5. Top Bar

Access your project name, collaboration settings, and the **Deploy** button from the top of the editor.

## Working with Nodes

### Adding Nodes

<Steps>
  <Step title="Right-Click Canvas">
    Right-click anywhere on the canvas to open the context menu with available
    nodes.
  </Step>

  <Step title="Choose Your Node">
    Select the node you need from the categorized context menu.
  </Step>

  <Step title="Configure Settings">
    Click the newly added node to configure its settings in the properties
    panel.
  </Step>
</Steps>

### Connecting Nodes

Nodes have connection handles that you use to implement your workflow.
To connect nodes:

1. Click and drag from a node's output handle
2. Drop on another node's input handle
3. The connection implements the workflow step

### Node Configuration

Nodes have two states:

* **Valid:** All required parameters are configured
* **Invalid:** Missing required configuration (shown with error indicators)

Click any node to configure its settings in the properties panel.

## Building Workflows

When you connect nodes, you're implementing the logic flow for a workflow. For example:

```
Frontend Element → Mutation → Return
```

This creates a workflow that:

1. Triggers from a frontend interaction
2. Executes database mutations
3. Returns the response

Other workflows might start with a Webhook node (for external API calls) or a Cron node (for scheduled tasks).

## Next Steps

<CardGroup>
  <Card title="Explore Node Types" icon="puzzle-piece" href="/nodes">
    Learn about all available nodes and their capabilities
  </Card>
</CardGroup>