Weaave - Visual AI Workflow Builder

A pixel-perfect clone of Weaave.ai — a visual workflow builder for LLM-powered automations. Built with React Flow, Google Gemini AI, and Trigger.dev.

Demo Video (App Walkthrough): https://drive.google.com/file/d/1nvQmwF1iAUaH0JjeI3jRUtwsZ-R7XV3T/view?usp=sharing

Workflow & Parallel Execution Explanation: https://www.loom.com/share/8477ddcaf092496b9cdf5df1c54947e7

The first video gives a full, user-friendly walkthrough of all sections of the app. The second video focuses specifically on the workflow logic and true parallel execution.

---

Table of Contents

• Features
• Tech Stack
• Getting Started
  • Prerequisites
  • Installation
• Environment Variables
• Project Structure
• Documentation
• License
• Connect with me

---

Features

• Visual Workflow Canvas — React Flow with drag & drop, panning, zooming, and minimap
• 6 Node Types — Text, Image Upload, Video Upload, LLM, Crop Image, Extract Frame
• AI-Powered Execution — Google Gemini API with vision support
• Background Processing — All node executions via Trigger.dev tasks (No client-side API calls)
• Workflow History — Full execution history with node-level details
• Real-time Status — Pulsating glow effect on running nodes
• Parallel Execution — Independent branches run concurrently via Trigger.dev
• Media Processing — Cloud-native video processing with FFmpeg on Trigger.dev (Crop, Extract Frame)
• Smart Timestamps — Extract frames using seconds or percentage (e.g., "50%")
• Robust Execution — Strict failure propagation and error handling
• File Uploads — Secure, scalable uploads via Transloadit
• Authentication — Clerk-powered user authentication
• Data Persistence — PostgreSQL with Prisma ORM

Tech Stack

Category	Technology
Framework	Next.js 16 (App Router)
Language	TypeScript
UI Library	React 19, React Flow
Styling	Tailwind CSS
State	Zustand
Database	PostgreSQL + Prisma
Auth	Clerk
AI	Google Gemini API
Background Jobs	Trigger.dev
Validation	Zod

Getting Started

Prerequisites

• Node.js 18+
• PostgreSQL database (Neon or Supabase)
• Clerk account
• Google AI Studio API key
• Trigger.dev account

Installation

# Clone the repository
git clone https://github.com/TuShArBhArDwA/weaave.git
cd weaave-clone

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env
# Fill in your API keys in .env (see .env.example for detailed instructions)

# Push database schema
npx prisma db push

# Run development server
npm run dev

# (In a separate terminal) Run Trigger.dev
npm run trigger:dev

Open http://localhost:3000 to view the app.

Environment Variables

See .env.example for detailed setup instructions.

Variable	Description	Get it from
DATABASE_URL	PostgreSQL connection string	Neon
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY	Clerk publishable key	Clerk
CLERK_SECRET_KEY	Clerk secret key	Clerk
GEMINI_API_KEY	Google Gemini API key	Google AI Studio
TRIGGER_SECRET_KEY	Trigger.dev secret key	Trigger.dev
NEXT_PUBLIC_TRANSLOADIT_AUTH_KEY	Transloadit Auth Key	Transloadit
NEXT_PUBLIC_TRANSLOADIT_TEMPLATE_ID	Transloadit Template ID	Transloadit

Project Structure

src/
├── app/                 # Next.js App Router pages
├── components/          # React components
│   └── workflow/        # Workflow canvas & nodes
├── lib/                 # Utilities & types
├── store/               # Zustand state management
├── trigger/             # Trigger.dev background tasks
└── prisma/              # Database schema

Documentation

Document	Description
High-Level Design (HLD)	System architecture, components, and data flow
Low-Level Design (LLD)	Database schema, API endpoints, and execution flow

License

MIT License - see LICENSE file for details.

Connect with me

If you'd like to connect, feel free to reach out — Click here