Dockerで構築したDifyを利用しノーコードでRAGのチャットボットを作る

# 概要

最近話題の Dify を利用し、RAG の機能を持ったチャットボットを作る。

Qiita CLI の README をRAGに登録し、Qiita CLI に関する知識を持ったチャットボットをノーコードで作成する。

最終的に作成される画面は以下のイメージ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/4661cd5f-615b-6e18-166c-7c05ca23e8d8.png)

Difyを利用することで、ノーコードで簡単にRAGの機能を持ったチャットボットを作成できる

RAGの参照もととなるQiita Cli のリポジトリは以下の通り。

https://github.com/increments/qiita-cli

## Dify とは

Dify は最近注目されているオープンソースの LLM アプリケーション開発プラットフォーム。

「ワークフロー」を利用して GUI ベースで簡単にLLMアプリケーションを作成し、公開やアプリケーションへの組み込みまで簡単にできる。

日本語で書かれた README もあるので日本人にとっても使いやすい。

https://github.com/langgenius/dify/blob/main/README_JA.md

# RAG の機能を持ったチャットボットの作成

利用するライブラリの各種バージョンは以下の通り

- Dify: v0.6.6
- Docker: 23.0.1

また今回の手順ではOpen AIのAPIを利用するので、事前にOpen AIのAPIキーを取得しておく。

https://platform.openai.com/docs/overview

## 1. Dify の起動

はじめにローカルで Dify を起動する。

ローカルはなくDifyのCloud 版を利用する場合は、以下の URL にアクセスし、アカウントを作成する。

https://cloud.dify.ai/apps

その場合は「1. Dify の起動」の手順は必要なく「2. RAG の作成」 から進める。

### 1-1. Docker を利用した起動

Dify は Docker を利用して起動する。はじめにリポジトリからソースコードをクローンする

```bash
git clone https://github.com/langgenius/dify.git
```

その後 docker-compose を利用して起動する

```bash
cd dify/docker
docker-compose up -d
```

起動に成功したら、以下の URL にアクセスしセットアップを完了させる。この手順は起動後の初回のみ実行する。

- http://localhost/install

以下の画面が表示されている最中はインストールが進んでいるので、管理者アカウントの作成画面に遷移するまで待つ。

![image_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/1e175444-eb6a-d9af-5aff-e11e5b1c5358.png)

### 1-2. 初期設定

必要ライブラリのインストールを完了後、以下の画面がひゅうじされるので、管理者アカウントの作成を行う。

![image_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/04b29eb9-9f97-3a05-510f-8755b46f74d0.png)

必要情報を入力し「セットアップ」をクリックするとログイン画面に遷移する。

作成した管理者アカウントのメールアドレスとパスワードでログインする。

![image_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/d134dad4-9432-6a34-8d1e-df8e07814e4b.png)

ログインに成功し、以下の画面が表示されればセットアップ完了。

![image_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/7e5ddbe5-6734-7ee0-132a-57147d23ea19.png)

## 2. RAGの機能を持ったチャットボットの作成

### 2-1. テンプレートから RAG のチャットボットの雛形を作成

トップページの「テンプレートから作成」を選択する

![image_6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/69ebe74a-b214-e5f8-b0ae-7bdbecf2ab32.png)

テンプレート一覧が表示されるので「Knowledge Retrieval + Chatbot」を選択する。

![image_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/1ec49d89-3f1f-67f5-fea6-32c1c4dada19.png)

チャットボットの名称と説明を入力し、「作成」をクリックする。

![image_7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/51262ba8-83e6-4e1c-7953-b56fd7b7c169.png)

RAGの機能を持つチャットボットのワークフローが、テンプレートから自動で作成される。

![image_8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/883189f8-128b-adca-a75b-9ca2ba0f284f.png)

この段階ではまだ RAG にデータが登録や設定がされていないので、データを登録する。

### 2-2. チャットボット が回答するデータを登録

