miiboでWebサイトに問い合わせ機能とLINE通知機能を付けてみる


会話型AIを作れるmiiboを使ってWebサイトにAIが回答してくれるチャット画面と問い合わせ内容に応じてLINEに通知する仕組みを作ってみます。

> ![](https://i.gyazo.com/2fde5ec7ea19f516d988beefd0d0f05f.gif)
> 訪問者がWebサイト上のチャットで問い合わせする(右)と、管理者のLINE（左）に通知がいく

意外とmiiboタグが付いててLINE関連の記事ってないですね。

## miibo（ミーボ）って?

DifyやCozeのようなノーコードAIツール（iPaaSみたいな総称ないんかな、AIaaSみたいな）です。LINE Botも作れる。

https://miibo.ai/

> ![](https://i.gyazo.com/00ad79ca3b841030bc835a89663b98e1.png)
> 最近Webサイトリニューアルした模様

## miiboでチャットボットを作ってみる（ハンズオン風）

ここはハンズオン風に手順を紹介していきます。

※ちなみに、miiboではチャットボットではなく、会話型AIという表現を使っています。
チャット以外にもインターフェイス拡張していくよねという思想から来ているらしいです。

> ![スクリーンショット 2024-07-31 19.49.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/bdbd4c36-0e4f-6205-fc17-65d04a20a821.png "スクリーンショット 2024-07-31 19.49.07.png")
> 公式ドキュメントから引用: 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を作成する画面になります。

以下の設定を進めていきましょう。

- 1. 名前を入力: 任意の名前、BOTの名前です。
- 2. 提供者名を入力: 

> <img src="https://i.gyazo.com/a092c3c5233459764a7ff980e2cc8892.png" width="400px" />

- 3.イメージの設定

> <img src="https://i.gyazo.com/bcebe66db58034d23bb42eb03bdbc846.png" width="400px" />

アイコンを設定できるのでしてみましたが、無しでも大丈夫です。

- 4.紹介文の設定: 任意の紹介文を入れましょう。

> <img src="https://i.gyazo.com/c9bb990c1538c306c9f76388869394ee.png" width="400px" />


- 5. AIのモデル: `GPT-4o mini`を指定
	- ここはその時々の状況で検討すると良いです。
	- 2024/7/31時点だと`GPT-4o mini`が安くてコスパ良きです。`GPT3.5-Turbo`同様に1会話で5ポイント消費します。※miiboでは無料枠で月に1000ポイント付与されて

### 1-2. プロンプトを指定する

どんな挙動をするBOTにするかをプロンプトを入れて指定します。
miiboでは"AIにプロンプトを考えてもらう機能"があるのでこれを使って対話型に作ってみましょう。便利！

> <img src="https://i.gyazo.com/87150122988c5cf10b932d8d65d9e079.png" width="400px" />

割と雑に要求を出してもしっかりとプロンプトを作ってくれます。生成された文章（プロンプト）をコピペして設定します。

> <img src="https://i.gyazo.com/61c2cb3396be29c81c4bbabb88cdcc0a.png" width="400px" />

今回生成されたプロンプト

```
こんにちは！私はプロトアウトスタジオのチャットボットです。どのようなご用件でしょうか？

下記は現在得られているステート情報です。
ユーザーの名前: #{ユーザーの名前}
ユーザーのメールアドレス: #{ユーザーのメールアドレス}
問い合わせ内容: #{問い合わせ内容}
面談希望日: #{面談希望日}

※ここに記録するステートを全て展開します。

ユーザーが問い合わせをした際の手順は以下の通りです：
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です。

> <img src="https://i.gyazo.com/4df72da95c26c08dafad49894dd0ad8e.png" width="400px" />

作れたのでテストしてみましょう。


"会話をテストする"のボタンからプレビュー画面でAIの会話をテストできます。

> <img  src="https://i.gyazo.com/c15b02863825a9bef2d2716f57a943dd.png" width="400px" />

### 1-4. 公開してみる

テストして問題なく動いてそうだったら公開してみます。

`公開設定` > `一般公開`を選択 >`利用規約に同意して公開`で公開します。

> <img src="https://i.gyazo.com/41c58d880a9b5f0d9ae1515e1ba461ad.png" width="400px" />

確認のモーダルがでるので公開します。

> ![](https://i.gyazo.com/e9ef4ded4910779df2a65b96cdf9df8c.png)

これで公開できました。

8888888

## 2. Webサイトに埋め込む

作ったAIをWebサイトに埋め込んでみましょう。

### 2-0. Webサイトを用意

既に何か利用したいWebサイトがある人はスキップしてください。
Webサイトが無い人はCodePenに適当なHTMLを貼ってWebサイトを作ってみます。

> こんなサイトを用意してみました。
> ![](https://i.gyazo.com/c852aa8e1f9dce710446c6645eb12679.png)

https://codepen.io/n0bisuke/pen/wvLJwNr

↑をフォークして利用してください。

> ちなみにClaudeに作ってもらいました。 https://zenn.dev/n0bisuke/scraps/4a6bc97d7ac5a1

### 2-1. チャットボットを組み込む

`公開設定`の項目の中から`埋め込みタグ`の項目を見つけて中に書いてあるコードをコピーします。

> ![](https://i.gyazo.com/0f217a576a386cdae9266ac35a7a2001.png)

コピーしたコードをHTMLの最後の方の`</body>`の直前に貼り付けます。
(動画撮ったけど消えた...)

<!-- > ![](https://i.gyazo.com/7c5937f51bbeded00c4c9c890e6231cc.gif) -->

うまくいくと相談するボタンがページの右下に出てきて、そこをクリックするとチャットが展開されます。

> ![](https://i.gyazo.com/3b77be4f16e63b67f510198bd7a4eff3.png)


簡単ですね！

## 3. 問い合わせがあったらLINE通知する

miiboでは **会話などに応じてWebhookを飛ばす**ことができます。

https://miibo.dev/admin/webhooks

こちらからWebhookの設定ができます。

LINE Notifyを使って通知しようかと思いましたが、miiboからのHTTPリクエストはJSONでのポストのみになっていて形式的に変換が必要そうだったのでMakeを間に咬ませて実装してみます。

### 3-1. MakeでLINE Notify連携のサーバーを作る

Makeの説明は今回は割愛しますが、色々なサービスを接続することができるiPaaSというサービスの一つです。ノーコード自動化ツール的な。

Make上で、

- Custom Webhook
- LINE Notify
- Webhook response

の三つのモジュールを写真のように接続します。

> ![](https://i.gyazo.com/5c7b292fd4b51f4d7cdafc6cd998c5ea.png)

WebhookのURLを発行するときなどは"miibo連携"など名前を設定しておきます。

> ![](https://i.gyazo.com/7bb9019e0c527f3e7be079a6863d9e2b.png)

Custom Webhookで発行されるURLをコピーしておきます。

> ![スクリーンショット 2024-08-01 15.12.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/138a8ff3-5033-5ab8-b3ec-e4495874a2cb.png "スクリーンショット 2024-08-01 15.12.13.png")

### 3-2. miibo側の設定

先ほどMake側で取得したWebhookのURLをmiiboのWebhookURLの項目を見つけ設定します。


URLを指定し、デフォルトのままPOSTメソッドを指定します。

> ![スクリーンショット 2024-08-01 15.13.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/de109b03-fad8-8484-5449-a32766df1142.png "スクリーンショット 2024-08-01 15.13.16.png")


現状の作成したAIは"入学を検討したい"などのメッセージを入れると、 **まずは"お名前を教えてください"**と聞き返してくるので、 **「AIがユーザーに名前を聞く発話があった時にLINEに通知する」**という挙動にしてみました。

> ![スクリーンショット 2024-08-01 15.14.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/f7982dbc-2795-ce7a-bd9b-ae0c732bf590.png "スクリーンショット 2024-08-01 15.14.06.png")

- トリガー種類: エージェントが応答を返した
- トリガーの条件: 下記の値のいずれかが含まれたら
- 条件の値: `名前を教えて`
- ペイロード: `{"msg": "入学検討の問い合わせがありました。"}`

これを設定し、Webhookの連携も公開設定にしておきます。

### 3-3. 試してみつつJSONの中身確認

この状態でAIに話しかけると、Webhookが反応して、Makeに情報が送信されます。
（MakeはあらかじめRun Onceで実行しておく）

> ![スクリーンショット 2024-08-01 15.20.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/12e730ca-5e5d-5f8a-523c-b9307c5726a6.png "スクリーンショット 2024-08-01 15.20.45.png")

すると以下のような中身が送られてきていることが分かります。

どんなJSONになっているかは[こちらの資料](https://zenn.dev/makunugi/books/c5b3307e39dde3/viewer/02a8de)が分かりやすいです。

> ![スクリーンショット 2024-08-01 15.14.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/160772cf-3a41-a895-e87b-efa6e4968cfc.png "スクリーンショット 2024-08-01 15.14.42.png")

`history`のキーに会話ログとかも入っていてそれが取れるの良いですね。

### 3-4. LINEに繋げる

LINE Notifyを接続し、管理者に通知する仕組みを作れば完成です。

> ![スクリーンショット 2024-08-01 15.14.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/d43db353-cd2a-cbba-4847-75a090c83940.png "スクリーンショット 2024-08-01 15.14.28.png")

## 動かしてみる

お疲れ様でした。最後に動かした際の挙動です。

Webサイトにユーザーがアクセスし、チャットで会話を行います。

> ![スクリーンショット 2024-08-01 15.25.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/8a5719b9-153c-1440-419c-701838246a70.png "スクリーンショット 2024-08-01 15.25.10.png")


AIがユーザーに「お名前を教えてください」的なメッセージを送ったらそれをトリガーにLINEにも通知がいくようになりました。

> ![スクリーンショット 2024-08-01 15.24.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/010123e6-c897-ebd5-c97b-d9592e2c5b25.png "スクリーンショット 2024-08-01 15.24.29.png")

## LINEでユーザーの挙動を知れるの便利

もっと複雑なログも取れると思いますが、とりあえずは興味持ってくれてる人がきたことをLINEに通知してみる仕組みを作ってみました。

他のAPIに繋げたりもできるので引き続き触ってみようと思います。