构建MVP：前端与后端

<Design>
创建一个Twitter MBTI Receipt，它接受用户ID作为输入并输出用户的MBTI报告。在输入框中，您需要在最左侧放置@符号，以提示用户输入ID而不是用户名。这需要向Dify的后端发出请求。在请求中，您需要发送两个变量：一个是用户的ID（不带@）（变量名：user_id），另一个是用户的浏览器语言（变量名：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理解并生成高质量输出。