最近話題の「Dify」で社内チャットボットを作成しよう！

## Difyとは
Difyとは簡単にAIアプリを作ることができるプラットフォームです。
直感的なUIと豊富な機能を備えているので、エンジニアはもちろん、プログラミング未経験者でも簡単にAIアプリを作成できます。

## 作るもの
今回は、私が働いている[株式会社Hajimariのホームページ](https://hajimari.inc/)を学習させ、会社について教えてくれる簡易的なチャットボットを作成します。

## 作ってみよう
### Difyにログイン
まず、公式サイトにアクセスし、右上にある「始める」からログインします。GoogleまたはGithubのアカウントでログインできます。


https://dify.ai/jp


### アプリを作成
ログイン後、「最初から作成」をクリックし、アプリのタイプとして「チャットボット」を選択します。
オーケストレーション方法は「Chatflow」を選び、アプリ名を入力して「作成する」を押します。


![スクリーンショット 2024-06-24 4.11.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3540216/c7ea7104-f612-d9de-2518-5e1d62502a89.png)

作成後は以下のように、ユーザーの質問に対してGPT3.5 Turbo が回答してくれる構成になっています。

![スクリーンショット 2024-06-24 4.32.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3540216/1a8b6ee6-4fd5-d22a-65ff-a0565aa6d577.png)

### ナレッジの作成
#### データソースの選択
次に、チャットボットの情報源となるナレッジを作成します。
画面上部の「ナレッジ」 > 「知識を作成」をクリックし、データソースとして「ウェブサイトから同期」を選びます。

![スクリーンショット 2024-06-24 4.55.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3540216/2e43fd88-e5af-c2d0-b26f-beb48314fe6b.png)


#### FireCrawlのAPIキーの取得
「ウェブサイトから同期」機能を使うにはFireCrawlというツールのAPIキーが必要です。
FireCrawlの公式サイトでアカウントを作成し、「Dashboard」 > 「API Keys」からAPIキーをコピーします。

https://www.firecrawl.dev/

#### FireCrawlのAPIキーを設定
Difyの「データソースの選択」ページに戻り、「Configure」 > 「Configure」を選択してAPIキーを貼り付けて保存します。
「Base URL」は空欄で大丈夫です。

![スクリーンショット 2024-06-24 5.19.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3540216/90dec04f-4a4f-1da8-4ca0-4283c56748c0.png)

#### データの取得
APIキーが無事設定できたら以下のような画面になります。

![スクリーンショット 2024-06-24 5.27.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3540216/afa3a86c-2dc9-b23d-3c65-02aebf4ad8dc.png)

それぞれの項目の説明は[この記事](https://qiita.com/hudebakononaka/items/2997188ce890feb39ee5)から引用させて頂きます。
> - Crawl sub-pages: サブページもクロールするかどうかを指定します。
> - Limit: クロールするページの最大数を指定します（必須項目）。
> - Max depth: クロールの深さを指定します。
> - Exclude paths: クロールしないパスを指定します（例: blog/, about/）。
> - Include only paths: クロールするパスを指定します（例: articles/*）。
> - Extract only main content: メインコンテンツのみを抽出するかどうかを指定します（ヘッダー、ナビゲーション、フッターなどを除外）。


https://qiita.com/hudebakononaka/items/2997188ce890feb39ee5

今回は以下のように設定しました。

![スクリーンショット 2024-06-24 5.38.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3540216/4e6a1b1c-b6bd-a1a3-e46d-35037cfa039c.png)

設定できたら「Run」をクリックします。
少し待つと以下のように取得してきたサイトのURLの一覧が表示されるので、ナレッジとして使用したいものを選択して「次へ」を押します。

![スクリーンショット 2024-06-24 5.39.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3540216/33996ebb-2a19-f67f-03af-f33fb74d9a75.png)

#### ナレッジのカスタマイズ
ナレッジとして使用したいものを選択すると、ナレッジのカスタマイズ画面が表示されます。
今回は簡易的なチャットボットなので、以下のように「自動」と「経済的」を選択して保存します。
これでナレッジの作成が完了です。

![スクリーンショット 2024-06-24 5.43.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3540216/bc08d264-1a83-f171-936a-ef6927adee9a.png)

### ナレッジとアプリを紐づける
ナレッジの作成が完了したのでアプリとナレッジの紐付けを行なっていきます。
「スタジオ」ページに戻って、「開始」と「LLM」を結ぶ線をクリックして、「知識取得」を追加します。

![スクリーンショット 2024-06-24 6.04.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3540216/81a2af99-382a-8d2f-2610-2c0780bfbd11.png)

「知識」の右にある「＋」ボタンをクリックして、先程作成したナレッジを選択します。
これでナレッジとアプリの紐付けが完了です。

![スクリーンショット 2024-06-24 6.43.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3540216/e457c5e6-d3c4-f2c9-16de-b6dfb531e500.png)


### プロンプトの設定
最後に、紐付けたナレッジから回答を生成するようにプロンプトを設定していきます。
「知識取得」の右にある「LLM」を選択して、以下の設定を行います。

- コンテキスト：result
- SYSTEM：コンテキスト（ナレッジ）を基に回答を生成するよう指示する。

![スクリーンショット 2024-06-24 6.38.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3540216/949fb25a-71f0-138b-bc3f-f007e1b9a44f.png)


### 動作確認！
「デバッグとプレビュー」をクリックするとチャット画面が表示されるので、質問して動作確認をしてみます。
試しにhajimariのビジョンについて聞いてみると、ちゃんと回答が生成されました！

![スクリーンショット 2024-06-24 0.35.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3540216/0210a093-41d0-9b0d-54f5-2b6ab6567c09.png)

右上の「公開する」をクリックするとURLが発行され、誰でもこのチャットボットが使えるようになります。
他にもサイトに埋め込んだり、APIとして使用することも可能だそうです！
便利ですね！

## まとめ
最後まで見て頂きありがとうございます！
今回初めてDifyを触ったのですが、簡易的なものとはいえ、わずか10分程度でチャットボットが作成できるのは驚きでした。
Difyを使ってWeb開発の幅を広げられるよう、もっと勉強していこうと思います！