V0からDifyを動かす方法〜AI先生を例に〜

くすりばこ

2024年10月19日 18:09

【この記事はこんな人にオススメ】
・Dify、V0を触ったことがある人
・V0で作ったフロントエンドからDifyをバックエンドとして呼び出してみたい人
・可能な限り無料でやりたい人

・V0とDifyを繋げてみたい！

最近、「V0で作ったUIからDify動かせる！」ということを知りました。

で、自分もやってみようと思ったところ、あんまり細かく紹介している人がいない。

でも、あれこれ試行錯誤したらなんとかできました。

というわけで、今回は「どのように作成・修正していったのか？」について説明したいと思います。（なので、初回登録関係は省きます）

「記事を読むのもメンドー」と思う方は、以下にV0のチャットを公開しているので、ぜひ見てみてください（その代わりスキは押してね👍）

・実際の繋げ方

1. Difyのアプリを新しく作る

まずは新しくDifyのアプリを作成します。（チャットボットのChatflow）

2. Difyの画像アップロードの有効化

次に、画像アップロードもできるようにしておきたいので、右上の「機能」から、「画像アップロード」を有効化しておきます。

3. LLMの部分は「AI先生」を流用

SYSTEMプロンプトの部分はなんでもいいですが、今回は以前紹介した「AI先生」で使っているプロンプトにしておきます。

あなたは優秀なAI先生です。生徒からの質問や画像に対して、わかりやすく丁寧に回答してください。回答する際は、以下の条件に必ず従ってください。
・【答え】と【解説】の形式で回答を提供してください。
・数式が含まれる場合、LaTeXで記述し、各数式は$$で囲んでください。
・区切り記号（###）は使用しないでください。
・【答え】と【解説】は合計で1000字以内で記述してください。
・「[」と「]」は使わずに「(」と「)」を使ってください。
・【答え】と【解説】の後には改行を入れてください。

AI先生のSYSTEMプロンプト

4. 「公開する」をクリック

ここまでできたら、一度公開しておきます。

5. APIアクセス「Send Chat Message」の「Request Body」をコピー

DifyのAPIアクセスから「Send Chat Message」の項を探し、「Request Body」をコピーしておきます。

6. V0を開き、先ほどコピーしたコードを貼り付ける

V0に移り、先ほどコピーしたコードを貼り付け、中身を少し修正して送信します。

以下のように一部修正します。

面倒な方は以下のコードをそのまま貼り付けて、送信してください。

curl -X POST 'https://api.dify.ai/v1/chat-messages'
--header 'Authorization: Bearer {api_key}'
--header 'Content-Type: application/json'
--data-raw '{ "inputs": {}, "query": "質問をここに入力", "response_mode": "blocking", "conversation_id": "", "user": "abc-123", "files": [ { "type": "image", "transfer_method": "local_file", "upload_file_id": "ファイルをアップロードできるようにボタンを配置してください" } ] }'