Make✖️DifyでLINEボットを作る

# はじめに
最近Difyというサービスが大盛り上がりです。
ノーコードで、複雑なLLMのフローを簡単に作成することができ、
例えば、こんな複雑なフローもものの10分程度でパパッと作ることができました。

:::note info
「質問入力」=>「Google検索」=>「検索結果をgptにまとめさせる」
:::


![スクリーンショット 2024-05-09 8.12.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/30a83703-7c3b-7233-0ffb-335933220014.png)

さらにすごいのは、「公開する」ボタンを押すと、URLが発行され、それを人に共有することが出来ます。
GPTsは無課金ユーザーには勧めにくい、という大きな欠点があったが、それが補完されている形ですね。

さらに、なんと、このワークフローはAPI経由でも使うことが出来るので、LINEBotなどの日常の使いやすいツールに組み込むことが出来ます！！！

# 実装

## 事前準備
こちらの記事を参考に、自分のアプリケーションが作ってある状態から記事が始まります！

https://qiita.com/minorun365/items/4c5dba1de7977c386249

また、MakeとLINEBotを繋げる方法についても割愛します。
以下の記事なんかを参考に、おうむ返しLINEBotを作っておいてください。

https://qiita.com/watanabe-tsubasa/items/8342595d641143b780f7

## Difyの操作
### DifyのAPIキーを取得する
作成したワークフローの左側のサイドバーの「APIアクセス」を選択し、右上の「APIキーボタン」を押し、
APIシークレットキーを入手する

![スクリーンショット 2024-05-09 8.29.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/c0a0c2a3-cb59-206e-8edc-9697900e4bde.png)

## withMakeの操作
### 事前準備
MakeとLINEBotを繋げる方法についても割愛します。
以下の記事なんかを参考に、おうむ返しLINEBotを作っておいてください。

https://qiita.com/watanabe-tsubasa/items/8342595d641143b780f7

### 最終的な全体像
まずは最終的な形です。LINEモジュールが二つ並んでいるところに、HTTPモジュールとJSONモジュールを追加していきます。
![スクリーンショット 2024-05-09 8.33.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/3a7e838f-aa1e-3994-9fee-09bd205d4094.png)


### HTTPモジュールの設定
HTTPモジュールの「make a request」を追加する
![スクリーンショット 2024-05-09 8.32.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/b1a26e18-0191-1c14-fc03-1358be113bf6.png)

最終的には以下のように設定します。
```
URL：https://api.dify.ai/v1/workflows/run
Method：POST
Headers
    Content-Type：application/json
    Authorization：Bearer あなたのDifyのAPIキー
Body type：Raw
Content type：JSON（application/json）
Request content：{
"inputs":{"Difyの開始モジュールで設定した変数名":"{{1.events[].message.text}}"},
"response_mode": "blocking",
"user": "abc-123"
}
```

:::note warn
Request contentのinpustの中はDifyの「開始」で設定した変数名です。
Difyを記事の通りに設定した場合は「Input」になります。
userはなんでもいいみたい
:::

が、JSONのパース用にデータを取りたいので、Request contentのInputの中身を固定文字列にして単体で動かしてデータを取得します。

```Request content
{
"inputs":{"Difyの開始モジュールで設定した変数名":"Difyってなに？"},
"response_mode": "blocking",
"user": "abc-123"
}
```

HTTPモジュールを右クリックし、「Run this module only」を選択
![スクリーンショット 2024-05-09 8.46.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/bda0a3d6-86df-e178-7618-22d31f5c7947.png)

実行後、OUTPUTのDataの中身をコピー
![スクリーンショット 2024-05-09 8.48.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/110c0b45-09b7-482c-de3f-3a93302e530b.png)

データを入手できたら、Request contentのInputの中身を忘れずに修正しましょう。
```Request content
{
"inputs":{"Difyの開始モジュールで設定した変数名":"{{1.events[].message.text}}"},
"response_mode": "blocking",
"user": "abc-123"
}
```

### JSONモジュールの設定
JSONモジュールのparseを選択し、Data structureの「Add」ボタンを押し、「generate」に先ほどのDataをコピペ。
するとDifyからのデータを分解して扱うことができます。
LINEBotの返答として使いたい部分は、outputsのtextの中に入っています。
![スクリーンショット 2024-05-09 8.50.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/986e6f14-7ca6-83e3-86f5-47f393c78ad5.png)

### LINEモジュールの設定
あとは、LINEBotの返信内容をJSONモジュールのoutputs: textを指定して完了です！
![スクリーンショット 2024-05-09 8.54.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/25021ec7-6887-01b8-2604-6836c02b45af.png)

# 完成
LINEBotに質問するだけで、検索していい具合に返してくれるというとても実用的なのがあっという間にできちゃいました！
![スクリーンショット 2024-05-09 0.45.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/87c477a2-538c-9402-1c8a-9ac13fddd944.png)

無料だと、検索APIが月に100件だけ（2024/5/8現在）という制限がちょっときついですが、
Difyは他にもいろんな機能があって、会社のマニュアルなんかをベースに応答するチャットボットなんかもパパッと作れちゃうので、いろいろ試してみると面白いでしょう！！
いろいろ試してみてください！