💡

[Dify] Webサイト情報を元に、Q&Aが行えるチャットボットを作ってみた

2025/01/23に公開

Dify でWebサイトの内容に基づくQ&Aチャットボットを作成する

Dify は、Webサイトの内容を元にしたQ&Aチャットボットを簡単に作成できる強力なツールです。Webサイトの情報を自動的に取得し、その内容に基づいて質問に答えることができるチャットボットを構築することができます。

本記事では、DifyでWebサイトの内容を取り込み、それを基にしたチャットボットの作成方法について解説します。Firecrawlを使ってWebサイトの内容を取得し、その情報を元にユーザーからの質問に答えるチャットボットを作成する手順を詳しく説明していきます。

Dify でWebサイトQ&Aチャットボットを作成する流れ

  • Webサイトの内容をFirecrawlで取得する
  • 取得したデータを使って、チャットボットを設定・カスタマイズする

前準備

このワークフローの作成には、データソースとして、Firecrawl または Jina Reader による Webサイトの利用が有効化されている必要があります。

  • データソースを設定する ( Firecrawl )
  • データソースを設定する ( Jina Reader )

LLMがQ&Aを行う知識をWebサイトから取得する

Difyでは、クローラーを用いることで、Webサイトの内容を、Dify のナレッジとして同期し、チャットボットやワークフローで利用することができます。

ナレッジタブを開き、ナレッジの作成をクリックして、始めます。

http://aimedia.kinsta.cloud/wp-content/uploads/2025/01/cloud.dify_.ai_datasets.png

データソースの選択画面では、”ウェブサイトから同期”を選択。プロバイダーは、今回はFirecrawlを用います。
また、テストサイトとして、CarMeを対象としてみます。

https://car-me.jp/

サブページをクロールするにチェック
また、テストのため、今回は10ページ以内に制限
最大深度は、ディレクトリをどこまでふかぼるかですが、今回は設定なしで進めます。

http://aimedia.kinsta.cloud/wp-content/uploads/2025/01/cloud.dify_.ai_datasets_create-1.png

URL右の実行ボタンを押すと、クローリングが行われます。
以下のように、ページがスクレイピングされました。
実際の運用では、除外パス等クローリング要件を設定して、効率よくナレッジを読み込みましょう。

http://aimedia.kinsta.cloud/wp-content/uploads/2025/01/cloud.dify_.ai_datasets2.png

“次へ”を押して進みます。
テキストの前処理とクリーニング
ここでは、取得したテキストデータをどのように分割するか、LLMに検索させるかを設定します。今回は、検索設定をハイブリッド検索に変更します。

この画面の設定の詳しい方法は、別途解説します

  • ナレッジ。テキストの前処理とクリーニング

http://aimedia.kinsta.cloud/wp-content/uploads/2025/01/cloud.dify_.ai_datasets_create-2.png

http://aimedia.kinsta.cloud/wp-content/uploads/2025/01/cloud.dify_.ai_datasets4.png

保存して処理を押して進みます。
埋め込み処理が順次行われていきます。これで、ナレッジの作成が完了しました。

http://aimedia.kinsta.cloud/wp-content/uploads/2025/01/cloud.dify_.ai_datasets5.png

ドキュメントに移動すると。今回クローリングした10ページがファイルとして登録されます。

http://aimedia.kinsta.cloud/wp-content/uploads/2025/01/cloud.dify_.ai_datasets6.png

設定タブに移動し、ナレッジ名、ナレッジの説明を変更しておきましょう

ナレッジ名:新車・自動車ニュースのWEBマガジン|CarMe[カーミー]

ナレッジの説明:CarMeのページをクローリング ( https://car-me.jp/ )

ナレッジに対してQ&Aを行うチャットボットを作成する

スタジオを開き「最初から作成」をクリックして始めます。
アプリの種類は、チャットボットを選択。

アプリのアイコンと名前、説明を入力してください。

例:

アプリの名前:
WebサイトへのQ&A

説明:
Webサイトの内容に対して、Q&Aを行います。

http://aimedia.kinsta.cloud/wp-content/uploads/2025/01/cloud.dify_.ai_datasets7.png

アプリが作成されると、チャットボットの設定とデバッグが行える画面が表示されます。
ここから、Webサイトに対してQ&Aを行うチャットボットの設定とテストを行なっていきます。

http://aimedia.kinsta.cloud/wp-content/uploads/2025/01/cloud.dify_.ai_datasets8.png

チャットボットを設定する

先ほど作成したナレッジをチャットボットが利用するため、”コンテキスト”を設定します。コンテキスト欄の +追加 ボタンをクリックし、参照するナレッジとして、先ほど作成した「新車・自動車ニュースのWebマガジン | CarMe[カーミー]」を選択します。これで、チャットボットがナレッジを利用することができるようになりました。

“手順”には、チャットボットのデフォルトプロンプトを入力します。

あなたは新車やカー用品に関する専門家として、ユーザーに正確で分かりやすい情報を提供するチャットボットです。質問があれば、関連する情報を検索し、信頼性の高い回答を提供してください。以下のガイドラインに従って回答してください:

  1. 与えられたコンテキストを元に回答してください。
  2. ユーザーの質問が曖昧な場合は、より具体的な質問を促してください。
  3. 回答は簡潔かつ分かりやすくしてください。
  4. 車やカー用品の専門用語は簡単に説明してください(必要に応じて例を挙げる)。

例:

  • 質問: 「燃費の良い新車を教えてください」
    回答: 「燃費の良い車としては、トヨタのプリウスやホンダのフィットが人気です。燃費性能や具体的なモデルについての情報が知りたい場合、さらに詳しくお答えしますので教えてください。」

さあ、ユーザーの質問に応えてください!

デバッグとプレビュー画面で、質問してみましょう。
「ゴルフ GTI パフォーマンスのおすすめポイントは?」
に対して、以下の記事のナレッジを元に回答していることが確認できます。

https://car-me.jp/aracan/articles/54322

http://aimedia.kinsta.cloud/wp-content/uploads/2025/01/cloud.dify_.ai_datasets9.png

コンテキストやプロンプトがどのように渡されたかについては、プロンプトログをクリックすると確認できます。

http://aimedia.kinsta.cloud/wp-content/uploads/2025/01/cloud.dify_.ai_datasets10.png

まとめ

本記事では、Webサイトを元にQ&Aが行えるチャットボットを作成する方法について解説しました。主なポイントは以下の通りです:

  • Firecrawlを使用してWebサイトから効率的にナレッジを取得できる
  • 取得したナレッジをDifyで適切に処理し、チャットボットの基盤として活用可能
  • 専門的なプロンプトを設定することで、ユーザーに分かりやすい回答を提供できる

このようなチャットボットを導入することで、Webサイトの情報を活用した効率的なQ&A対応が可能になります。また、一度構築したシステムは継続的に利用できるため、長期的な業務効率の向上にも貢献します。

今後は、クローリング設定の最適化や、より洗練されたプロンプトの作成など、さらなる改善の余地があります。ぜひ、ご自身のWebサイトに合わせてカスタマイズし、より効果的なQ&Aチャットボットを実現してください。

Sparkle AIブログ

Discussion