「ChatGPTに質問すると、回答をslackに飛ばしてくれるアプリ」をDifyで作ってみた

## はじめに
先日、「Dify」を初めて触ってみました。

https://qiita.com/uccy/items/570f7802c64f54f854ea

今回はもうちょっとレベルアップして、「**AI（ChatGPT）に質問すると、その回答をslackに飛ばす**」という謎なアプリを構築してみました。

## やってみた
Difyにログインします。

https://dify.ai/jp

「最初から作成」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/e09704a4-adce-2080-eca4-985bc17d91a3.png)

今回は一連の流れを作りたいので「ワークフロー」を選択し、アプリ名はslackと連携してみたかったので、適当に「slack連携」としました。
「作成する」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/8e648505-58d2-512f-5917-115112e3891a.png)

開始と書かれたブロックが現れました。
右側の+をクリックすると次に繋げるブロックを選択することができます。
まずはChatGPTに質問をしたいので、LLM(Large Language Models)を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/ceb18f7b-b957-e368-928e-e86b411f940d.png)

LLMのブロックが開始ブロックの次に現れました。
次に、LLMブロックの+ボタンをクリックし、その次の処理を設定します。
「ツール」をクリックし、Slackの「Incoming Webhook to send message」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/35136f1d-81a1-0199-4ace-0d144349e275.png)

そして最後に終了ブロックをくっ付けます。
一連の流れはこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/89b5396e-321f-73ec-e31c-f943a2c887cc.png)

chatGPTからの回答をslackに送る（連携させる）ためには[slack api](https://api.slack.com/)を使用します。
skapi apiのページを開き、「Get started」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/dc523795-a143-584d-4ec6-fcde3b06fd59.png)

「Create an App」をクリックします。（先にYour Appsをクリックするんだっけな...?）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/c2b6480f-db4a-2d84-f0c8-a5301bac2d2d.png)

「From scratch」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/db40d0a2-ae73-2ec0-2615-e31b1097b030.png)

App Nameに適当な名前を入力します。
Pick a workspace to develop your app inには、api（chatGPTからの回答）を飛ばすslackのワークスペースを指定します。
今回は事前に「test」というワークスペースを作成しました。
「Create App」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/52e690d1-d9a3-b6f7-d996-61443908c13c.png)

Activate Incoming WebhooksをONにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/3da2677c-e4b6-e093-dcf4-666cbcb2a24f.png)

「Add New Webhook to Workspace」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/45eaf9a8-d7fc-4118-df9e-1b3e91a20f9f.png)

API(ChatGPT)を飛ばすslackのチャンネルを指定します。
今回は事前に作成しておいた「# dify連携」を選択しました。
「許可する」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/0f40e6b3-c12c-0ab7-8b24-13a840530870.png)

「Incoming Webhooks」をクリックし、Webhook URLをコピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/98eeb064-2555-07e2-0e92-9b36b9cc0dd5.png)

difyの画面に戻り、Incoming Webhook to send messageのブロックをクリックし、コピーしたWebhook URLを貼り付けます。
※LLMブロックのモデルがgpt-3.5-turboに変わってますが、モデル変更について後述しますので、気にしないで下さい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/7e31727f-6dcb-5340-8fd7-d0a5b762a96d.png)

開始ブロックをクリックし、入力フィールドの+ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/c7793ea2-f8e3-7950-d25e-1fb1006da221.png)

フィールドタイプは短文、変数名はuser_question、ラベル名は「質問を入力してください」、最大長は48（デフォルト設定）とます。
これによって、difyで作成したフローを実行したときに、ChatGPTに対する質問の入力を促します。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/0e70e2d8-6f5f-d125-1e7b-63a9feb4e86b.png">

次にLLMブロックをクリックします。モデルを変更することができます。
SYSTEM欄には、LLMブロックに対するinputを入力します。
開始ブロックで入力された質問がuser_questionに格納され、それをLLMブロックに受け渡します。
変数を受け渡すには、変数名の前に **{** を入力します。（{user_question）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/ec11ad09-acbb-1c43-652c-4910d6eaf2f6.png)

では、このフローをテストしてみましょう。
右上の「実行」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/4fb43f99-d7b8-a508-9196-fb1f333d12f5.png)

質問の入力を促されました。
「世界で一番高い山は？」と入力してみます。
「実行を開始」ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/be19f2af-dbfa-bc75-43a0-09f91151c97d.png)

ステータスは成功となっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/797e82c0-1977-2a16-17a8-c202524f6590.png)

slackを見てみましょう。
すると、**TestAppから質問の回答が届いていました！成功です！**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/c8da2804-cba5-ee4c-c1ce-abf93a6163bf.png)

ではこのアプリを公開してみましょう。
右上の「公開する」ボタンをクリックすると、アプリが公開され、URLを取得することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/b2b61a04-8f69-19fd-cbae-ff83e59434eb.png)

スマホから試してみようと思います。
入手したURLにスマホからアクセスしてみます。
それっぽい画面が出てきました。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/85349a88-f5c5-e8b4-de85-943e011e3722.png">

サザエさんの家族構成を教えてもらうことにしました。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/89401761-f6e2-194d-27fe-08cee554d5f1.png">

実行は成功したっぽいです。
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/c51501e7-4002-ed8c-db0e-06f1cccfd3a2.png">

slackを見てみましょう。
しっかり回答が届いていました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/f793998f-d4cf-8709-0207-088e651e5c85.png)

***
"サザエさんの家族構成は、夫のマスオさん、長女の波子さん、長男のタラちゃん、そしてサザエさん自身の4人家族です。さらに、サザエさんの両親であるフネさんとワカメさんも一緒に住んでいます。家族全員が仲良く暮らしている様子が描かれています。"
***

## おわりに
今回はdifyを使って簡単なワークフローを作ってみました！
条件分岐や繰り返しもあるので、いろんなところで効率化を図れそうです！

あと、**私がサザエさんの家族構成を勘違いしていた**ことも判明しました。

![AdobeStock_270213828.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3848705/79653f4c-90f8-0179-82c4-b567f7aa36d0.jpeg)