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