会話型AIを作れるmiiboを使ってWebサイトにAIが回答してくれるチャット画面と問い合わせ内容に応じてLINEに通知する仕組みを作ってみます。
訪問者がWebサイト上のチャットで問い合わせする(右)と、管理者のLINE（左）に通知がいく
意外とmiiboタグが付いててLINE関連の記事ってないですね。
miibo（ミーボ）って?
DifyやCozeのようなノーコードAIツール（iPaaSみたいな総称ないんかな、AIaaSみたいな）です。LINE Botも作れる。
最近Webサイトリニューアルした模様
miiboでチャットボットを作ってみる（ハンズオン風）
ここはハンズオン風に手順を紹介していきます。
※ちなみに、miiboではチャットボットではなく、会話型AIという表現を使っています。
チャット以外にもインターフェイス拡張していくよねという思想から来ているらしいです。
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に繋げたりもできるので引き続き触ってみようと思います。