Workflow Builder Template

Note

This is a fork of Vercel's Workflow Builder Template that replaces manually-coded integrations with Membrane-powered actions.

Key differences: Instead of manually baking integration logic into the app, this fork uses Membrane — A powerful integration platform that allows you to connect to external services like Resend, Linear, Slack, and more. Membrane also let's you define actions for your integrations and build your own custom integrations.

A template for building your own workflow automation platform. Built on top of Workflow DevKit, this template provides a complete visual workflow builder with real integrations.

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
• Integrations - Connect to external apps and run integrations code against them using Membrane
• Execution Tracking - Monitor workflow runs with detailed logs
• Authentication - Secure user authentication with Better Auth
• 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:

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

# Better Auth
BETTER_AUTH_SECRET=your-secret-key
BETTER_AUTH_URL=http://localhost:3000

# Membrane Integration Platform
MEMBRANE_WORKSPACE_KEY=your-membrane-workspace-key
MEMBRANE_WORKSPACE_SECRET=your-membrane-workspace-secret

Installation

# Install dependencies
pnpm install

# Run database migrations
pnpm db:push

# Start development server
pnpm dev

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

Workflow Types

Trigger Nodes

• Webhook
• Schedule
• Manual
• Database Event

Action Nodes

• Send Email - Send emails via Resend
• Create Ticket - Create Linear tickets
• Database Query - Query or update PostgreSQL
• HTTP Request - Call external APIs
• Firecrawl - Scrape websites and search the web

Integrations

All integrations are powered by Membrane, providing seamless connections to external services like Resend, Linear, Slack, and more. Membrane lets you define actions for your integrations and build your own custom integrations.

Getting Started with Membrane

To add integrations to your application using Membrane, check out the Membrane Quick Start Guide.

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

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

# Development
pnpm dev

# Build
pnpm build

# Type checking
pnpm type-check

# Linting
pnpm lint

# Formatting
pnpm format

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

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
• Integrations: Membrane Integration Platform
• Authentication: Better Auth
• Code Editor: Monaco Editor
• Workflow Canvas: React Flow
• 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
• Built-in logging and error handling
• Serverless deployment support

Learn more about Workflow DevKit at workflow.dev

License

Apache 2.0