Workflow Builder

Workflow Builder is a Next.js App Router based application that allows users to visually design, configure, and execute workflows using a drag-and-drop canvas.
It supports AI, image, and video processing workflows with background execution.

---

📌 What is this Project?

This project provides a node-based workflow editor where users can:

• Drag nodes onto a canvas
• Connect them to define execution flow
• Configure inputs for each node
• Execute workflows using background tasks

It is designed to demonstrate frontend architecture, workflow orchestration, and AI/media processing integration.

---

✨ Key Features

🔐 Authentication

• Secure user authentication using Clerk
• Protected access to the workflow builder

🧩 Workflow Builder

• Drag-and-drop canvas using React Flow
• Visual node connections
• Pan and zoom support

🧱 Available Nodes

• Text Node
  • Simple text input
• Upload Image Node
  • Upload and preview images (PNG, JPG, GIF)
• Upload Video Node
  • Upload and preview videos (MP4, MOV, AVI)
• Run Any LLM Node
  • Gemini AI integration
  • Accepts system prompt, user prompt, and images
• Crop Image Node
  • Crop images using percentage-based inputs
  • Executed using FFmpeg via Trigger.dev
• Extract Frame from Video Node
  • Extract a single frame using timestamp or frame number
  • Executed using FFmpeg via Trigger.dev

⚙️ Workflow Execution

• Background execution powered by Trigger.dev
• Execution status tracking:
  • Idle
  • Running
  • Completed
  • Error

📜 Workflow History

• Displays execution history for the current session
• Shows execution status and duration

📱 Responsive UI

• Desktop-first experience for workflow creation
• Mobile-responsive layout
• Touch-safe canvas interactions

---

🧠 How It Works

1. User logs in using Clerk authentication
2. User opens the Workflow Builder page
3. Nodes are dragged from the sidebar to the canvas
4. Nodes are connected to define execution order
5. Node inputs are configured
6. Clicking Run Workflow executes the workflow via Trigger.dev
7. Execution status and history are updated

---

🛠️ Tech Stack

Frontend

• Next.js 14+ (App Router)
• React
• TypeScript
• Tailwind CSS
• React Flow

Backend & Processing

• Trigger.dev (background tasks)
• FFmpeg (image & video processing)
• Google Gemini API (LLM execution)

Authentication & Database

• Clerk (Authentication)
• PostgreSQL
• Prisma ORM

---

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn
• Clerk account
• Trigger.dev account
• Google Gemini API key

---

Installation

1. Install dependencies:

npm install

2. Create .env.local in the project root:
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key

NEXT_PUBLIC_GEMINI_API_KEY=your_gemini_api_key

TRIGGER_PROJECT_ID=your_trigger_project_id
TRIGGER_SECRET_KEY=your_trigger_secret_key

3. Start Trigger.dev:
npx trigger.dev@latest dev

4. Start the development server:
npm run dev

5. Open the application:
http://localhost:3000