common.title

Docs
Quantum Circuit
TYTAN CLOUD

QUANTUM GAMING


autoQAOA
Desktop RAG

Overview
Terms of service

Privacy policy

Contact
Research

Sign in
Sign up
common.title

v0 by Vercel でフロントエンド + Difyでバックエンド

Yuichiro Minato

2024/09/30 13:09

こんちは、v0とDifyを両方触ってみて、フロントはv0でNextを書いてくれて、バックエンドはワークフローで処理を書いてくれるのでDifyが便利そうです。自分自身はフルスクラッチでPythonを書くことが多いのですが、PoCや簡単なトライアルはとても便利かと感じました。

v0だとNextできちんと処理がかけるのでDifyでAPIをONにして、APIキーを取得した上、それを使ってv0から処理をしてみました。

結果的には特に問題なく動かせました。PoC向けのクローズドなシステムであればAPIキーをハードコーディングしても問題ないかと思いますが、もちろんv0からは警告されます。

image

1、Difyでワークフローを作る。
2、Difyで左からAPIアクセスを選び、右上からAPIキーを発行
3、APIキーをコピーし、v0でDifyに処理を渡す。

Difyのdocumentによると、簡単なチャットは、

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": "streaming", "conversation_id": "", "user": "abc-123", "files": [ { "type": "image", "transfer_method": "remote_url", "url": "https://cloud.dify.ai/logo/logo-site.png" } ] }'

となっています。filesとかはいらないのと、api_keyはheaderに入ってます。
response_modeはstreamingがきちんと処理できればいいですが、拘らない場合、blockingモードの方が扱いやすいです。
blockingモードのレスポンス例はDifyのドキュメントから、下記のようになります。

Response
{
    "event": "message",
    "message_id": "9da23599-e713-473b-982c-4328d4f5c78a",
    "conversation_id": "45701982-8118-4bc5-8e9b-64562b4555f2",
    "mode": "chat",
    "answer": "iPhone 13 Pro Max specs are listed here:...",
    "metadata": {
        "usage": {
            "prompt_tokens": 1033,
            "prompt_unit_price": "0.001",
            "prompt_price_unit": "0.001",
            "prompt_price": "0.0010330",
            "completion_tokens": 128,
            "completion_unit_price": "0.002",
            "completion_price_unit": "0.001",
            "completion_price": "0.0002560",
            "total_tokens": 1161,
            "total_price": "0.0012890",
            "currency": "USD",
            "latency": 0.7682376249867957
        },
        "retriever_resources": [
            {
                "position": 1,
                "dataset_id": "101b4c97-fc2e-463c-90b1-5261a4cdcafb",
                "dataset_name": "iPhone",
                "document_id": "8dd1ad74-0b5f-4175-b735-7d98bbbb4e00",
                "document_name": "iPhone List",
                "segment_id": "ed599c7f-2766-4294-9d1d-e5235a61270a",
                "score": 0.98457545,
                "content": "\"Model\",\"Release Date\",\"Display Size\",\"Resolution\",\"Processor\",\"RAM\",\"Storage\",\"Camera\",\"Battery\",\"Operating System\"\n\"iPhone 13 Pro Max\",\"September 24, 2021\",\"6.7 inch\",\"1284 x 2778\",\"Hexa-core (2x3.23 GHz Avalanche + 4x1.82 GHz Blizzard)\",\"6 GB\",\"128, 256, 512 GB, 1TB\",\"12 MP\",\"4352 mAh\",\"iOS 15\""
            }
        ]
    },
    "created_at": 1705407629
}

適切に処理できれば問題ないですが、Streamingだとひと工夫必要でしょうか。この例題をそのままv0のプロンプトに渡せばよしなにAPIを処理してくれました。

v0とDifyの連携はAPIキーの扱いだけ問題がありますが、特に難しいところなくできました。Difyのドキュメントをv0に渡せばうまくやってくれました。個人的にはあまり使わない連携ですが、デモとか見せたい場合には手軽にできて便利かもしれません。

以上です。

© 2025, blueqat Inc. All rights reserved