DifyでWordpressにチャットフロー（RAG）機能を紐づける

こんにちは。
株式会社クラスアクト インフラストラクチャ事業部の大塚です。

今回はDifyで作成したチャットフロー（RAG）をWordpressに仕込む手順をメモっておきたいと思います。
Dify環境及びWordpress環境はともにDocker Composeで同じネットワーク上にデプロイしています。

環境構築

Dify ナレッジ作成

RAG環境を作るサンプルとして、今回は厚生労働省が公開している就業規則のモデルを学習させたいと思います。
PDFをインポートしておきます。

Difyの管理画面からナレッジのタブを開きます。
ナレッジベースを作成を押下します。

今回はPDFファイルになるので、テキストファイルからインポートしていきます。

以下の設定で処理していきます。

処理が開始されました。

ステータスが利用可能になればOKです。

名前がわかりづらいので、ナレッジの名前を変えておきます。

Dify チャットフロー作成

Difyのスタジオを開きます。最初から作成を押下していきます。

以下のような内容で作成します。

以下のような画面が表示されます。
開始ノードと開始ノードの間に知識検索ノードを追加していきます。

追加した知識検索ノードをアクティブにして、画面右に表示されているナレッジベースに
先程追加したナレッジを紐づけます。

LLMノードでは以下の設定を入れました。
・AIモデル：gpt-5-nano
・コンテキスト：知識検索 result
・SYSTEM：

・あなたは株式会社クラスアクトの社員で、名前はAIチャットボットです。
・あなたの仕事は、クラスアクトの公式Webサイトに訪問した求職者や興味を持った社会人に対して、親切丁寧に自社について回答することです。
・回答は必ず{{#context#}}の情報のみを使用してください。この情報はクラスアクトの就業規則として回答していただいて構いません。
・コンテキストに記載されていない情報については、「申し訳ございませんが、その件については詳細な情報を持っておりません」と謝罪し、以下をご案内してください：
  - 弊社公式LINE：https://lin.ee/cBSBcYz
  - 公式サイトお問い合わせページ：https://www.classact.co.jp/contact/

設定を入れましたらプレビューを押下して、内容を確認していきます。
この時、今どこの処理なのかを目視で追えるようになっています。素晴らしいですね！

これを公開します。
ウェブサイトに埋め込むに出力されているHTMLを控えます。

wordpressに埋め込んでいく

WordpressのプラグインでSimpleCustom CSS and JSをインストールします。インストールしたら有効化もします。
他の方法もあるかもしれませんが、これを使って先程のHTMLを仕込みます。
他の方法もあるのでしょうが、私はこれが気に入っているのでこれを使います。

カスタムコードのHTMLコードの追加を押下します。

Difyで控えたHTMLコードを貼り付けます。
公開しましょう。

Wordpressのホーム画面に移動しますとチャットページが表示されるようになりました。
回答も出来ていますね。