> ## Documentation Index
> Fetch the complete documentation index at: https://docs.vibeflow.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# 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 cols={2}>
  <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>