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

1. Launch: Run npx @enumura/chatbot-flow-editor
2. Create Nodes: Click "Add Node" to create conversation points
3. Edit Content: Click any node to modify its content and options
4. Test Flow: Use the chat preview to simulate user interactions
5. Export JSON: Download your flows as structured JSON files
6. 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

1. Design Phase: Use the visual editor to create conversation flows
2. Test Phase: Try different conversation paths with the live preview
3. Export Phase: Download your flow as structured JSON
4. 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

• Development Guide

License

This project is licensed under the MIT License.

See the LICENSE file for details.

Documentation

• Documentation
• Getting Started
• Installation Guide
• User Guide
• JSON Structure

Support

• Report Issues
• Discussions