Bolt x Difyで学ぶ！API連携実践入門

本日のゴール

アジェンダ

前提：前回と同じアプリ、リーガルチェックを利用して、アプリを作成します。

ワークフローも説明したいので、https://dev-app.myuuu.co.jp/app/83ee683a-61dd-4fe6-813b-778984750ca8/workflowで説明をする。

ウォームアップ(前回のおさらい)と今日のゴールを説明（5分）
API超入門：DifyBackendAPIに使われている技術を理解しよう（5分）
ハンズオン①：自分で作ったDifyアプリをChatflowに接続してみよう（20分）
ハンズオン②：チャットの返信をストリーミングにしてみよう（10分）
開発者ツールを使ってエラーの見方を覚えよう（10分）
質問タイム（10分）

ウォームアップ(前回のおさらい)と今日のゴールを説明

前回はDifyバックエンドAPIを「おまじない」として触れましたが、今回はそのプロンプト部分を詳しく解説します。ゴールは、API仕様を理解しプロンプトを自在に扱えるようになること、そしてプレビューURL取得後の通知ログ確認ができるようになることです。実装では、初期表示メッセージやUI要件（入力欄・送信ボタン・エラーバナーなど）、localStorageに保存するuserIdやconversationId、HTTPリクエストヘッダの設定方法を整理。特にマルチターン送信ルール（初回はblockingでconversation_id取得、以降は同IDで継続、SSE利用で逐次受信）が重要なポイントとして説明していこうと思います。

# 簡易リーガルチェック用チャットWEB — 実装フォーマットプロンプト ## 1) ゴール
PC向けのシンプルなチャットUIを作る。
Dify互換のマルチターンAPIを直接叩く（HTTP/1.1、末尾スラなし）。
--- ## 2) 初期表示（UIのみ・リクエスト送信不要）
左側（ボット側）吹き出しとして、以下をページロード時に自動表示する：

> こんにちは。契約書チェックAIです。ご依頼ありがとうございます。ご提示いただいた「Dify契約書チェックBot\_基準ドキュメント v1.0」に基づき、契約書のレビューを行う準備が整っております。お手数ですが、レビューをご希望の契約書全文をこちらのチャットにお送りください。 --- ## 3) UI要件（最低限） 初期案内メッセージを1件（ボット側） 入力欄 + 送信ボタン + 送信中インジケータ
エラーバナー（400 / 404 / 429 / 5xx を1行で表示）

localStorage と state に以下を保持：

userId（初回生成・以後固定）
conversationId（1ターン目の応答から取得）
--- ## 4) 送信先・ヘッダ・認証
URL：https://dev-app.myuuu.co.jp/v1/chat-messages

APP_TOKEN="app-LBWMkypvBNYnel75b4XkTdnM"

HTTPヘッダ：

Authorization: Bearer <APP_TOKEN>（必須）
Content-Type: application/json
（SSE時のみ）Accept: text/event-stream
--- ## 5) マルチターン送信ルール（最重要）
1ターン目：response_mode: "blocking" で呼び出し、返却JSONの conversation_id を取得して保持。
2ターン目以降：毎回 同じ user と conversation_id を指定。inputs は毎回必須（空でも {} を送る）。
ファイル：フロントでテキスト抽出→ inputs.document_text に貼る、または別APIにアップロード→参照情報を inputs に含める。
SSE：response_mode: "streaming" + Accept: text/event-stream で逐次受信。

DifyBackendAPIに使われている技術を理解しよう。

ハンズオン①：自分で作ったDifyアプリをChatflowに接続してみよう（20分）

ハンズオン②：チャットの返信をストリーミングにしてみよう（10分）

# 簡易リーガルチェック用チャットWEB — 実装フォーマットプロンプト 

## 1) ゴール
PC向けのシンプルなチャットUIを作る。
Dify互換のマルチターンAPIを直接叩く（HTTP/1.1、末尾スラなし）。

## 2) 初期表示（UIのみ・リクエスト送信不要）
左側（ボット側）吹き出しとして、以下をページロード時に自動表示する：

