A workflow builder, highly popularized by AI recently, is a visual interface that allows users to create automated processes by connecting steps together, much like building blocks.
Instead of writing code, users drag and drop nodes—such as triggers, actions, and conditions—onto a canvas and draw connections between them to define how data flows. Each node represents a step in the process, and the branching paths or sequences show the logic of how the workflow should run. The experience feels like sketching out a flowchart, but with interactive parts that actually execute tasks across apps and systems. This makes complex automation intuitive and accessible, empowering users to design and manage processes through a clear, visual map.
- Palantir, ironcladapp, flowiseai, n8n, Microsoft data formulator, Lang flow, pyspur, vellum, Zapier, Comfy
- reactflow/showcase
- or use the /workflow-boilerplate in the root directory here
AI-Powered Workflow Engine with Real-time Execution
- Framework: Next.js 14 with App Router
- Features: AI integration, real-time execution, custom node types
- Best For: AI-powered workflows, real-time processing, complex node logic
- Tech Stack: Next.js, React Flow, OpenAI API, TypeScript
Key Features:
- 🤖 AI-powered text generation with OpenAI
- ⚡ Real-time workflow execution with SSE
- 🎯 Custom node types (Text Input, AI Generation, Visualization)
- 🌙 Dark/Light mode support
- 📱 Responsive design
Professional Workflow Builder with Floating Panels
- Framework: React 18 with Create React App
- Features: Floating panels, node configuration, dark mode default
- Best For: Professional workflow builders, business applications, node configuration
- Tech Stack: React, React Flow, Tailwind CSS, Bootstrap Icons
Key Features:
- 🎨 Floating panels with 12px spacing and rounded corners
- ⚙️ Node configuration system with right panel
- 🌙 Dark mode as default with light mode toggle
- 📱 Responsive design with auto-collapsing panels
- 🎯 E-commerce demo workflow included
- For AI-powered workflows: Use Workflow Boilerplate 1
- For professional workflow builders: Use Workflow Boilerplate 2
# Clone the repository
git clone https://github.com/1980computer/ux-workflow-builder.git
cd ux-workflow-builder
# Choose your template
cd workflow-boilerplate-1 # or workflow-boilerplate-2
# Install dependencies
npm install
# Start development server
npm run dev # or npm start| Feature | Boilerplate 1 (Next.js) | Boilerplate 2 (React) |
|---|---|---|
| Framework | Next.js 14 | React 18 |
| Routing | App Router | React Router |
| AI Integration | ✅ OpenAI API | ❌ |
| Real-time Execution | ✅ SSE | ❌ |
| Floating Panels | ❌ | ✅ |
| Node Configuration | ❌ | ✅ |
| Dark Mode Default | ❌ | ✅ |
| Bootstrap Icons | ❌ | ✅ |
| Production Build | ✅ | ✅ |
- AI-powered workflows with OpenAI integration
- Real-time processing with streaming responses
- Complex node logic with custom processors
- Server-side rendering for better SEO
- API routes for workflow execution
- Professional workflow builders for business applications
- Node configuration systems with property editing
- Floating panel interfaces with modern design
- Client-side applications with fast loading
- E-commerce workflows and business processes
Each template includes comprehensive documentation:
- Setup Instructions - Quick start guides
- Tech Stack Details - Complete technology breakdown
- API Documentation - Endpoint specifications
- Customization Guides - How to extend and modify
- Deployment Instructions - Production deployment
- Contributing Guidelines - How to contribute
Both templates are optimized for Netlify deployment with included netlify.toml configuration files.
Workflow Boilerplate 1 is optimized for Vercel deployment with Next.js integration.
Both templates include Docker support for containerized deployment.
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
Ready to build amazing workflows? Choose your template and start building! 🚀