Chatflow Builder

Overview

Chatflow Builder is a powerful drag-and-drop chatbot flow builder that makes creating conversational workflows intuitive and visual. Built with Next.js and React Flow, it provides a canvas-based interface where you can design complex chatbot interactions by simply dragging nodes and connecting them together.

Working Demo

Watch the builder in action: Drag nodes, connect flows, and edit properties in real-time.

Tech Stack

• Next.js 14 - React framework with App Router
• React 18 - Modern UI library with hooks
• React Flow 11 - Interactive node-based graph library
• TypeScript - Type-safe development
• TailwindCSS - Utility-first CSS framework

Key Features

Visual Flow Builder

• Drag & Drop Interface: Easily add nodes by dragging from the nodes panel onto the canvas
• Visual Connections: Connect nodes by dragging from source to target handles
• Interactive Canvas: Pan, zoom, and navigate your flow with intuitive controls
• Node Types: Support for text message nodes and interactive button nodes

Real-Time Editing

• Settings Panel: Edit node properties instantly when selected
• Live Updates: Changes reflect immediately on the canvas
• Property Editing: Customize text content, button values, and more

Smart Features

• Auto-save: Flow state is automatically saved to localStorage
• Flow Validation: Built-in validation ensures proper flow structure before saving
• Restore Flow: Easily restore your previous work from local storage
• Extensible Architecture: Designed for easy addition of new node types

Usage

Building Your Flow

1. Add Nodes: Drag a node type (Message or Button) from the "Nodes Panel" on the right
2. Drop on Canvas: Place the node anywhere on the canvas
3. Connect Nodes: Click and drag from a node's source handle (right side) to another node's target handle (left side)
4. Edit Properties: Click on any node to select it and edit its properties in the settings panel
5. Save Flow: Click "Save Changes" to validate and save your complete flow

Node Types

• Message Nodes: Create text messages in your chatbot conversation
• Button Nodes: Add interactive buttons with custom text and values

Technical Highlights

Extensible Architecture

The codebase is structured for easy extension:

• Modular node component system
• Centralized node registry for new types
• Type-safe node definitions with TypeScript
• Utility functions for node creation and management
• Validation rules engine for flow integrity

Performance Features

• Efficient State Management: Optimized React Flow state handling
• Local Storage Persistence: Automatic saving with browser storage
• Type Safety: Full TypeScript coverage for reliability
• Responsive Design: Works seamlessly across different screen sizes

Project Structure

The application follows a clean, modular architecture:

• app/ - Next.js app directory with pages and layouts
• components/ - Reusable React components including flow nodes and panels
• types/ - TypeScript type definitions for type safety
• utils/ - Helper functions for node creation and persistence
• lib/ - Configuration and validation logic