ChatTangle is a powerful and intuitive web application for visually designing chatbot conversation flows using a drag-and-drop interface. Built with cutting-edge modern web technologies, it empowers users to define rich conversational paths, logic branches, and dynamic message interactions.
- 🎯 Drag-and-Drop Interface – Intuitive canvas to design conversation flows visually.
- 🔧 Customizable Node Types – Includes messages, inputs, conditionals, and more.
- 🔁 Real-Time Flow Validation – Ensures logical consistency before saving.
- 💾 Persistent Flows – Save and load conversation flows easily.
- 🧹 Clear Canvas Button – Start fresh with a single click.
- 📱 Responsive UI – Clean design optimized for desktop and mobile.
| Category | Tools Used |
|---|---|
| ⚛️ Frontend | React + TypeScript |
| ⚡ Build Tool | Vite |
| 🧠 Flow Diagram | React Flow |
| 📦 State Mgmt | Zustand |
| 🎨 Styling | Tailwind CSS |
| 🔔 Notifications | React Hot Toast |
| 🧪 Testing | Vitest + React Testing Library |
| 🧼 Linting | ESLint |
git clone https://github.com/AKASH-PRASAD7/chatbot-flow-builder.git
cd chatbot-flow-builderpnpm installTo run the application in development mode:
pnpm devThis will start the Vite development server, and you can access the application in your browser, usually at http://localhost:5173.
To build the application for production:
pnpm buildThis command will compile and optimize your application for deployment, placing the output in the dist/ directory.
To preview the production build locally:
pnpm previewThis project uses Vitest and React Testing Library for comprehensive testing.
To run all tests:
pnpm testTo run tests and view the Vitest UI for an interactive testing experience:
pnpm test:uiDistributed under the MIT License. See LICENSE for more information.