React Chatbot Flow Builder

This project is a React-based chatbot flow builder that utilizes the React Flow library to create and manage conversational flows. The builder provides a visual interface for creating and connecting different chatbot nodes, making it easy to design complex conversation paths.

Table of Contents

• Demo
• Features
• Installation
• Usage
• File Structure
• Contributing
• License

Demo

You can see a live demo of the project here. (Link to your demo)

Features

• Visual Node-Based Interface: Easily create and connect nodes to design conversation flows.
• Drag and Drop: Intuitive drag-and-drop functionality to manage nodes and connections.
• Customizable Nodes: Support for different types of nodes representing various chatbot actions (e.g., messages, questions, API calls).
• Save and Load Flows: Save chatbot flows to local storage and load them back for editing.
• React Flow Integration: Leverages the powerful React Flow library for rendering and managing nodes and edges.

Installation

To get started with the project, follow these steps:

1. Clone the repository:

   git clone https://github.com/Mohammmedrafique/Chatbot-flow-builder.git
   cd react-chatbot-flow-builder

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

   This will start the app and open it in your default web browser. The development server will reload automatically when you make changes to the code.

Usage

1. Add Nodes: Click on the canvas to add different types of nodes representing chatbot actions.
2. Connect Nodes: Drag from the edge of one node to another to create connections and define the flow of the conversation.
3. Edit Node Properties: Click on a node to edit its properties, such as the message text or API call details.
4. Save and Load: Use the provided buttons to save the current flow to local storage or load a previously saved flow.

File Structure

The project's file structure is organized as follows: