之前写过一篇《如何优雅的在页面上嵌入AI-Agent人工智能》,本篇文章很多基础架构都是集成于上篇文章，也是对上篇文章继续深化挖掘，从更基础的开始搭建，做到从设计到实现再到代码层业务层的实践运用。本篇文章集成演示系统设置为网页端，对于交互界面本篇文章UI前端也有设计，很多灵活设计的内容不必严格按照本篇文章代码效果编写，按照生产规则设计即可。如果本篇文章有帮助请不吝支持！
我将项目模块设计为四块，涉及了AI通信、用户请求的全流程和系统反馈模块的功能。旨在通过自然语言处理与外部数据集成，自动高效地回答用户的查询，同时根据用户反馈不断优化自身，以提供准确、智能和个性化的客户服务体验。
1. 用户信息交互模块
2. AI通信交互模块
3. 信息传输模块
4. 反馈机制模块
前端我们采用VUE3来搭建对话界面，快捷方便。后端采用Spring Boot:作为项目的核心框架，MyBatis-Plus用于数据库持久化操作，简化了 MyBatis 的使用，并提供了基本的 CRUD 方法。MySQL: 作为数据库，用于存储 AI 会话数据。我这里调用的是阿里通义千问的模型，当然每个厂商的AI SDK都大差不差，调用规则基本都是一致的，通过查阅SDK的返回参数就能很轻松的调用。
客户点击智能窗口开始会话，前端记录窗口会话ID，与客户提问prompt一并返回后端，后端请求阿里通义接口获取回答和问答ID，后端再将获取到的text和本次会话request_id一并返回给前端，若用户对给出的回答点赞，则返回单次回答的request_id和evaluate状态，如果满意则evaluate返回1，不满意evaluate返回2。
前端UI可借鉴的模板有很多，比如ChatGPT、文心一言等，或者走比较简约的客服弹窗：
比如类似微信界面的对话框，是最容易让客户明白使用的。
实现一个简单的对话页面：
聊天窗口结构：
我们需要和后端进行通信还需要实现打字机效果展示，可以通过引入的库：
方法：
后端在本人的上一篇博文有比较详细的模块划分和讲解，系统的后端设计可以划分为两个主要模块，分别处理Web端数据和AI交互：
Web数据处理模块：
AI数据交互模块：
这里我们用混元大模型设计API接口，首先打开腾讯云混元创建对应应用：
发布之后我们可以得到对应的APIKey
访问密钥管理创建密钥，和API组合一起访问就可以进行后端AI通信了。
API实现通信调用模版可以参考：
同时返回的数据信息需要我们建表保存，用于后续的大模型召回统计测试：
其中request_id对应的是一条回复通信的唯一识别，tokens对应的是输入和输出的字节数，帮助我们优化模型和prompt节省经费。后端的RESTful API可以设计三个：
开始对话 ()：
提问 ()：
评价 ()：
同时新建一张表保留全部对话数据，用于后续业务模型的调优：
需要注意设计的点是chat_code记录的是同一对话框编号，可以标记为同一客户标识，就可以追溯上下文问题关联。后续客户对评论的点赞是后触发操作，通过前端返回ask_code和evaluate，更新这张mysql表，起到对评论的点赞记录。
参照以上功能设计实现即可，接口涵盖了AI聊天会话的基本功能：启动会话、向AI提问、以及对AI回答的满意度评价，同时设计了一个测试接口用于验证系统是否正常运行。源代码将上传至Github有需要的同学可以直接看源码浏览，代码逻辑简单基本上没有什么很复杂的设计，后续可以集成多模态多功能作为基底使用。
通过本篇文章，我们从基础架构的设计到前后端的具体实现，系统性地展示了如何集成一个AI问答客服系统。从最初的项目顶层架构和技术选型，到详细的设计时序图，再到具体的前端UI设计和实现，以及后端的逻辑和代码演示，逐步完成了一个功能齐全、模块清晰的AI问答客服系统。