Workflow Builder

A pixel-perfect clone of Weavy.ai workflow builder, focused on LLM workflows with Google Gemini API integration.

🚀 Quick Start

1. Install Dependencies

npm install
# or
pnpm install

2. Set Up Environment Variables

Copy the example environment file:

cp .env.local.example .env.local

Then edit .env.local and add your API keys:

• Clerk (for authentication): Get keys from Clerk Dashboard
• Google Gemini (for LLM): Get key from Google AI Studio
• Database: Set up PostgreSQL (use Supabase or Neon for free tier)
• Trigger.dev (for node execution): Get keys from Trigger.dev
• Transloadit (for file uploads): Get keys from Transloadit

Note: For development, you can run without Clerk keys - the app will work but authentication will be disabled.

3. Set Up Database (Optional for now)

# Generate Prisma client
npx prisma generate

# Run migrations (when database is set up)
npx prisma migrate dev

4. Run Development Server

npm run dev

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

📋 Features

• ✅ Pixel-perfect UI matching Weavy.ai
• ✅ 6 Node Types: Text, Image Upload, Video Upload, LLM, Crop Image, Extract Frame
• ✅ DAG validation (no circular dependencies)
• ✅ Type-safe connections
• ✅ Undo/Redo functionality
• ✅ Keyboard shortcuts (Delete/Backspace)
• ✅ Workflow export/import (JSON)
• ✅ Connected input state
• ✅ Workflow history with node-level details
• ✅ Clerk authentication (optional in dev)

🛠️ Tech Stack

• Next.js 16 - React framework with App Router
• TypeScript - Type safety
• React Flow - Workflow canvas
• Zustand - State management
• Prisma - Database ORM
• Clerk - Authentication
• Tailwind CSS - Styling
• Zod - Schema validation

📁 Project Structure

workflow-builder-app/
├── app/
│   ├── api/          # API routes
│   ├── editor/       # Workflow editor page
│   └── layout.tsx    # Root layout
├── components/
│   ├── nodes/        # Node components
│   ├── ui/           # UI components
│   └── ...
├── lib/
│   ├── workflow-store.ts    # Zustand store
│   ├── connection-utils.ts  # Type-safe connections
│   └── workflow-utils.ts   # DAG validation
└── prisma/
    └── schema.prisma        # Database schema

🔧 Development

Without Authentication (Quick Start)

The app can run without Clerk keys in development mode. Just skip the Clerk environment variables and the app will work (without auth protection).

With Full Features

1. Set up Clerk account and add keys to .env.local
2. Set up PostgreSQL database and add DATABASE_URL
3. Set up Trigger.dev for node execution
4. Set up Transloadit for file uploads

📝 API Routes

• GET /api/workflows - List workflows
• POST /api/workflows - Create workflow
• GET /api/workflows/[id] - Get workflow
• PUT /api/workflows/[id] - Update workflow
• DELETE /api/workflows/[id] - Delete workflow
• GET /api/runs - List workflow runs
• POST /api/runs - Create workflow run

🐛 Troubleshooting

Clerk Errors

If you see Clerk errors, either:

1. Add Clerk keys to .env.local, or
2. The app will work in development mode without auth

Port Already in Use

# Kill process on port 3000
lsof -ti:3000 | xargs kill -9

# Or use a different port
PORT=3001 npm run dev

Lock File Issues

# Remove lock and rebuild
rm -rf .next
npm run dev

📚 Documentation

See IMPLEMENTATION_STATUS.md for detailed implementation status.

🎯 Next Steps

1. Set up Trigger.dev for node execution
2. Integrate Transloadit for file uploads
3. Connect to PostgreSQL database
4. Deploy to Vercel

📄 License

MIT