https://github.com/azim-ahmed/chat-flow-builder
React-flow chatbot
https://github.com/azim-ahmed/chat-flow-builder
automation automation-builder chatbot figjam flow-builder landbot low-code miro n8n n8n-workflow no-code react-flow-renderer reactflow workflow-builder xyflow
Last synced: about 1 year ago
JSON representation
React-flow chatbot
- Host: GitHub
- URL: https://github.com/azim-ahmed/chat-flow-builder
- Owner: Azim-Ahmed
- Created: 2024-09-28T09:39:24.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-04-27T16:38:58.000Z (about 1 year ago)
- Last Synced: 2025-04-30T02:52:03.081Z (about 1 year ago)
- Topics: automation, automation-builder, chatbot, figjam, flow-builder, landbot, low-code, miro, n8n, n8n-workflow, no-code, react-flow-renderer, reactflow, workflow-builder, xyflow
- Language: TypeScript
- Homepage: https://chat-flow-builder-one.vercel.app
- Size: 315 KB
- Stars: 28
- Watchers: 1
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# BiteSpeed Frontend Task: Chatbot flow builder
## This is created by Denish , and his repo is https://github.com/denishsharma/chatbot-flow-builder-task-bitespeed
## I have cloned this and make this more available to my github due to more reach
## Scroll Below to see custom nodes and logics and issues and others
worked-at
[See the live demo](https://chat-flow-builder-one.vercel.app/)
We’ll build a simple Chatbot flow builder using React and try to make the code extensible to easily add new features.
A chatbot flow is built by connecting multiple messages to decide the order of execution
## Features
### Nodes
- **Start Node**: The starting point of the flow.
- **Message Node**: A message to be displayed to the user.
- **Conditional Path Node**: A condition to be matched with multiple cases or paths to be taken. (showcase to use of dynamic handles)
- **End Node**: The end of the flow.
### Sidebars
- **Node Sidebar**: Contains the list of nodes that can be added to the flow.
- **Node Properties Sidebar**: Contains the properties of the selected node.
### Flow
- **Validation**: Check if the flow is valid or not. A valid flow should have a start node and an end node.
- **Auto Adjust**: Nodes will automatically adjust their position to avoid overlapping. It won't adjust the flow lines.
## Tech Stack & Libraries
- React
- React Flow
- Zustand
- TypeScript
- UnoCss
### Clone this repo and use `yarn` to run the application
### this is based on v-10, 11 ->
Want to collaboration for your project?
let me know then your project mind: : with pro-features
## azimaahmed36+reactflow+github@gmail.com
### chatbot builder-->
contact me through email to see
### ask for better examples
## See all examples
## https://reactflowexample.vercel.app
## New Drag and drop
## https://check-automate.vercel.app/ --(PAID)
## Preview
Updated Design with
### Automation flow
#### https://automationflow.vercel.app/
## Group layout with multiple nodes
### https://group-layout-flow.netlify.app/
## preview
## Auto layout previous implementation
https://auto-layout-workflow.vercel.app/
## Square Bear
https://app.squarebear.com.au/
## Dalus
### only design :
## Another work live link :
### https://boneguide.netlify.app/workflow
features:
- Editable
- updateable
- searchable
- clickable
- resist manual connect
- Edge type changing
-Single color
- Multi-color
- Deletable
- Dagre layouting
- centering node
- selected node
## Data analytics
### https://flow-diagram-automate.vercel.app/
## live link
https://workflowautomation.netlify.app/
## Prosp ( Cold outreach model)
### https://prosp.ai/
## Graphflow
https://graphflow-amber.vercel.app
### Features
- Made from JSON
- Elkjs
- Added Algorithm
- Implement Elkjs-tree
- Reactflow v-11
- MUI
- Routing
- Conditional Routing
### Last one
https://voiceflow-two.vercel.app/
## Last one
## Dynamic Handles
