MVPの構築：フロントエンドとバックエンド

<Design>
ユーザーIDを入力として受け取り、ユーザーのMBTIレポートを出力するTwitter MBTI Receiptを作成します。入力ボックスでは、ユーザーがユーザー名ではなくIDを入力するよう促すために、最も左に@記号を配置する必要があります。これはDifyのバックエンドにリクエストを行う必要があります。リクエストでは、2つの変数を送信する必要があります：1つはユーザーのID（@なし）（変数名：user_id）、もう1つはユーザーのブラウザ言語（変数名：lang）です。
</Design>
<Backend_Request>
リクエスト例は次のとおりです：
curl --location 'http://api.dify.ai/v1/workflows/run' \
--header 'Authorization: Bearer ****' \
--header 'Content-Type: application/json' \
--data '{
"inputs": {"lang":"en-US","user_id":"stv_lynn"},
"response_mode": "streaming",
"user": "abc-123"
}'
</Backend_Request>
<Backend_Response>
レスポンス例は次のとおりです：
{
"event": "workflow_finished",
"workflow_run_id": "a2214d-9246-4bd7-976d-****",
"task_id": "715420e1-a5eb-478b-b08c-****",
"data": {
"id": "a20412fd-9436-4bd7-976d-****",
"workflow_id": "05ba4685-8768-42a5-****",
"sequence_number": 14,
"status": "succeeded",
"outputs": {
"mbti": "INTJ",
"IE_report": "Steven Lynnのツイートから、彼は一人で作業や勉強を楽しみ、思考と分析に優れていることがわかります。彼のツイートでは、AIやプログラミングを使って問題を解決するのが好きだと述べており、これは彼が考えたり問題を解決したりするのに時間をかけることを好む内向的な人物であることを示しています。",
"SN_report": "Steven Lynnのツイートでは、言語やデータ処理のためにGPTやHugging Faceなどのツールを使用していることが言及されており、彼が探索や新しいことの発見を楽しむ直感的な人物であることを示唆しています。また、彼のプロフィールでは、大学院生であることも記されており、大学院では研究を完了するために新しいことを探索し発見する必要があるのが一般的です。",
"TF_report": "Steven Lynnのツイートから、彼は論理と分析を使って問題を解決するのが好きな思慮深い人物であることがわかります。彼のツイートでは、問題に対処するために多くのプログラミングやデータ分析ツールを使用していることが言及されており、これは彼が論理と分析を問題解決に適用することを楽しんでいることを示しています。",
"JP_report": "Steven Lynnのツイートでは、計画と組織を使ってタスクを完了させるのが好きだと述べており、これは彼が目標を達成するために計画と組織を好む判断型の人物であることを示しています。また、彼のプロフィールでは、大学院生であることも述べられており、大学院では研究を完了するために計画と組織が必要とされるのが一般的です。",
"celebrity": "スティーブ・ジョブズ",
"celebrity_report": "INTJ型の人々は、革新と問題解決のエキスパートであることが多いです。スティーブ・ジョブズのような有名人もINTJ型であり、アップルでの起業家精神と革新的な仕事を通じてINTJの典型的な特性を示しています。"
},
"error": null,
"elapsed_time": 47.11438198480755,
"total_tokens": 7040,
"total_steps": 9,
"created_by": {
"id": "1e2889b0-c001-4418-badf-4e12352c5f",
"user": "abc-123"
},
"created_at": 1732352687,
"finished_at": 1732352734,
"files": []
}
}
</Backend_Response>
<Task>
出力から変数を抽出し、Receiptに表示する必要があります。レスポンスには約60秒かかるため、十分な待機時間を設定する必要があります。
</Task>
<Frame>
このプロジェクトではVue、Tailwind CSS、TypeScriptを使用する必要があります。
</Frame>
XML構造化プロンプト
プロンプトに厳格なルールはありません。ただし、XMLフォーマットでプロンプトを書くことをお勧めします。構造化されたプロンプトはLLMが理解しやすく、高品質な出力を生成します。