Dafthunk

Break it, fix it, prompt it, automatic, automatic, ...

A workflow execution platform built on top of the fantastic Cloudflare infrastructure.

🔍 Overview

Daf·thunk is a powerful, visual workflow automation platform that allows you to create, manage, and execute workflows directly in your browser. Built on Cloudflare's infrastructure, it leverages Cloudflare Workers and Workflows for serverless execution, Cloudflare AI for intelligent processing, and Cloudflare D1, R2, and KV for persistent storage.

The platform features a visual workflow editor built with React Flow, allowing you to create complex workflows by connecting various node types, including AI-powered nodes for text processing, image classification, and more. Think digital LEGO, but with less risk to your bare feet at 2 AM.

✨ Features

• Visual Workflow Editor: A drag-and-drop interface for creating and editing workflows that makes command-line enthusiasts mildly uncomfortable.
• AI-Powered Nodes: Leverage Cloudflare AI for text summarization, sentiment analysis, translation, image classification, audio transcription, image generation, and more.
• Serverless Execution: Run workflows on Cloudflare's global network using Cloudflare Workers, where servers are merely a philosophical concept.
• Live Monitoring: Watch your workflows succeed, fail, or do something in between, all live with a UI or an API.
• Persistent Storage: Save and load execution data from Cloudflare D1 and R2 with reasonable confidence that they'll still be there tomorrow.
• Triggers & Integrations: Nothing happens unless something happens. So you can make it happen with HTTP APIs, emails, and more.

🛠️ Technology Stack

Our collection of carefully selected technologies, guaranteed to be outdated by the time you read this:

Environment

• pnpm for fast and efficient package management with workspace support.
• TypeScript for static typing and enhanced developer experience.
• Vitest for unit and integration testing.
• Cloudflare for edge-optimized deployment and performance.

Backend

• Hono for lightweight, expressive REST API development.
• Cloudflare Workers for serverless function execution.
• Cloudflare D1 (SQLite) for database storage.
• Cloudflare R2 for object storage.
• Cloudflare AI for AI model inference.
• Drizzle ORM for type-safe database operations.
• Zod for runtime type validation.

Frontend

• Vite as the build tool and dev server for lightning-fast development.
• React 19 for building interactive user interfaces.
• React Router v7 for declarative client-side routing.
• React Flow (@xyflow/react) for rendering interactive node-based diagrams.
• Tailwind CSS for utility-first styling.
• shadcn/ui for headless, accessible component primitives.

🚀 Getting Started

📋 Prerequisites

• Node.js (v18 or later)
• pnpm (v8 or later)
• Cloudflare account with Workers, D1, R2, and AI access
• A reasonable amount of patience

💻 Installation

1. Clone the repository:

   git clone https://github.com/dafthunk-com/dafthunk.git
   cd dafthunk
   

2. Install dependencies:

   pnpm install
   

3. Set up environment variables:

   cp apps/api/.dev.vars.example apps/api/.dev.vars
   # Edit with custom values
   

   Generate a master key for token encryption:

   node apps/api/scripts/generate-master-key.js
   

   Required environment variables in apps/api/.dev.vars:

   WEB_HOST=http://localhost:3001
   CLOUDFLARE_ENV=development
   
   JWT_SECRET=your_32_character_secret_here
   SECRET_MASTER_KEY=your_64_character_hex_from_script
   

4. Configure authentication (OAuth providers for user login):

   GitHub OAuth:

   • Go to GitHub Settings > Developer settings > OAuth Apps
   • Create new OAuth App with:
     • Application Name: Dafthunk Dev
     • Homepage URL: http://localhost:3000
     • Authorization callback URL: http://localhost:3002/auth/login/github
   • Copy the Client ID and generate a new client secret
   • Add them to your .dev.vars file:

   GITHUB_CLIENT_ID=your_client_id_here
   GITHUB_CLIENT_SECRET=your_client_secret_here
   

   Google OAuth (optional):

   • Go to Google Cloud Console
   • Create a new OAuth 2.0 Client ID with:
     • Application type: Web application
     • Authorized redirect URIs: http://localhost:3002/auth/login/google
   • Copy the Client ID and Client Secret
   • Add them to your .dev.vars file:

   GOOGLE_CLIENT_ID=your_google_client_id
   GOOGLE_CLIENT_SECRET=your_google_client_secret
   