RAGのデータとしてQiita CLIのREADMEを利用する。Qiita Cliのリポジトリから[README.md](https://github.com/increments/qiita-cli/blob/main/README.md)をダウンロードする。

https://github.com/increments/qiita-cli

表示されているワークフローのブロックのうち、「Knowledge Retrieval」からデータを登録する。

「Knowledge Retrieval」のブロックをクリックし、右側に展開されたパネルの「＋」ボタンをクリックする

![image_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/17f00d1d-f959-8c52-2e20-9603ab929230.png)

初期ではデータが何も登録されていないので、「作成に進む」をクリックしデータを登録する

![image_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/85fa6656-5ed6-4b1d-7c70-42defd31659b.png)

「データソースの選択」で「テキストからインポート」を選択する。そして先ほど保存したQiita Cliの README.md をアップロードし「次へ」をクリックする

![image_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/2bbcc06d-f2c5-54ca-04f8-1b8c68d52a40.png)

「インデックスモード」を「経済的」を選択し、それ以外はデフォルトの設定のまま「保存して処理」をクリックする。

![image_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/73667163-6ea9-3d7e-1197-4cd6048712a4.png)

これによりインデックスが作成されデータが登録される。

再度「スタジオ」から先ほどまで作成していた RAG のワークスペースに移動し、「Knowledge Retrieval」の「＋」ボタンをクリックする。

「参照する知識を選択」で前の手順で登録した「README.md」が表示されるので、選択した後「追加」をクリックする。

![image_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/b8e30728-5b6e-0d7a-620a-96fc4841df09.png)

「知識」のパネルに選択した「README.md」が表示されていれば正常に登録されている。

![image_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/928799cd-342e-44fe-ff7a-17945aab2533.png)

こちらでRAGの知識となるデータの登録が完了となる。

### 2-3. Open AI の API キーの設定

初期の状態では「LLM」のブロックの「モデル」の箇所にワーニングのマークが表示されている。

![image_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/b5331f02-ca45-9daa-7ce9-d7a2b26a92c2.png)

これは モデルが利用するOpen AI の API キーが設定されていないことが原因なので、API キーを設定しOpen AIのGPT モデルを利用できる状態にする。

「モデルプロバイダー」より Open AI の API キーを設定する。画面右上より「設定」をクリックする

![image_9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/ec5ef5ff-cade-c427-e418-a8266ceef59d.png)

「ワークスペース > モデルプロバイダー」より Open AI を選択する。今回はOpenAIのモデルを利用しているが、Azure や AWS などが提供する他のモデルも選択可能である。

![image_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/0618f7e4-3ddb-d2d0-e5b4-f23a052439ef.png)

設定画面が表示されるので API キーを入力し「保存」をクリックする。

![image_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/c1d6322c-821d-a131-ef12-01d4eb27436b.png)

設定が完了すると「モデルプロバイダー」のトップに Open AI が表示され、「API-KEY」が緑色に点灯するのでそれを確認する。

![image_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/552e79aa-c407-8965-00f3-00c941de627b.png)

:::note warn
API キーに誤りがある場合「保存」をクリックした時にエラーが表示される。その場合は API キーを再度確認し、正しい値を入力する。

![image_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/025638d2-ae9e-cb4b-e4f1-992ac0cf8322.png)
:::

### 2-4. Knowledge Retrieval の回答を GPT の入力に設定

最後に「Knowledge Retrieval」の回答を「GPT」の入力に設定する。「LLM」ブロックをクリック後のパネルの「コンテキスト」より「Knowledge Retrieval > result Array[Object]」を選択する。

![image_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/69af642a-2118-5c63-958c-dd5b9e827bf3.png)

これにより直前の「Knowledge Retrieval」の回答をそのまま GPT の入力として設定できる。

# 動作確認

## テスト実行

動作確認は画面上部の「デバッグとプレビュー」より実施できる。クリックすると画面右側に簡易的なチャットウィンドウが表示される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/f0e68306-1a4f-e9cd-9a8d-cb3076cfe438.png)

いくつか質問をしてみる

- 「新しい記事を執筆する場合はどうすればいいですか？」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/933853d4-a5f7-a760-92a5-8a3f2784261a.png)

- 「Qiita Cli を実行するために必要な環境を教えてください」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/933853d4-a5f7-a760-92a5-8a3f2784261a.png)

どちらも README に記載されている正しい情報が表示されている。

## チャットボットとして公開

作成したチャットボットをアプリとして公開する。「公開する」ボタンより「アプリを実行」を選択する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/bf41ac68-9bde-506f-c812-fa8050a46e12.png)

新しいタブで ChatGPT ライクな画面が表示される。こちらが作成したチャットボットとなる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/395cd8b4-8a45-000b-7faa-0577c751b610.png)

デバック画面同様のチャットボットとして利用できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/163680/4661cd5f-615b-6e18-166c-7c05ca23e8d8.png)