> こんにちは。契約書チェックAIです。
ご依頼ありがとうございます。
ご提示いただいた「Dify契約書チェックBot\_基準ドキュメント v1.0」に基づき、契約書のレビューを行う準備が整っております。
お手数ですが、レビューをご希望の契約書全文をこちらのチャットにお送りください。 

## 3) UI要件（最低限） 初期案内メッセージを1件（ボット側） 入力欄 + 送信ボタン + 送信中インジケータ
エラーバナー（400 / 404 / 429 / 5xx を1行で表示）

localStorage と state に以下を保持：

userId（初回生成・以後固定）
conversationId（1ターン目の応答から取得）

## 4) 送信先・ヘッダ・認証
URL：https://dev-app.myuuu.co.jp/v1/chat-messages
APP_TOKEN="app-f3IILsJLexQJWWYjr9iZqIiZ"

HTTPヘッダ：

Authorization: Bearer <APP_TOKEN>（必須）
Content-Type: application/json
Accept: text/event-stream
--- 

## 5) マルチターン送信ルール（最重要）
1ターン目：response_mode: "streaming" で呼び出し、返却JSONの conversation_id を取得して保持。
2ターン目以降：毎回 同じ user と conversation_id を指定。inputs は毎回必須（空でも {} を送る）。
ファイル：フロントでテキスト抽出→ inputs.document_text に貼る、または別APIにアップロード→参照情報を inputs に含める。
response_mode: "streaming" + Accept: text/event-stream で逐次受信。

プロンプトのところをSSEと書いてある部分について言及する

# 簡易リーガルチェック用チャットWEB — 実装フォーマットプロンプト 

## 1) ゴール
PC向けのシンプルなチャットUIを作る。
Dify互換のマルチターンAPIをストリーミングで叩く（HTTP/1.1、末尾スラなし）。

## 2) 初期表示（UIのみ・リクエスト送信不要）
左側（ボット側）吹き出しとして、以下をページロード時に自動表示する：

> こんにちは。契約書チェックAIです。
ご依頼ありがとうございます。
ご提示いただいた「Dify契約書チェックBot\_基準ドキュメント v1.0」に基づき、契約書のレビューを行う準備が整っております。
お手数ですが、レビューをご希望の契約書全文をこちらのチャットにお送りください。 

## 3) UI要件（最低限） 初期案内メッセージを1件（ボット側） 入力欄 + 送信ボタン + 送信中インジケータ
エラーバナー（400 / 404 / 429 / 5xx を1行で表示）

localStorage と state に以下を保持：

userId（初回生成・以後固定）
conversationId（1ターン目の応答から取得）

## 4) 送信先・ヘッダ・認証
URL：https://dev-app.myuuu.co.jp/v1/chat-messages
APP_TOKEN="app-f3IILsJLexQJWWYjr9iZqIiZ"

HTTPヘッダ：

Authorization: Bearer <APP_TOKEN>（必須）
Content-Type: application/json
Accept: text/event-stream
--- ## 5) マルチターン送信ルール（最重要）
1ターン目：response_mode: **"streaming"** で呼び出し、返却JSONの conversation_id を取得して保持。
2ターン目以降：毎回 同じ user と conversation_id を指定。inputs は毎回必須（空でも {} を送る）。
ファイル：フロントでテキスト抽出→ inputs.document_text に貼る、または別APIにアップロード→参照情報を inputs に含める。
response_mode: "streaming" + Accept: text/event-stream で逐次受信。

サンプル

https://bolt.new/~/sb1-vqvwykww

開発者ツールを使ってエラーの見方を覚えよう（10分）

終わりに

本日はバックエンドAPIの要点を解説し、開発者ツールでフロント—バック接続のデバッグ手順を実演しました。難度は高いですが、第2回まで理解できればDifyアプリを自由にレンダリングし任意のフロントで提供・販売可能に。次回③はノート投稿のワークフローを組み込み凝ったUIを開発、④でDBと認証・課金まで仕上げ、⑤⑥でVolt経由の本格エンジニアリングへ話していきます。

来週以降もよろしくお願いします。

学習ポイント