5. Configure integrations (OAuth providers for workflow integrations - optional):

   Google Mail Integration:

   • Go to Google Cloud Console
   • Create a separate OAuth 2.0 Client ID (or use a different project):
     • Application type: Web application
     • Authorized redirect URIs: http://localhost:3002/oauth/google-mail/connect
     • Enable Gmail API in API Library
   • Copy the Client ID and Client Secret
   • Add them to your .dev.vars file:

   INTEGRATION_GOOGLE_MAIL_CLIENT_ID=your_gmail_integration_client_id
   INTEGRATION_GOOGLE_MAIL_CLIENT_SECRET=your_gmail_integration_client_secret
   

   Google Calendar Integration:

   • Go to Google Cloud Console
   • Create a separate OAuth 2.0 Client ID (or use a different project):
     • Application type: Web application
     • Authorized redirect URIs: http://localhost:3002/oauth/google-calendar/connect
     • Enable Google Calendar API in API Library
   • Copy the Client ID and Client Secret
   • Add them to your .dev.vars file:

   INTEGRATION_GOOGLE_CALENDAR_CLIENT_ID=your_calendar_integration_client_id
   INTEGRATION_GOOGLE_CALENDAR_CLIENT_SECRET=your_calendar_integration_client_secret
   

   Discord Integration:

   • Go to Discord Developer Portal
   • Create a new application
   • Go to OAuth2 settings and add redirect URI:
     • Redirect URI: http://localhost:3002/oauth/discord/connect
   • Copy the Client ID and Client Secret from the OAuth2 page
   • Add them to your .dev.vars file:

   INTEGRATION_DISCORD_CLIENT_ID=your_discord_client_id
   INTEGRATION_DISCORD_CLIENT_SECRET=your_discord_client_secret
   

   Reddit Integration:

   • Go to Reddit App Preferences
   • Click "create another app..." at the bottom
   • Fill in the form:
     • Name: Dafthunk (or your app name)
     • App type: web app
     • Redirect URI: http://localhost:3002/oauth/reddit/connect
   • Click "create app"
   • Copy the Client ID (shown under the app name) and Client Secret
   • Add them to your .dev.vars file:

   INTEGRATION_REDDIT_CLIENT_ID=your_reddit_client_id
   INTEGRATION_REDDIT_CLIENT_SECRET=your_reddit_client_secret
   

   LinkedIn Integration:

   • Go to LinkedIn Developers
   • Create a new app
   • In the Auth tab, add redirect URL:
     • Redirect URL: http://localhost:3002/oauth/linkedin/connect
   • Request access to the "Sign In with LinkedIn using OpenID Connect" and "Share on LinkedIn" products
   • Copy the Client ID and Client Secret
   • Add them to your .dev.vars file:

   INTEGRATION_LINKEDIN_CLIENT_ID=your_linkedin_client_id
   INTEGRATION_LINKEDIN_CLIENT_SECRET=your_linkedin_client_secret
   

   GitHub Integration:

   • Go to GitHub Developer Settings
   • Click "New OAuth App"
   • Fill in the form:
     • Application name: Dafthunk (or your app name)
     • Homepage URL: http://localhost:3000
     • Authorization callback URL: http://localhost:3002/oauth/github/connect
   • Click "Register application"
   • Copy the Client ID and generate a Client Secret
   • Add them to your .dev.vars file:

   INTEGRATION_GITHUB_CLIENT_ID=your_github_client_id
   INTEGRATION_GITHUB_CLIENT_SECRET=your_github_client_secret
   

   Note: Keep authentication and integration OAuth apps separate for security isolation. They use different scopes and redirect URIs.

6. Create a Cloudflare account and login with Wrangler, a process that's almost as straightforward as it sounds:

   # Install Wrangler globally
   npm install -g wrangler
   
   # Login to Cloudflare
   wrangler login
   
   # Create a D1 database
   wrangler d1 create DB
   

7. Apply the database migration files

   cd apps/api
   pnpm db:migrate
   

8. Create a Cloudflare Queue for workflow messaging:

   # Create the queue
   wrangler queues create WORKFLOW_QUEUE
   

   After creating the queue, add the binding to apps/api/wrangler.jsonc:

   "queues": {
     "producers": [
       {
         "binding": "WORKFLOW_QUEUE",
         "queue": "WORKFLOW_QUEUE"
       }
     ],
     "consumers": [
       {
         "queue": "WORKFLOW_QUEUE",
         "max_batch_size": 10,
         "max_batch_timeout": 30
       }
     ]
   }
   

   Also add it to the production environment section (env.production).

   The queue enables asynchronous workflow execution through message triggers. When you publish a message to a queue using the Queue Publish node, workflows subscribed to that queue via queue triggers will be automatically executed.

   Queue Architecture:

   • Producer: The Queue Publish n