Forem: enumura1

Released Chatbot Flow Design & JSON Export OSS

enumura1 — Sun, 07 Sep 2025 11:12:19 +0000

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

Docs: https://enumura1.github.io/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

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",
  ...
}

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.

Design conversation flow with visual editor
Check operation with live preview
Export as JSON
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"
  }
]

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.

GitHub: enumura1/chatbot-flow-editor
npm: @enumura/chatbot-flow-editor
Documentation: https://enumura1.github.io/chatbot-flow-editor/

React library for creating UI with shaking animation

enumura1 — Sat, 01 Jun 2024 04:16:07 +0000

I created OSS for the first time.　　
liquidui-animation is a library aimed at making it easy to create a UI that shakes with Raect.

liquidui-animation

This liquidui-animation Component makes it easy to create a shaking UI React application.

With the liquidui-animation Component, you can implement UI elements with Liquid-like shaking animation in a short time.

repository：https://github.com/enumura1/liquidui-animation

Demo

Advantages

Customizability：The liquidui-animation Component allows customization of various parameters such as shape, size, and animation intensity.

Installation


npm i @enumura/liquidui-animation

Example

1. Example of rotation

This is a sample of a rotating liquid UI.

Decreasing the value of the rotateDuration property speeds up the rotation and increasing the value slows it down.

import LiquidUI from "@enumura/liquidui-animation";

const App = () => {
  return (
    <LiquidUI
      figureShape={"circle"}
      size={"middle"}
      bgColor={"linear-gradient(90deg, #C3F1FF, #0072ff)"}
      animationIntensity={"strong"}
      liquidDuration={12}
      rotateDuration={10}
    ></LiquidUI>
  );
};

2. Example of animation speed adjustment

This is an example of adjusting the liquidDuration property to change how fast the UI moves.
Lowering the value makes the UI move faster, and raising the value makes the UI move slower.

import LiquidUI from "@enumura/liquidui-animation";

const App = () => {
  return (
    <>
      <LiquidUI
        figureShape={"circle"}
        size={"middle"}
        bgColor={"blue"}
        animationIntensity={"strong"}
        liquidDuration={1}
        rotateDuration={30}
      ></LiquidUI>
    </>
  );
};

3. Example of displaying image

This is a sample of liquid UI including images.

Specify the path of the image for the bgImg property.

import LiquidUI from "@enumura/liquidui-animation";

const App = () => {
  return (
    <LiquidUI
      figureShape={"circle"}
      size={"middle"}
      bgImg={"assets/sampleImg.webp"}
      animationIntensity={"strong"}
      liquidDuration={12}
      blurIntensity={0}
    ></LiquidUI>
  );
};

4. Example with blur

This is a sample of liquid UI with blurring.

Increasing the value of the blurIntensity property increases the blur intensity.

import LiquidUI from "@enumura/liquidui-animation";

const App = () => {
  return (
    <LiquidUI
      figureShape={"circle"}
      size={"middle"}
      bgColor={"#FFE2FF"}
      animationIntensity={"middle"}
      liquidDuration={10}
      blurIntensity={10}
    ></LiquidUI>
  );
};

5. Example of liquidui-animation component with custom size

This is an example of a case where you want to specify a custom UI size.

Specify an arbitrary value for the size property in object format such as {width: 'XXXpx', height: '○○○px'}.

import LiquidUI from "@enumura/liquidui-animation";

const App = () => {
  return (
    <LiquidUI
      figureShape={"circle"}
      size={{ width: "100px", height: "100px" }}
      bgImg={"assets/sampleImg.webp"}
      animationIntensity={"strong"}
      liquidDuration={12}
      blurIntensity={0}
    ></LiquidUI>
  );
};

Thank you for reading this article!

repository：https://github.com/enumura1/liquidui-animation
npm：https://www.npmjs.com/package/@enumura/liquidui-animation