Chatbot Flow Editor – Visual tool for designing conversation flows

6 hours ago 3

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.

# 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.

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

Method 3: Global installation

npm install -g @enumura/chatbot-flow-editor chatbot-flow-editor

# Default (opens on http://localhost:3001) chatbot-flow-editor # Custom port PORT=4000 chatbot-flow-editor

chatbot-flow-editor start # Start the editor (default) chatbot-flow-editor help # Show help chatbot-flow-editor version # Show version

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

# 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

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 } ] } ]

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; }