NextFlow

A pixel-perfect, high-fidelity visual node builder for orchestrating advanced LLM workflows.

---

🚀 Quick Links

• 📄 Technical Documentation — Deep dive into the architecture, DAG execution engine, and Trigger.dev implementation.
• 🎥 Demo Video (YouTube) — 3-5 minute walkthrough showcasing Auth, Dashboard, Workflow Canvas, parallel execution, and JSON import/export.
• 🌐 Live Demo (Vercel) (URL to be added upon deployment)

---

📖 Overview

NextFlow is a clone of the Galaxy.ai workflow builder, built exclusively for designing, managing, and executing multimodal AI pipelines. It provides a visual canvas where users can connect inputs, run heavy background tasks, and trigger Google's Gemini models with dynamic fan-out execution.

This project strictly adheres to a pixel-perfect design philosophy, ensuring the UI/UX precisely matches production-grade AI tools.

---

✨ Features

• Pixel-Perfect Galaxy.ai Clone: Matches UI/UX including layout, spacing, animations, edge styling, and interactions.
• React Flow Canvas: Dot grid, MiniMap, pan/zoom, fit-view, undo/redo, and animated edges.
• Pre-configured Canvas: Each workflow starts with Request-Inputs and Response nodes pre-placed.
• Dynamic Node System: Add Crop Image and Gemini 3.1 Pro nodes via a bottom-center picker.
• DAG Orchestration: True Directed Acyclic Graph execution — parallel siblings fire concurrently without blocking each other.
• Selective Execution: Supports full workflow, single-node, and multi-node runs.
• Visual Feedback: Real-time pulsating glow on executing nodes, synced seamlessly with backend task states.
• Background Execution: All heavy nodes (Crop Image, Gemini AI) run as durable, long-running tasks via Trigger.dev, ensuring serverless functions never time out.
• Crop Image Processing: FFmpeg-based cropping with a mandatory 30+ second processing delay.
• Multimodal AI: Full integration with Google Gemini, supporting text prompts, system instructions, and vision (image) inputs with inline responses.
• Type-Safe Connections: Prevents invalid links, disables manual inputs when connected, and enforces DAG rules.
• Workflow History Panel: View runs with status, duration, and expandable node-level logs.
• Authentication & Persistence: Secure access via Clerk, with all workflows and run logs stored in Neon PostgreSQL via Prisma ORM.
• Dashboard (CRUD): Create, open, rename, and delete workflows with ease.
• JSON Portability: Easily export and import complex workflows as JSON files.
• Robust API: Backend validation powered by Zod for type-safe, reliable requests.
• TypeScript (Strict Mode): Fully typed, scalable codebase throughout.
• Deployed on Vercel: Production-ready deployment with zero-config CI/CD.

---

🛠 Tech Stack

• Frontend: Next.js (App Router), React Flow, Tailwind CSS, Zustand
• Backend: PostgreSQL (Neon), Prisma ORM
• Auth: Clerk
• Task Orchestration: Trigger.dev v3
• File Processing: Transloadit, FFmpeg
• AI Models: Google Gemini API (@google/generative-ai)
• Validation: Zod, TypeScript (Strict)

---

⚙️ Local Development

1. Clone the repository:

   git clone https://github.com/YourUsername/nextflow-assignment.git
   cd nextflow-assignment

2. Install dependencies:

   npm install

3. Set up Environment Variables: Create a .env file based on .env.example and add your keys for Clerk, Gemini, Trigger.dev, Neon DB, and Transloadit.

4. Initialize Database:

   npx prisma generate
   npx prisma db push

5. Start the Development Servers: You must run both Next.js and Trigger.dev concurrently.

   Terminal 1 (Next.js):

   npm run dev

   Terminal 2 (Trigger.dev Worker):

   npx trigger.dev@latest dev

6. Open the App: Navigate to http://localhost:3000 to begin building workflows.

---

Built for the Galaxy.ai workflow builder assignment.