[Dify] AI Readyな問い合わせフォームを作る
AI Ready な問い合わせフォームを作成する
LLM(大規模言語モデル)は、自然言語処理の力を活用し、業務の効率化や顧客体験の向上を可能にする強力なツールです。特に、問い合わせフォームに入力された内容をもとに、顧客への具体的な提案内容まで自動生成する仕組みは、ビジネスプロセスを革新するポテンシャルを秘めています。従来のフォームでは、入力データの確認や対応内容の検討に多くの時間が割かれていましたが、LLMを活用することで、これらの作業を迅速かつ正確に処理することが可能になります。
本記事では、Dify を使ってAI Readyな問い合わせフォームを活用し、自社製品情報をもとに提案内容を自動生成するツールの構築方法をご紹介します。この仕組みにより、業務の効率化だけでなく、顧客満足度の向上や提案の質の向上を目指します。
Dify で AI Ready な問い合わせフォームを作る流れ
- 問い合わせ内容の分析ワークフローを作成する
- フォームへの送信をトリガーとして、Difyのワークフローを呼び出す (Google Form)
問い合わせ内容の分析ワークフローを作成する
スタジオを開き「最初から作成」をクリックして始めます。
アプリの種類は、ワークフローを選択。
アプリのアイコンと名前、説明を入力してください。
アプリの名前:
問い合わせ内容の分析ワークフロー
アプリの説明:
フォームから送信された問い合わせ内容を分析し、通知するワークフロー
アプリが作成されると、開始ノードのみが存在するワークフローの編集画面が表示されます。
ここから、問い合わせ内容を受け取り、LLMを用いて分析を行うワークフローを作成していきます。
開始ノードで問い合わせフォームへの入力内容を受け取る
開始ノードでは、入力フィールドとして、ワークフローで使用できる入力を設定することができます。開始ノードをクリックすると、設定画面が表示されます。入力フィールドの右側にある + ボタンをクリックすると、新しい入力を追加できます。
今回は、問い合わせした方の所属企業のWebサイトのURL、問い合わせ内容、問い合わせした方のお名前を受け取ることにします。
入力フィールドの設定内容は、以下の3つです。
開始ノードの説明には、「問い合わせフォームの内容を受け取る」と入力しました。
タイプ | 変数名 | ラベル名 | 最大長 | 必須 |
---|---|---|---|---|
短文 | url | url | 48 | チェック |
段落 | content | content | 480 | チェック |
問い合わせ企業の事業内容を把握するする
次に、FireCrawlのCrawlツールを用いて、問い合わせ企業のWebサイトを分析し、事業内容を把握します。
FireCrawlツールを追加し、開始ノードと連結します。FireCrawlツールの設定画面を開き、
Start URL:開始/{x}url
( 開始ノードで受け取ったURL )
Maximum page to Crawl : 10
Formats: markdown
Only Main Content: True
に設定します。ノードの説明は、「問い合わせ企業のWebサイトをクローリングする」としました。
次に、コードブロックを連結します。
このコードブロックでは、Crawl ツールが出力するJSONから、data プロパティの値を取得します。data は配列でクローリングの結果が入っています。
入力変数、JavaScript のコード、出力変数を以下のように設定します。
入力変数:arg1 ( Craw/json Array[Object]
出力変数:result ( Array[Object] )
JavaScript:
// From arg1 of json, pick "data" array and return
function main({arg1}) {
return {
result: arg1[0].data
};
}
次に、イテレーションブロックを追加・連結します。
イテレーション内では、クローリングで取得されたページそれぞれの内容に対して、自社サービスを用いた提案内容をLLMに考えさせます。
入力に、先ほどのコードブロックの出力を設定します。
イテレーション内に、コードブロック、LLMブロックを追加して連結した上で、イテレーションブロックの出力を、LLMの出力にしてください。
イテレーション内では、再度コードブロックを用いて、ページの内容が書かれたmarkdown取得します。
次に、LLMで、提案内容を考えさせます。
例えば、以下のようなプロンプトを用います。
以下は企業のWebサイトの内容です。SMS(ショートメッセージ)を活用したマーケティング施策、あるいは業務効率化の提案を
[ 提案タイトル 20字程度 ]
[ 提案内容 100字程度 ]
のフォーマットで、3つだして
</>コード2/{x}result
イテレーションが終わった後は、テンプレートブロックを用いて、それぞれの結果を1つにまとめました。ここまでで、ページそれぞれに対して、提案内容の案が揃っています。
以下はテンプレートのコードです。
{% for item in arg1 %}
{{ item }}
{% endfor %}
最後に、再度LLMを用いて、顧客の問い合わせ内容を踏まえて、提案内容を5つ選び、仕上げます。
以下は、Webサイトの内容から考えた提案内容の案です。顧客の問い合わせ内容も踏まえて、顧客にとって魅力的だと思われる案を5つ選び、魅力的な提案に改善してください。
[ 顧客の問い合わせ内容 ]
開始/{x}content
[ 提案内容の案 ]
テンプレート/{x}output
ワークフローの最後には、Slackへの通知も追加しました。これで、問い合わせフォームの内容の分析が完了後、自動的にSlackへも共有されるので、結果の確認がスムーズになります。
問い合わせフォームと Dify を連携する
世の中には様々な問い合わせフォームがあり、全てを解説するのは難しいので、今回は Google Forms を用いた例をご紹介します。
Google Forms
https://www.google.com/intl/ja_jp/forms/about/
Google Forms の使い方は、本記事では割愛します。以下のようなテスト用のフォームを作成しました。
右上メニューを開き、”スクリプトエディタ”を選択してください。
すると、Google App Script のエディタが開きます。ここで、フォームから送信された内容を用いて、Dify のワークフローを呼び出すコードを書きます。
apiKeyは、作成したワークフローのAPI Keyに置き換えてください。
Dify スタジオ左側メニューのAPIアクセスを開き、右上のAPI キーボタンを押します。
すると、APIシークレットキーの作成モーダルが開くので、新しく作成してコピーしましょう。
Google App Scriptでは、myFunction 関数の下に、新たに、onFormSubmit関数を定義しました。
/**
* フォーム送信時に実行される関数
* (トリガーの「フォーム送信時」に紐づける必要があります)
*/
function onFormSubmit(e) {
// 送信された回答を取得
var itemResponses = e.response.getItemResponses();
// フォームにある「URL」「Name」という設問タイトルを元に入力値を取得
var formUrl = "https://www.fabrica-com.co.jp/";
var formContent = "中古車販売店にとって魅力的なマーケティング施策や業務効率化を行いたい";
for (var i = 0; i < itemResponses.length; i++) {
var item = itemResponses[i].getItem();
var title = item.getTitle();
var response = itemResponses[i].getResponse();
// 質問タイトルが「URL」の場合
if (title === "URL") {
formUrl = response;
}
// 質問タイトルが「お問い合わせ内容」の場合
if (title === "お問い合わせ内容") {
formContent = response;
}
}
// Dify ワークフローAPIのエンドポイント
var endPoint = "https://api.dify.ai/v1/workflows/run";
// サーバー側に安全に保管してある API キー(ここでは例として直接書いています)
var apiKey = "ApiKeyForDifyApp"; // 実際のAPIキーを設定
// リクエストボディ (payload) の作成
var payload = {
"inputs": {
// ワークフローで定義された変数に合わせてキーを設定してください
"url": formUrl,
"content": formContent
},
"response_mode": "blocking",
"user": "google_app_script" // 任意のエンドユーザーIDやセッションID等に置き換えてください
};
// UrlFetchAppで呼び出す際のオプション
var options = {
"method": "post",
"contentType": "application/json",
"muteHttpExceptions": true,
"headers": {
"Authorization": "Bearer " + apiKey
},
"payload": JSON.stringify(payload)
};
try {
// ワークフロー実行リクエストを送信
var response = UrlFetchApp.fetch(endPoint, options);
// 返却された結果をログに出力 (必要に応じて加工)
var result = JSON.parse(response.getContentText());
Logger.log(result);
} catch (error) {
// エラー発生時の処理
Logger.log("エラーが発生しました: " + error);
}
}
次に、この関数がフォーム送信時に実行されるようにします。左側メニューのトリガー(タイマーアイコン)を開きます。右下のトリガー追加ボタンを押して、トリガーを作成します。
実行する関数は、先ほど入力した onFormSubmit, 実行するデプロイは Head、イベントのソースはフォームから、イベントの種類はフォーム送信時、を選びます。
さて、実際にフォームへ送信してみましょう。
実行結果は、Google App Script の実行数画面、Dify のログ画面、あるいは Slackへの通知で確認できます。
Google App Script の実行数画面
Dify のログ画面
まとめ
本記事では、AI Readyな問い合わせフォームの構築方法について解説しました。主なポイントは以下の通りです:
- Difyを使用して問い合わせ内容の分析ワークフローを作成できる
- Google Formsと連携して問い合わせフォームの自動分析が可能
- Slack通知との連携により、分析結果の共有が効率的に行える
このようなAI Readyな問い合わせフォームを導入することで、問い合わせ内容の分析を自動化し、より迅速な顧客対応が可能になります。また、分析結果のSlack通知により、チーム内での情報共有もスムーズに行えます。
今後は、より詳細な分析や、他の問い合わせフォームとの連携など、さらなる活用方法を探ることができます。ぜひ、ご自身の業務に合わせてワークフローをカスタマイズし、より効率的な問い合わせ対応を実現してください。
Discussion