NextFlow — AI Workflow Builder

A visual AI workflow builder inspired by Galaxy.ai. Build, connect, and execute multi-step AI pipelines using a drag-and-drop canvas.

Live Demo: https://nextflow-umber-iota.vercel.app

---

What it does

NextFlow lets you visually chain AI tasks together. You drag nodes onto a canvas, connect them with typed edges, and hit Run — the engine executes the DAG in topological order, with background tasks handled by Trigger.dev.

A pre-built Trial Task Workflow demonstrates the full pipeline:

• Upload a product image → crop two regions via Cloudinary
• Feed a product description into Gemini → generate marketing copy
• Chain outputs into a second Gemini node → condense to a tweet
• Combine everything in a final Gemini node → complete social media post
• Collect the result in the Response node

---

Tech stack

Layer	Technology
Framework	Next.js 16 (App Router, Turbopack)
Auth	Clerk v7
Database	Neon PostgreSQL + Prisma 5
Canvas	ReactFlow 11
State	Zustand 5
Background tasks	Trigger.dev 4.4.5
AI	Google Gemini 1.5 Flash / Pro
Image processing	Cloudinary
Validation	Zod 4
Styling	Tailwind CSS v4
Deployment	Vercel

---

Features

Canvas

• Drag-and-drop node placement
• Typed handles — image (orange) and text (blue) handles enforce compatible connections
• Visual rejection toast when incompatible handles are dragged together
• DAG cycle detection — prevents circular connections
• Animated purple edges
• Dot-grid background, MiniMap, zoom/pan controls
• Keyboard shortcuts: Delete removes nodes, Ctrl+Z / Ctrl+Shift+Z undo/redo

Nodes

• Request-Inputs — add text fields and image upload fields (Cloudinary); cannot be deleted
• Crop Image — x/y/width/height sliders with percentage-based Cloudinary cropping; shows output image preview after run
• Gemini — model selector (Flash/Pro), system prompt, temperature; shows response inline after run
• Response — collects final output; cannot be deleted

Execution

• Run — executes the full DAG (BFS level-by-level, concurrent within each level)
• Run Selected — executes only selected nodes as a subgraph
• Pulsating glow on executing nodes
• Crop Image tasks have a mandatory 30-second Trigger.dev background delay
• Inline output displayed on each node after completion

Persistence & UX

• Auto-save to database (debounced 1 second)
• Run History panel — per-run tree view with node status, duration, output preview
• Export / Import workflow as JSON
• Dashboard with create, rename, delete workflows

---

Project structure

app/
  (auth)/           Clerk sign-in and sign-up pages
  api/
    workflows/      CRUD for workflows
    runs/           Workflow run records
    node-runs/      Per-node execution records
    trigger/        Routes that invoke Trigger.dev tasks
    upload/         Cloudinary image upload
  dashboard/        Workflow list page (server component)
  workflow/[id]/    Canvas page (server component)

components/
  canvas/
    WorkflowCanvas.tsx   ReactFlow canvas, execution engine wiring
    HistoryPanel.tsx     Run history sidebar
  nodes/
    RequestInputsNode.tsx
    CropImageNode.tsx
    GeminiNode.tsx
    ResponseNode.tsx
  dashboard/
    DashboardClient.tsx

lib/
  prisma.ts            Singleton Prisma client
  executeWorkflow.ts   BFS DAG executor with cycle detection

store/
  workflowStore.ts     Zustand store — nodes, edges, undo/redo, run state

trigger/
  cropImage.ts         Trigger.dev task — 30s wait + Cloudinary crop
  geminiTask.ts        Trigger.dev task — Gemini multimodal generation

prisma/
  schema.prisma        Workflow, WorkflowRun, NodeRun models

---

Running locally

# Install dependencies
npm install

# Set environment variables (copy and fill .env.local)
cp .env.example .env.local

# Push database schema
npx prisma db push

# Terminal 1 — Next.js dev server
npm run dev

# Terminal 2 — Trigger.dev local worker
npx trigger.dev@latest dev

Required environment variables

# Clerk
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard

# Neon PostgreSQL
DATABASE_URL=

# Google Gemini
GEMINI_API_KEY=

# Trigger.dev
TRIGGER_SECRET_KEY=

# Cloudinary
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=

---

Database schema

Workflow    { id, userId, name, data Json, createdAt, updatedAt }
WorkflowRun { id, workflowId, status, scope, startedAt, finishedAt }
NodeRun     { id, runId, nodeId, nodeType, status, inputs, output, errorMsg, durationMs }

---

Deployment

Deployed on Vercel with prisma generate running as part of the build step ("build": "prisma generate && next build").

Trigger.dev tasks are deployed separately via npx trigger.dev@latest deploy.