AIチャットボット"Alli"を"kintone"に埋め込み、ユニークユーザー情報を送る

はじめに

AIチャットボットのAlli（アリィ）というサービスを利用しておりまして、
従来のチャットボットのように事前設定したQ&Aから返答するだけでなく、
投入したpdfから検索を行ったり、チャットGPT連携機能を使うことで、
pdfのみを参照し、自然言語で返答してくれるなど便利です。
（しかもpdfに文字データが含まれてなくてもOCRで解析してくれる）

引用：■お知らせ■ ChatGPTの活用による回答自動生成型検索サービスを、AIチャットボット「Alli」の新機能として提供

こちらをカスタマー向けのお問い合わせ用途ではなく、社内での業務オペレーション確認用として使おうとしたのですが、業務上よく使うkintoneに搭載することで業務中にいちいち別ページに行かずに済みそうだと重い、埋め込むことといたしました。

kintone側の仕様

Alliでは公式ドキュメントでhtmlのheadにscriptとして挿入して埋め込めると記載してあるものの、
kintoneの仕様ではhtmlを直接編集することが出来ず、困りました。

しかし、kintoneにはアプリ毎にJavascriptをUPできる機能が存在するため、そこに.jsでAlliとの連携を行うコードをUPすることとします。

事前にAlliで確認しておくこと

.jsを作成する前に、Alliの管理画面にていくつか確認および設定しておくべきことが3点ございます。

① 自身のAlliのSDK_KEY
② 表示させたいスキル（チャットフロー）のプレイスメント設定
③ kintoneから受け取る変数の設定

① 自身のAlliのSDK_KEY

自身のユニーク情報としてSDK_KEYを入力する必要があるので管理画面から確認しておきます。

② 表示させたいスキル（チャットフロー）のプレイスメント設定

SDK_KEYだけだとどのスキルを表示させるかの指定がないため、意図しないものが出る可能性があります。そのため、表示させたいスキルにてプレイスメント（そのスキルのIDのようなもの）を任意のもので指定しておきます。

③ kintoneから受け取る変数の設定

Alliにメッセージを送った時に受け取る情報を増やすことでそれを誰が送ったのかを特定する機能があります。
今回のコードではkintone右上に表示されている、ユーザー名をhtmlから特定し、送るようにしました。

が、その情報を入れる用のカスタム変数をAlliのGUI上にて作成しておく必要があります。

実際のコード

実際にkintoneに埋め込むコードのサンプルです。
（①②③の情報は設定に従い、変更してください）

Alignment_Alli.js

// AlliのSDKを読み込むためのスクリプトを作成し、ページのhead要素に追加
const alliScript = document.createElement("script");
alliScript.src = "https://sdk.alli.ai/latest/alli.js";
document.head.appendChild(alliScript);

// Alliの表示設定など
const alliOptions = {
    apiKey: "YOUR_SDK_KEY", //自身のSDK_KEYを確認し、変更する
    debug: false,//これをオンにすると、デバッグ情報がコンソールに出力されます。
    backButton: true,//[オプション]デフォルト値は true。ヘッダーの戻るボタンを削除する場合は、このオプションをオフに設定します。
    providerLink: true,// [オプション]デフォルト値は true。Alliロゴのリンクを削除する場合は、このオプションをオフにします。
    styleOptions: { //[オプション]スタイルをカスタマイズします。
        conversationContainer: {
            right: 50, //画面右側からの間隔設定（チャット画面の位置が右に設定されている場合に適用)
            left: 50, //画面左側からの間隔設定（チャット画面の位置が左に設定されている場合に適用)
            bottom: 50, //画面下部からの間隔設定
        }
    }
};

// Alliの初期化とkintoneでのユーザー名の特定および送信
function initializeAlli() {
    if (window.Alli) {
        window.Alli.initialize(alliOptions);
        const gaiaHeader = document.querySelector('.fJzNiK__name');
        const gaiaHeaderUserName = gaiaHeader ? gaiaHeader.innerText : null;
        window.Alli.event({
            placement: "YOUR_PLACEMENT", //設定内容により変更する
            variables: {
                USERNAME: gaiaHeaderUserName, //gaia-header-header-user-nameの中の値
            },
        });
    } else {
        setTimeout(initializeAlli, 100);
    };
};

initializeAlli();

これをkintoneの管理画面からUPします。

結果、無事にkintoneアプリで表示され、Alliが使えるようになりました。

また、Alliではメッセージ履歴などからkintoneユーザー名がカスタム変数に入るようになっています。

あとがき

これ以外のチャットボットの埋め込みもやったことあるのですが、
Alliほど細かく表示内容を設定したり、埋め込み先の情報を取得できるものは初めてでした。

今回はkintoneのユーザー名での取得を行いましたが、
Cookieやhtmlの別要素の情報を取得することで、
どんな状況で何に困っているのかの分析が捗りそうです。

今後もたくさん活用していきたいと思います。