チャットボットフロー設計＆JSON出力OSSをリリースしました

はじめに

本記事では、チャットボットの会話フローをエディタ上のGUI操作で設計できる OSS Chatbot Flow Editor について紹介します。
ノードをGUIで作成し、そのままフロー自体をJSONとしてエクスポートできるのが特徴です。

• GitHub: enumura1/chatbot-flow-editor

• npm: @enumura/chatbot-flow-editor

• Docs: https://enumura1.github.io/chatbot-flow-editor

Chatbot Flow Editor とは？

Chatbot Flow Editor は、チャットボットの会話フローをGUIで設計できるオープンソースのツールです。
GUIでノードを配置して会話の流れを作成し、そのままJSONとしてエクスポートできます。

• ビジュアルエディタ
• エディタ上でのライブプレビュー（テストチャット）
• JSON形式でのクリーンなエクスポート（余計なメタ情報なし）
• Webアプリやチャットボットアプリへの統合

エディタの見た目は下記のようなイメージです。

インストール方法

npm からのエディタを立ち上げられます。

npx @enumura/chatbot-flow-editor

背景と課題

既存のチャットボット開発ツールには次のような課題を感じていました。

• クラウドサービス利用コストが高い
• 他サービスとの複雑な統合が必要な場合がある
• ノード数が増えるとエディタが見づらくなる
• diff に座標など不要なメタ情報が含まれ、チャットフローが GitHub で管理しづらい
• 1画面でチャットをテストできない

「静的なフローを JSON で定義できれば十分なケース」もあると考え、そのためのシンプルな OSS を作ろうと思ったのがきっかけです。

例えば、あるフローツールでエクスポートした JSON には次のような 会話ロジックに直接関係しないメタ情報 が含まれる場合がありました。

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

このように座標や状態情報が含まれていると、ノードを動かすだけで差分が発生し、GitHub で管理する際にノイズになってしまいます。
Chatbot Flow Editor では、こうしたメタ情報を排除して 必要な会話ロジックだけをJSON出力するように設計しました。

仕組みと使い方

基本的なワークフローは次の4点の流れです。

1. ビジュアルエディタで会話フローを設計
2. ライブプレビューで動作確認
3. JSONとしてエクスポート
4. 任意のチャットボットアプリケーションに統合

1.ビジュアルエディタで会話フローを設計

ノードをGUI操作で配置し、各ノードの「+」ボタンからノードを追加する形式でチャットフローを設計できます。
エディタ左がワークフロー画面で、右下がノードの編集画面です。

エディタ画面（会話フロー）のスクリーンショット

2.チャットプレビューで動作確認

エディタ右上がチャットプレビュー画面です。
TestChatボタンを押下するとテスト的にフローを動かせます。
このように1画面でプレビューまで挙動の確認をすることが可能です。

エディタ画面（チャットプレビュー）のスクリーンショット

3.JSONとしてエクスポート

フローの設計が終わったら、画面上部のExportボタンからフローをJSON形式でエクスポートできます。
逆に、既存のフローを修正したい場合は、Importボタンからフローの読み込みが可能です。

エディタ画面（JSONとしてエクスポートボタン）のスクリーンショット

エクスポートしたサンプルJSONは下記の通りです。

chatbot-flow.json

▼エクスポート時の画面

chatbot-flow.json

[
  {
    "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.任意のチャットボットアプリケーションに統合

エクスポートされたJSONを読み込む形で、任意のWebアプリケーションにチャットフローを組み込むことができると思います。

エクスポートしたJSONを組み込んだチャットボットアプリ例

使い方全体の流れは YouTube に動画としてまとめています。もしよろしければ、見ていただけると嬉しいです。

また、動画内には全ての機能を収めきれていませんが、エディタのUIをReactのコンポーネントとしても利用する事が可能です。

まとめ

• Chatbot Flow Editor は、会話フローをGUI操作で作成できる OSS
• GUIで設計 → テスト → JSON出力 → 外部アプリケーションに統合可能
• npm から利用可能

もし興味があれば、 GitHub で ⭐ いただけると嬉しいです。

• GitHub: enumura1/chatbot-flow-editor
• npm: @enumura/chatbot-flow-editor
• ドキュメント: https://enumura1.github.io/chatbot-flow-editor/