Chatbot Flow Editor Visual development tool for creating chatbot conversation flows A GUI tool that opens in your browser. Design, test, and export chatbot conversation flows as JSON. Quick Start # Install as development dependency npm install --save-dev @enumura/chatbot-flow-editor # Launch the visual editor npx @enumura/chatbot-flow-editor Your browser will automatically open with the visual flow editor at http://localhost:3001 . Installation & Usage Method 1: Using npx npm install --save-dev @enumura/chatbot-flow-editor npx @enumura/chatbot-flow-editor Method 2: Add to your project scripts Add to your package.json { "scripts" : { "design-flows" : " chatbot-flow-editor " } } Then run npm run design-flows Method 3: Global installation npm install -g @enumura/chatbot-flow-editor chatbot-flow-editor Usage Starting the Editor # Default (opens on http://localhost:3001) chatbot-flow-editor # Custom port PORT=4000 chatbot-flow-editor Available Commands chatbot-flow-editor start # Start the editor (default) chatbot-flow-editor help # Show help chatbot-flow-editor version # Show version How to Use Launch: Run npx @enumura/chatbot-flow-editor Create Nodes: Click "Add Node" to create conversation points Edit Content: Click any node to modify its content and options Test Flow: Use the chat preview to simulate user interactions Export JSON: Download your flows as structured JSON files Import Flows: Load existing JSON flows to continue editing Development Workflow # In your chatbot project directory npm install --save-dev @enumura/chatbot-flow-editor # Design your conversation flows npx @enumura/chatbot-flow-editor # Export the flow as JSON # → Use the exported JSON in your chatbot application JSON Structure When you export a flow, you'll get a JSON structure like [ { "id" : 1 , "title" : " Welcome to our support! " , "options" : [ { "label" : " Technical Support " , "nextId" : 2 }, { "label" : " Billing Questions " , "nextId" : 3 } ] } ] Integration The exported JSON can be used in any chatbot implementation // Load your exported flow import flow from './chatbot-flow.json' ; // Basic navigation example function findNodeById ( nodeId ) { return flow . find ( node => node . id === nodeId ) ; } function processUserChoice ( currentNodeId , userChoice ) { const currentNode = findNodeById ( currentNodeId ) ; const selectedOption = currentNode . options . find ( opt => opt . label === userChoice ) ; return selectedOption ? selectedOption . nextId : null ; } Screenshots Workflow Design Phase: Use the visual editor to create conversation flows Test Phase: Try different conversation paths with the live preview Export Phase: Download your flow as structured JSON Integration Phase: Use the JSON in your chatbot application Requirements Node.js 20.0.0 or higher Development git clone https://github.com/enumura1/chatbot-flow-editor.git cd chatbot-flow-editor npm install npm run dev License This project is licensed under the MIT License. See the LICENSE file for details. Documentation