DEV Community

Cover image for Released Chatbot Flow Design & JSON Export OSS
enumura1
enumura1

Posted on

Released Chatbot Flow Design & JSON Export OSS

Introduction

This article introduces the OSS Chatbot Flow Editor, which allows you to design chatbot conversation flows through GUI operations in an editor.
The key feature is that you can create nodes through GUI and export the flow itself as JSON.

  • GitHub: enumura1/chatbot-flow-editor

https://github.com/enumura1/chatbot-flow-editor

  • npm: @enumura/chatbot-flow-editor

https://www.npmjs.com/package/@enumura/chatbot-flow-editor

What is Chatbot Flow Editor?

Chatbot Flow Editor is an open-source tool that allows you to design chatbot conversation flows through GUI.
You can place nodes through GUI to create conversation flows and export them directly as JSON.

  • Visual editor
  • Live preview on editor (test chat)
  • Clean JSON format export (no unnecessary meta information)
  • Integration with web apps and chatbot applications

The editor interface looks like the image below.

Installation Method

You can launch the editor from npm.

npx @enumura/chatbot-flow-editor
Enter fullscreen mode Exit fullscreen mode

Background and Issues

I felt the following issues with existing chatbot development tools.

  • High cloud service usage costs
  • Complex integration with other services may be required
  • Editor becomes hard to see when the number of nodes increases
  • Diff contains unnecessary meta information like coordinates, making chat flows difficult to manage on GitHub
  • Cannot test chat on one screen

I thought that "cases where static flows can be defined in JSON are sufficient" and decided to create a simple OSS for that purpose.

For example, JSON exported from certain flow tools might contain the following meta information that is not directly related to conversation logic.

"meta": {
  "fugaPosition": { "x": 10, "y": 20 },
  "piyoData": {
    "fuga1": { "pos": { "x": 100, "y": 50 } }
  },
  "hogeStatus": "ACTIVE",
  ...
}
Enter fullscreen mode Exit fullscreen mode

When coordinates and state information are included like this, differences occur just by moving nodes, creating noise when managing on GitHub.
Chatbot Flow Editor is designed to eliminate such meta information and output only the necessary conversation logic as JSON.

Mechanism and Usage

The basic workflow consists of the following 4 steps.

  1. Design conversation flow with visual editor
  2. Check operation with live preview
  3. Export as JSON
  4. Integrate with any chatbot application

1. Design conversation flow with visual editor

You can design chat flows by placing nodes through GUI operations and adding nodes from the "+" button of each node.
The left side of the editor is the workflow screen, and the bottom right is the node editing screen.

"Editor screen (conversation flow) screenshots"

2. Check operation with chat preview

The top right of the editor is the chat preview screen.
You can test the flow by pressing the TestChat button.
This way, you can check the behavior including preview on one screen.

"Editor screen (chat preview) screenshot"

3. Export as JSON

Once you finish designing the flow, you can export the flow in JSON format from the Export button at the top of the screen.
Conversely, if you want to modify an existing flow, you can load the flow from the Import button.

"Editor screen (JSON export button) screenshot"

The exported sample JSON is as follows.

"chatbot-flow.json"

▼ Export screen


[
  {
    "id": 1,
    "title": "Hello! How can I help you today?",
    "options": [
      {
        "label": "About products",
        "nextId": 2
      },
      {
        "label": "About services",
        "nextId": 3
      }
    ],
    "hierarchyPath": "1"
  },
  {
    "id": 2,
    "title": "Which product would you like to know about?",
    "options": [
      {
        "label": "Smartphones",
        "nextId": 5
      },
      {
        "label": "Computers",
        "nextId": 5
      }
    ],
    "parentId": 1,
    "hierarchyPath": "1-1"
  },
  {
    "id": 3,
    "title": "Which services would you like to know about?",
    "options": [
      {
        "label": "Option to piyo",
        "nextId": 6
      }
    ],
    "parentId": 1,
    "hierarchyPath": "1-2"
  },
  {
    "id": 4,
    "title": "Node 3 title",
    "options": [],
    "parentId": 1,
    "hierarchyPath": "1-3"
  },
  {
    "id": 5,
    "title": "fuga",
    "options": [],
    "parentId": 2,
    "hierarchyPath": "1-1-1"
  },
  {
    "id": 6,
    "title": "piyo",
    "options": [],
    "parentId": 3,
    "hierarchyPath": "1-2-1"
  }
]
Enter fullscreen mode Exit fullscreen mode

4. Integrate with any chatbot application

By loading the exported JSON, you can incorporate chat flows into any web application.

"Example chatbot app that incorporates exported JSON"

The overall usage flow is summarized as a video on YouTube. If you don't mind, I would be happy if you could watch it.

https://youtu.be/4wV240EaIPA?si=1ZZM5Dmx-euVR5Kg

Also, although all features are not included in the video, it is possible to use the editor UI as a React component as well.

Summary

  • Chatbot Flow Editor is an OSS that allows you to create conversation flows through GUI operations
  • GUI design → test → JSON output → integration with external applications possible
  • Available from npm

If you are interested, I would be happy if you could give it a ⭐ on GitHub.

Top comments (0)