Repository files navigation

A template for building your own AI-driven workflow automation platform. Built on top of Workflow DevKit, this template provides a complete visual workflow builder with real integrations and code generation capabilities.

You can deploy your own version of the workflow builder to Vercel with one click:

What happens during deployment:

• Automatic Database Setup: A Neon Postgres database is automatically created and connected to your project
• Environment Configuration: You'll be prompted to provide required environment variables (Better Auth credentials and AI Gateway API key)
• Ready to Use: After deployment, you can start building workflows immediately

• Visual Workflow Builder - Drag-and-drop interface powered by React Flow
• Workflow DevKit Integration - Built on top of Workflow DevKit for powerful execution capabilities
• Real Integrations - Connect to Resend (emails), Linear (tickets), Slack, PostgreSQL, and external APIs
• Code Generation - Convert workflows to executable TypeScript with"use workflow" directive
• Execution Tracking - Monitor workflow runs with detailed logs
• Authentication - Secure user authentication with Better Auth
• AI-Powered - Generate workflows from natural language descriptions using OpenAI
• Database - PostgreSQL with Drizzle ORM for type-safe database access
• Modern UI - Beautiful shadcn/ui components with dark mode support

• Node.js 18+
• PostgreSQL database
• pnpm package manager

Create a.env.local file with the following:

# DatabaseDATABASE_URL=postgresql://user:password@localhost:5432/workflow_builder# Better AuthBETTER_AUTH_SECRET=your-secret-keyBETTER_AUTH_URL=http://localhost:3000# AI Gateway (for AI workflow generation)AI_GATEWAY_API_KEY=your-openai-api-key

# Install dependenciespnpm install# Run database migrationspnpm db:push# Start development serverpnpm dev

Visithttp://localhost:3000 to get started.

• Webhook
• Schedule
• Manual
• Database Event

• AI Gateway: Generate Text, Generate Image
• Firecrawl: Scrape URL, Search Web
• Linear: Create Ticket, Find Issues
• Resend: Send Email
• Slack: Send Slack Message
• v0: Create Chat, Send Message

Workflows can be converted to executable TypeScript code with the"use workflow" directive:

exportasyncfunctionwelcome(email:string,name:string,plan:string){"use workflow";const{ subject, body}=awaitgenerateEmail({    name,    plan,});const{ status}=awaitsendEmail({to:email,    subject,    body,});return{ status, subject, body};}

# Via APIGET /api/workflows/{id}/generate-code

The generated code includes:

• Type-safe TypeScript
• Real integration calls
• Error handling
• Execution logging

• GET /api/workflows - List all workflows
• POST /api/workflows - Create a new workflow
• GET /api/workflows/{id} - Get workflow by ID
• PUT /api/workflows/{id} - Update workflow
• DELETE /api/workflows/{id} - Delete workflow

• POST /api/workflows/{id}/execute - Execute a workflow
• GET /api/workflows/{id}/executions - Get execution history
• GET /api/workflows/executions/{executionId}/logs - Get detailed execution logs

• GET /api/workflows/{id}/generate-code - Generate TypeScript code
• POST /api/workflows/{id}/generate-code - Generate with custom options

• POST /api/ai/generate-workflow - Generate workflow from prompt

• user - User accounts
• session - User sessions
• workflows - Workflow definitions
• workflow_executions - Execution history
• workflow_execution_logs - Detailed node execution logs

# Developmentpnpm dev# Buildpnpm build# Type checkingpnpm type-check# Lintingpnpm check# Formattingpnpm fix# Databasepnpm db:generate# Generate migrationspnpm db:push# Push schema to databasepnpm db:studio# Open Drizzle Studio

Send transactional emails with Resend's API.

import{sendEmail}from"@/lib/integrations/resend";awaitsendEmail({to:"user@example.com",subject:"Welcome!",body:"Welcome to our platform",});

Create and manage Linear issues.

import{createTicket}from"@/lib/integrations/linear";awaitcreateTicket({title:"Bug Report",description:"Something is broken",priority:1,});

Direct database access for queries and updates.

import{queryData}from"@/lib/integrations/database";awaitqueryData("users",{email:"user@example.com"});

Make HTTP requests to any API.

import{callApi}from"@/lib/integrations/api";awaitcallApi({url:"https://api.example.com/endpoint",method:"POST",body:{data:"value"},});

Scrape websites and search the web with Firecrawl.

import{firecrawlScrapeStep,firecrawlSearchStep,}from"@/lib/steps/firecrawl";// Scrape a URLconstscrapeResult=awaitfirecrawlScrapeStep({url:"https://example.com",formats:["markdown"],});// Search the webconstsearchResult=awaitfirecrawlSearchStep({query:"AI workflow builders",limit:5,});

• Framework: Next.js 16 with React 19
• Workflow Engine: Workflow DevKit
• UI: shadcn/ui with Tailwind CSS
• State Management: Jotai
• Database: PostgreSQL with Drizzle ORM
• Authentication: Better Auth
• Code Editor: Monaco Editor
• Workflow Canvas: React Flow
• AI: OpenAI GPT-5
• Type Checking: TypeScript
• Code Quality: Ultracite (formatter + linter)

This template is built on top of Workflow DevKit, a powerful workflow execution engine that enables:

• Native TypeScript workflow definitions with"use workflow" directive
• Type-safe workflow execution
• Automatic code generation from visual workflows
• Built-in logging and error handling
• Serverless deployment support

Learn more about Workflow DevKit atworkflow.dev

Apache 2.0