会話型AIを作れるmiiboを使ってWebサイトにAIが回答してくれるチャット画面と問い合わせ内容に応じてLINEに通知する仕組みを作ってみます。
意外とmiiboタグが付いててLINE関連の記事ってないですね。
miibo(ミーボ)って?
DifyやCozeのようなノーコードAIツール(iPaaSみたいな総称ないんかな、AIaaSみたいな)です。LINE Botも作れる。
miiboでチャットボットを作ってみる(ハンズオン風)
ここはハンズオン風に手順を紹介していきます。
※ちなみに、miiboではチャットボットではなく、会話型AIという表現を使っています。
チャット以外にもインターフェイス拡張していくよねという思想から来ているらしいです。
公式ドキュメントから引用: https://miibo.readme.io/docs/%E4%BC%9A%E8%A9%B1%E5%9E%8Bai%E3%81%AE%E6%84%8F%E7%BE%A9#%E3%80%8C%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%83%9C%E3%83%83%E3%83%88%E3%80%8D%E3%81%A8%E8%A1%A8%E8%A8%98%E3%81%97%E3%81%AA%E3%81%84%E7%90%86%E7%94%B1
1-0. miiboのアカウントを用意
miiboのアカウントを作りましょう。
1-1. まずは準備
アカウント作成後、エージェントと呼ばれるBOTを作成する画面になります。
以下の設定を進めていきましょう。
-
- 名前を入力: 任意の名前、BOTの名前です。
-
- 提供者名を入力:
- 3.イメージの設定
アイコンを設定できるのでしてみましたが、無しでも大丈夫です。
- 4.紹介文の設定: 任意の紹介文を入れましょう。
-
- AIのモデル:
GPT-4o mini
を指定
- ここはその時々の状況で検討すると良いです。
- 2024/7/31時点だと
GPT-4o mini
が安くてコスパ良きです。GPT3.5-Turbo
同様に1会話で5ポイント消費します。※miiboでは無料枠で月に1000ポイント付与されて
- AIのモデル:
1-2. プロンプトを指定する
どんな挙動をするBOTにするかをプロンプトを入れて指定します。
miiboでは"AIにプロンプトを考えてもらう機能"があるのでこれを使って対話型に作ってみましょう。便利!
割と雑に要求を出してもしっかりとプロンプトを作ってくれます。生成された文章(プロンプト)をコピペして設定します。
今回生成されたプロンプト
こんにちは!私はプロトアウトスタジオのチャットボットです。どのようなご用件でしょうか?
下記は現在得られているステート情報です。
ユーザーの名前: #{ユーザーの名前}
ユーザーのメールアドレス: #{ユーザーのメールアドレス}
問い合わせ内容: #{問い合わせ内容}
面談希望日: #{面談希望日}
※ここに記録するステートを全て展開します。
ユーザーが問い合わせをした際の手順は以下の通りです:
1. ユーザーの名前を尋ねてください。
2. ユーザーのメールアドレスを尋ねてください。
3. 問い合わせ内容を尋ねてください。
4. 面談の申し込みの場合は、希望する面談日を尋ねてください。
ユーザーの回答をステートに記録してください。
ユーザーの名前を尋ねるときは、「お名前を教えてください」と質問してください。
ユーザーのメールアドレスを尋ねるときは、「ご連絡先のメールアドレスを教えてください」と質問してください。
問い合わせ内容を尋ねるときは、「どのようなご用件でしょうか?」と質問してください。
面談希望日を尋ねるときは、「面談を希望される日程を教えてください」と質問してください。
ユーザーの質問に回答をした後、クイックリプライを表示してください。
クイックリプライの数は4つです。クイックリプライはユーザー視点での発話候補です。ユーザーが次に話したいと思う言葉を予測して出力しましょう。
前提データにない情報をユーザーに伝えてはいけません。誤った情報を伝えると、ユーザーに甚大な不利益を与えてしまいます。
前提データに記載がある情報で回答をしてください。回答ができない場合は、下記のように答えましょう。
「私が把握している情報では、回答をすることができませんでした。大変お手数ですが、お問い合わせフォームからご連絡ください。」
参考にした資料のURLを以下に記載します。
<a href="https://miibo.readme.io/docs/miibo%E3%81%A8%E3%81%AF" target="_blank">https://miibo.readme.io/docs/miibo%E3%81%A8%E3%81%AF</a>
1-3. BOTの完成 & テスト
簡単にBOTが作れました。この画面になればOKです。
作れたのでテストしてみましょう。
"会話をテストする"のボタンからプレビュー画面でAIの会話をテストできます。
1-4. 公開してみる
テストして問題なく動いてそうだったら公開してみます。
公開設定
> 一般公開
を選択 >利用規約に同意して公開
で公開します。
確認のモーダルがでるので公開します。
これで公開できました。
8888888
2. Webサイトに埋め込む
作ったAIをWebサイトに埋め込んでみましょう。
2-0. Webサイトを用意
既に何か利用したいWebサイトがある人はスキップしてください。
Webサイトが無い人はCodePenに適当なHTMLを貼ってWebサイトを作ってみます。
↑をフォークして利用してください。
ちなみにClaudeに作ってもらいました。 https://zenn.dev/n0bisuke/scraps/4a6bc97d7ac5a1
2-1. チャットボットを組み込む
公開設定
の項目の中から埋め込みタグ
の項目を見つけて中に書いてあるコードをコピーします。
コピーしたコードをHTMLの最後の方の</body>
の直前に貼り付けます。
(動画撮ったけど消えた...)
うまくいくと相談するボタンがページの右下に出てきて、そこをクリックするとチャットが展開されます。
簡単ですね!
3. 問い合わせがあったらLINE通知する
miiboでは 会話などに応じてWebhookを飛ばすことができます。
こちらからWebhookの設定ができます。
LINE Notifyを使って通知しようかと思いましたが、miiboからのHTTPリクエストはJSONでのポストのみになっていて形式的に変換が必要そうだったのでMakeを間に咬ませて実装してみます。
3-1. MakeでLINE Notify連携のサーバーを作る
Makeの説明は今回は割愛しますが、色々なサービスを接続することができるiPaaSというサービスの一つです。ノーコード自動化ツール的な。
Make上で、
- Custom Webhook
- LINE Notify
- Webhook response
の三つのモジュールを写真のように接続します。
WebhookのURLを発行するときなどは"miibo連携"など名前を設定しておきます。
Custom Webhookで発行されるURLをコピーしておきます。
3-2. miibo側の設定
先ほどMake側で取得したWebhookのURLをmiiboのWebhookURLの項目を見つけ設定します。
URLを指定し、デフォルトのままPOSTメソッドを指定します。
現状の作成したAIは"入学を検討したい"などのメッセージを入れると、 **まずは"お名前を教えてください"**と聞き返してくるので、 **「AIがユーザーに名前を聞く発話があった時にLINEに通知する」**という挙動にしてみました。
- トリガー種類: エージェントが応答を返した
- トリガーの条件: 下記の値のいずれかが含まれたら
- 条件の値:
名前を教えて
- ペイロード:
{"msg": "入学検討の問い合わせがありました。"}
これを設定し、Webhookの連携も公開設定にしておきます。
3-3. 試してみつつJSONの中身確認
この状態でAIに話しかけると、Webhookが反応して、Makeに情報が送信されます。
(MakeはあらかじめRun Onceで実行しておく)
すると以下のような中身が送られてきていることが分かります。
どんなJSONになっているかはこちらの資料が分かりやすいです。
history
のキーに会話ログとかも入っていてそれが取れるの良いですね。
3-4. LINEに繋げる
LINE Notifyを接続し、管理者に通知する仕組みを作れば完成です。
動かしてみる
お疲れ様でした。最後に動かした際の挙動です。
Webサイトにユーザーがアクセスし、チャットで会話を行います。
AIがユーザーに「お名前を教えてください」的なメッセージを送ったらそれをトリガーにLINEにも通知がいくようになりました。
LINEでユーザーの挙動を知れるの便利
もっと複雑なログも取れると思いますが、とりあえずは興味持ってくれてる人がきたことをLINEに通知してみる仕組みを作ってみました。
他のAPIに繋げたりもできるので引き続き触ってみようと思います。