Workflow Builder

AI Workflow Builder Template

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.

[Image blocked: AI Workflow Builder Screenshot]

Deploy Your Own

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

What's Included

• 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

Getting Started

Prerequisites

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

Environment Variables

Create a .env.local file with the following:

1
# Database
2
DATABASE_URL=postgresql://user:password@localhost:5432/workflow_builder
3

4
# Better Auth
5
BETTER_AUTH_SECRET=your-secret-key
6
BETTER_AUTH_URL=http://localhost:3000
7

8
# AI Gateway (for AI workflow generation)
9
AI_GATEWAY_API_KEY=your-openai-api-key

Installation

1
# Install dependencies
2
pnpm install
3

4
# Run database migrations
5
pnpm db:push
6

7
# Start development server
8
pnpm dev

Visit http://localhost:3000 to get started.

Workflow Types

Trigger Nodes

• Webhook
• Schedule
• Manual
• Database Event

Action Nodes

• AI Gateway: Generate Text, Generate Image
• Blob: Put Blob, List Blobs
• Clerk: Get User, Create User, Update User, Delete User
• fal.ai: Generate Image, Generate Video, Upscale Image, Remove Background, Image to Image
• Firecrawl: Scrape URL, Search Web
• GitHub: Create Issue, List Issues, Get Issue, Update Issue
• Linear: Create Ticket, Find Issues
• Perplexity: Search Web, Ask Question, Research Topic
• Resend: Send Email
• Slack: Send Slack Message
• Stripe: Create Customer, Get Customer, Create Invoice
• Superagent: Guard, Redact
• v0: Create Chat, Send Message
• Webflow: List Sites, Get Site, Publish Site

Code Generation

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

1
export async function welcome(email: string, name: string, plan: string) {
2
  "use workflow";
3

4
  const { subject, body } = await generateEmail({
5
    name,
6
    plan,
7
  });
8

9
  const { status } = await sendEmail({
10
    to: email,
11
    subject,
12
    body,
13
  });
14

15
  return { status, subject, body };
16
}

Generate Code for a Workflow

1
# Via API
2
GET /api/workflows/{id}/generate-code

The generated code includes:

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

API Endpoints

Workflow Management

• 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

Workflow Execution

• 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

Code Generation

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

AI Generation

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

Database Schema

Tables

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

Development

Scripts

1
# Development
2
pnpm dev
3

4
# Build
5
pnpm build
6

7
# Type checking
8
pnpm type-check
9

10
# Linting
11
pnpm check
12

13
# Formatting
14
pnpm fix
15

16
# Database
17
pnpm db:generate  # Generate migrations
18
pnpm db:push      # Push schema to database
19
pnpm db:studio    # Open Drizzle Studio

Integrations

Resend (Email)

Send transactional emails with Resend's API.

1
import { sendEmail } from "@/lib/integrations/resend";
2

3
await sendEmail({
4
  to: "user@example.com",
5
  subject: "Welcome!",
6
  body: "Welcome to our platform",
7
});

Linear (Tickets)

Create and manage Linear issues.

1
import { createTicket } from "@/lib/integrations/linear";
2

3
await createTicket({
4
  title: "Bug Report",
5
  description: "Something is broken",
6
  priority: 1,
7
});

PostgreSQL

Direct database access for queries and updates.

1
import { queryData } from "@/lib/integrations/database";
2

3
await queryData("users", { email: "user@example.com" });

External APIs

Make HTTP requests to any API.

1
import { callApi } from "@/lib/integrations/api";
2

3
await callApi({
4
  url: "https://api.example.com/endpoint",
5
  method: "POST",
6
  body: { data: "value" },
7
});

Firecrawl (Web Scraping)

Scrape websites and search the web with Firecrawl.

1
import {
2
  firecrawlScrapeStep,
3
  firecrawlSearchStep,
4
} from "@/lib/steps/firecrawl";
5

6
// Scrape a URL
7
const scrapeResult = await firecrawlScrapeStep({
8
  url: "https://example.com",
9
  formats: ["markdown"],
10
});
11

12
// Search the web
13
const searchResult = await firecrawlSearchStep({
14
  query: "AI workflow builders",
15
  limit: 5,
16
});

Tech Stack

• 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)

About Workflow DevKit

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 at useworkflow.dev

License

Apache 2.0