Chatbot-flow-builder-React Tailwind Templates

Chatbot Flow Builder React

Built Chatbot Flow Builder with React, React-flow, and Tailwind CSS. It has a node panel currently handling 3 different types of nodes i.e. text node, image node, and color picker node and a setting panel for handles changes and modification within particular node.

How to install and run this project?

Clone this git repository on your device.
Then open the project folder on Code Editor(VS Code).
Run this command to install all the dependencies inside the projcet - npm install.
Now to run this project use command - npm start.

Live Link - https://chatbot-flow-builder-react.vercel.app/

Implemented this application with the desired functionalities plus some add ons.

Can only have one edge originating from a source handle

Save button press will show an error if there are more than one Nodes and more than one Node has empty target handles

Have a Node Panel(Extensible and containing 3 types of node currently)

Have a Setting Panel(for each type of selected node)

Introduced save flow and restore button that stores the current flow in the local storage and retrieves the last saved flow from local storage. Also it has a control panel for zoom in and zoom out.

Top categories

Loading Svelte Themes