在数字化餐饮的浪潮中,如何快速、智能地响应用户的点餐需求,成为提升体验的关键。本文以构建一个AI点餐助手为例,通过流程图的方式,清晰展示从用户输入到商品推荐的完整数据流转与模块协作。全程不涉及代码细节,聚焦于架构设计和流程逻辑






一、整体系统架构
整个系统由四个核心部分组成:微信小程序前端 、业务后端(RuoYi-Vue-Plus) 、AI编排层(Dify) 以及 大模型(Deepseek)。下图展示了各模块的交互关系:

核心说明:
-
小程序只负责收发消息和渲染卡片,所有业务逻辑由后端和Dify协同完成。
-
Dify作为AI编排层,管理对话历史、调用工具、与大模型交互。
-
后端提供RESTful接口供Dify工具调用(商品搜索、订单查询、预下单、确认下单)。
二、关键数据流程图
1. 商品推荐/搜索流程
以用户询问"有什么吃的?"为例,展示无关键词推荐和有关键词搜索的两种路径:

关键点:
-
Dify根据用户输入自动选择工具,无需后端干预。
-
商品列表以统一格式返回,前端通过
type: product_list识别。
2. 下单流程(预下单 → 确认下单)
下单涉及多轮对话,包含预下单(生成确认卡片)和确认下单(实际创建订单)两个步骤:

设计要点:
-
确认卡片包含
action和params,前端点击确认后自动发送"确认"消息,触发confirmOrder调用。 -
最终返回消息数组,同时包含文本"下单成功!"和订单卡片,提升用户体验。
三、Dify内部编排逻辑
Dify应用采用聊天助手+Agent模式,其内部工作流程可抽象为以下步骤:

关键配置:
-
系统提示词严格规定了工具调用条件和输出格式。
-
Agent模式必须开启,并在工具列表中勾选所有可用工具。
-
模型温度设置为0.2左右,确保输出稳定性。
四、前端消息渲染流程
前端负责将后端返回的messages数组按类型渲染为不同UI组件,流程如下:

交互增强:
-
商品卡片上的"选它"按钮点击后,自动将"我要一份[商品名]"填入输入框,引导用户快速下单。
-
确认卡片上的"确认"按钮点击后,自动发送"确认"消息,调用后续工具。
五、异常处理流程
当工具调用失败或返回空数据时,系统保证用户体验不中断:

六、总结
通过上述流程图,我们可以清晰地看到AI点餐助手的完整运作脉络:
-
前端作为交互入口,将用户输入交给后端。
-
后端作为桥梁,与Dify API通信并执行业务接口。
-
Dify作为AI编排核心,负责意图识别、工具调用、对话管理。
-
大模型生成符合前端渲染规则的结构化消息。
-
前端根据消息类型动态渲染不同卡片,实现丰富的对话体验。