はじめに

エイトレッドさんが最近リリースした「AI搭載ワークフロー」を見て、
「これ、コラボフローでもDifyで再現できないかな？」と考えて検証した内容を紹介します。

実現方法

やりたいこと

コラボフローの申請画面で添付ファイル（Word/PowerPointなど）を読み込む
Difyに解析させて添付ファイルの中身からタイトル・内容・予算を抽出
申請フォームに自動で反映する

今回、Difyに解析させる添付ファイルは稟議書を対象としました。
（理由はエイトレッドさんのYouTubeでも稟議書を解析していたからです…）

全体の流れ（プログラム目線）

コラボフローAPIで添付ファイルを取得
Dify APIでステップ1のファイルをアップロード
Dify APIでチャットメッセージを送信
応答（JSON）をパースして、フォーム項目（タイトル/内容/予算）に反映

Dify側の設定

今回のアプリは、ファイルをアップロード → テキスト抽出 → LLMで解析 → 回答を返すという流れで構成しました。

ワークフロー構成

開始：入力としてファイル（sys.files）を受け取る
テキスト抽出：アップロードされたファイルからテキストを抽出
LLM：抽出したテキストから必要な情報をまとめて抜き出す
回答：LLMの出力（text）を返す

ちなみにLLMノードでは、以下のプロンプトを登録しました。
今回はシンプルに「JSON形式で返す」ことを明示しています。
※プロンプトに詳しい方なら、より高度な指示やバリデーションも登録可能だと思います

このファイルから稟議書のタイトル、内容、予算を抽出してください。
JSON形式で { "title": "", "content": "", "budget": "" } として返してください。

実装

1. コラボフローAPIを使用して添付ファイルを取得

Difyとは関係ない箇所になりますが、解析元のファイルを取得します。
注意点や詳細については以下の記事に記載しております。

const fileUrl = `${collaboflow.page.api_endpoint}/v1/files/${file_id}/download`;

const fileResponse = await fetch(fileUrl, {
  method: 'GET',
  credentials: 'include' // セッションCookieを送信
});

const blob = await fileResponse.blob();

2. Dify APIを使用して、ステップ1で取得したファイルをアップロード

コラボフロー上の添付ファイルをダウンロードした後、Dify上にアップロードします。
ちなみにDifyにアップロードしたファイルは一時的に保存され、数日後に自動削除されます。
Dify側で長期保存が必要な場合は、別途ストレージ管理を追加してください。

const uploadForm = new FormData();
uploadForm.append('file', blob, file_name);

const uploadResponse = await fetch('https://api.dify.ricoh.com/v1/files/upload', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${apiKey}`
  },
  body: uploadForm
});

const uploadData = await uploadResponse.json();
const difyFileId = uploadData.id;

3. Dify APIを使用して、チャットメッセージを送信

アップロード結果（ファイルID）をメッセージに含めて送信します。
以下のソースコードではqueryを指定していますが、おそらくDify側では使用されていないと思います。
※LLMノードのプロンプトでも同様の内容を登録しているため

しかし、APIリファレンスには /v1/chat-messages の query は必須 と記載されているため、
念のため空文字や未指定を避けて送信しています。

また、filesを使う場合は、upload_file_id と transfer_method: "local_file" を正しく指定しないと「invalid_param」エラーになるため注意してください。

const chatPayload = {
  inputs: {},
  query: "このファイルから稟議書のタイトル、内容、予算を抽出してください",
  response_mode: "blocking",
  conversation_id: "",
  user: userId,
  files: [
    {
      type: "document",
      transfer_method: "local_file",
      upload_file_id: difyFileId
    }
  ]
};

const response = await fetch('https://api.dify.ricoh.com/v1/chat-messages', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${apiKey}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(chatPayload)
});

4. ステップ3からの応答（JSON）をパースして、フォーム項目（タイトル/内容/予算）に反映

Difyからの応答をコラボフローの項目に反映します。

const data = await response.json();
const parsedAnswer = JSON.parse(data.answer);

// コラボフローの各項目に転記する
const titleField = document.getElementById('fidTitle');
const contentField = document.getElementById('fidContent');
const budgetField = document.getElementById('fidBudget');
if (titleField) titleField.value = parsedAnswer.title || '';
if (contentField) contentField.value = parsedAnswer.content || '';
if (budgetField) budgetField.value = parsedAnswer.budget || '';

今回はDifyのアプリタイプがチャットフローだったため、必要な情報は data.answer に格納されていました。
一方、ワークフローの場合は data.outputs に格納されるため、アプリタイプによって応答形式が異なる点には注意が必要です。

チャットフローの応答

ワークフローの応答

実行結果

ネットから拾ってきた稟議書を添付し、「添付ファイル解析」ボタンを押すと…
無事、稟議書の内容がフォームに自動反映されました！

さいごに

Dify×コラボフローの組み合わせで、入力の手間を大幅に削減できそう、ということがわかりました。
ただし、埋め込みチャットのやり取りをAPIでは取得できないため、精度改善には工夫が必要です。
また実運用する際はAPIキーの管理もきちんとしなくちゃと思っています。