🎉

[Dify] AI Readyな問い合わせフォームを作る

2025/01/23に公開

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通知により、チーム内での情報共有もスムーズに行えます。

今後は、より詳細な分析や、他の問い合わせフォームとの連携など、さらなる活用方法を探ることができます。ぜひ、ご自身の業務に合わせてワークフローをカスタマイズし、より効率的な問い合わせ対応を実現してください。

Sparkle AIブログ

Discussion