A powerful web scraping workflow automation platform built with Next.js 16. Create visual workflows to automate browser-based tasks, extract data with AI, and deliver results via webhooks.

• Visual Workflow Editor - Drag-and-drop interface using React Flow
• Scheduled Workflows - Cron-based scheduling with automatic execution
• Execution History - Track all workflow runs with detailed logs

• Launch Browser - Start automated browser sessions
• Page to HTML - Extract HTML content from pages
• Extract Text from Element - Get text using CSS selectors
• Fill Input - Automate form filling
• Click Element - Simulate user clicks
• Wait for Element - Wait for elements to appear
• Navigate URL - Navigate to different pages
• Scroll to Element - Scroll page to specific elements

• Extract Data with AI - Use Google Gemini to intelligently extract structured data
• Read/Add JSON Properties - Manipulate JSON data within workflows
• Deliver via Webhook - Send results to external services

• User Authentication - Secure login with Clerk
• Credits System - Pay-per-use billing with Stripe
• Credentials Vault - Securely store API keys and passwords (encrypted)
• Analytics Dashboard - Track workflow performance and credit usage

• Node.js >= 18.x
• npm or yarn or pnpm
• Stripe Account (for billing features)
• Clerk Account (for authentication)
• Google AI API Key (optional, for AI extraction features)

1. Clone the repository

   git clone https://github.com/ArunKushhhh/floww.git
   cd floww

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env.local file in the root directory:

   cp .env .env.local

   Then fill in the required values (see Environment Variables below).

4. Set up the database

   npx prisma generate
   npx prisma db push

5. Run the development server

   npm run dev

6. Open the app

   Visit http://localhost:3000 in your browser.

Create a .env.local file with the following variables:

Example:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxxxx
CLERK_SECRET_KEY=sk_test_xxxxx
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_SIGN_UP_FORCE_REDIRECT_URL=/setup

Example (SQLite - default):

DATABASE_URL="file:./prisma/dev.db"

Example:

NEXT_PUBLIC_APP_URL=http://localhost:3000
API_SECRET=your-random-api-secret-key
ENCRYPTION_KEY=your-64-character-hex-string
NEXT_PUBLIC_DEV_MODE=false

To generate an encryption key:

node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

Example:

STRIPE_SECRET_KEY=sk_test_xxxxx
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxxxx
STRIPE_WEBHOOK_SECRET=whsec_xxxxx
STRIPE_SMALL_PACK_PRICE_ID=price_xxxxx
STRIPE_MEDIUM_PACK_PRICE_ID=price_xxxxx
STRIPE_LARGE_PACK_PRICE_ID=price_xxxxx

Note: You need to create products and prices in your Stripe dashboard, then copy the price IDs here.

• Framework: Next.js 16 with App Router
• Language: TypeScript
• UI Components: Radix UI + shadcn/ui
• Styling: Tailwind CSS 4
• Database: Prisma ORM with SQLite (LibSQL adapter)
• Authentication: Clerk
• Payments: Stripe
• Workflow Editor: React Flow
• Browser Automation: Puppeteer
• AI: Google Gemini
• State Management: TanStack Query

floww/
├── app/                    # Next.js App Router
│   ├── (auth)/            # Authentication pages (sign-in, sign-up)
│   ├── (dashboard)/       # Dashboard pages
│   │   ├── billing/       # Billing & credits management
│   │   ├── credentials/   # Credentials vault
│   │   └── workflows/     # Workflow management
│   ├── api/               # API routes
│   │   ├── webhooks/      # Stripe webhooks
│   │   └── workflows/     # Workflow execution endpoints
│   ├── setup/             # User setup page
│   └── workflow/          # Workflow editor
├── actions/               # Server actions
│   ├── analytics/         # Analytics actions
│   ├── billing/           # Billing actions
│   ├── credentials/       # Credentials actions
│   └── workflows/         # Workflow actions
├── components/            # React components
├── hooks/                 # Custom React hooks
├── lib/                   # Utility libraries
│   ├── stripe/            # Stripe configuration
│   └── workflow/          # Workflow execution engine
├── prisma/                # Database schema & migrations
├── providers/             # React context providers
├── schemas/               # Zod validation schemas
├── types/                 # TypeScript type definitions
└── public/                # Static assets

Floww uses a credit-based billing system:

New users receive 100 free credits upon signup. Different tasks consume varying amounts of credits based on complexity.

• Credentials Encryption: All stored credentials are encrypted using AES-256-GCM
• Authentication: Secured with Clerk's enterprise-grade auth
• API Protection: Internal APIs are protected with secret key validation
• Webhook Verification: Stripe webhooks are verified using signatures

This project is private and proprietary.

Contributions are welcome! Please feel free to submit a Pull Request.

If you have any questions or need help, please open an issue in the repository.