Spring AI 实现智能对话

1. 实现效果

2. Spring Boot 3 后端

2.1 pom.xml

<!-- 管理包依赖。通过 Spring AI 的 BOM 文件统一管理所有 Spring AI 相关依赖的版本，确保版本一致性，减少冲突 --><dependencyManagement><dependencies><!-- Spring AI --><dependency><groupId>org.springframework.ai</groupId><artifactId>spring-ai-bom</artifactId><version>1.0.0-M6</version><type>pom</type><scope>import</scope></dependency></dependencies></dependencyManagement><!-- Spring Ai OpenAI 模型依赖 --><dependency><groupId>org.springframework.ai</groupId><artifactId>spring-ai-openai-spring-boot-starter</artifactId></dependency>

2.2 application.yml

spring:ai:openai:base-url: https://dashscope.aliyuncs.com/compatible-mode  # 默认使用 v1 版本号，如果添加会变成 /compatible-mode/v1/v1api-key: xxx   # 阿里云百炼平台获取chat:options:model: qwen-max   # 模型名称temperature: 0.8  # 模型温度，值越大，输出结果越随机embedding:options:model: text-embedding-v1  # RAG 指定文本向量化嵌入模型

2.3 AI 对话表，存储对话信息

CREATE TABLE `ai_conversation` (`id` varchar(40) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '主键',`title` varchar(40) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '标题',`content` text CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci COMMENT '内容',`creator_id` varchar(40) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL COMMENT '创建人ID',`create_time` datetime NOT NULL COMMENT '创建时间',`ts` datetime NOT NULL ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',`delete_flag` int NOT NULL DEFAULT '0' COMMENT '逻辑删除字段 0.正常 1.删除',PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci ROW_FORMAT=DYNAMIC COMMENT='AI对话表';

2.4 Config（AI对话配置类）

package com.dragon.springboot3vue3.config;import com.dragon.springboot3vue3.tools.UserTools;
import org.springframework.ai.chat.client.ChatClient;
import org.springframework.ai.chat.client.advisor.MessageChatMemoryAdvisor;
import org.springframework.ai.chat.client.advisor.SimpleLoggerAdvisor;
import org.springframework.ai.chat.memory.ChatMemory;
import org.springframework.ai.chat.memory.InMemoryChatMemory;
import org.springframework.ai.embedding.EmbeddingModel;
import org.springframework.ai.openai.OpenAiChatModel;
import org.springframework.ai.reader.TextReader;
import org.springframework.ai.transformer.splitter.TokenTextSplitter;
import org.springframework.ai.vectorstore.SimpleVectorStore;
import org.springframework.ai.vectorstore.VectorStore;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.CommandLineRunner;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.io.Resource;@Configuration
public class OpenAIConfig {@Autowiredprivate UserTools userTools;/*** 配置会话存储方式：内存* 建议存储在 Redis* @return*/@Beanpublic ChatMemory chatMemory() {return new InMemoryChatMemory(); // 将历史会话临时存储在应用内存中（重启应用后数据丢失）。生产环境需要持久化存储（如 Redis、数据库）}/*** 配置向量数据库存储方式：内存* 建议存储在 Redis* @param embeddingModel* @return*/@Beanpublic VectorStore vectorStore(EmbeddingModel embeddingModel) {return SimpleVectorStore.builder(embeddingModel).build();}/*** Spring Boot 启动时运行，将知识库存入向量数据库* @param vectorStore* @param resource* @return*/@Beanpublic CommandLineRunner commandLineRunner(VectorStore vectorStore,@Value("classpath:/rag/knowledge.txt") Resource resource) {return args -> {vectorStore.write(                               // 3. 写入向量数据库new TokenTextSplitter().transform(       // 2. 转换为向量数据库文档new TextReader(resource).read()  // 1. 读取知识库));};}@Beanpublic ChatClient chatClient(OpenAiChatModel model, ChatMemory chatMemory) {return ChatClient.builder(model).defaultSystem("""你是韶君，一个温柔可爱机智的智能助手。请遵守以下规则：1. 当用户问"你是谁"时，必须且只能回答："我是韶君，你的智能助手，有什么可以帮你的吗？"2. 不要提及RAG、检索或其他技术实现细节3. 使用自然、友好的语气回答问题4. 数学计算使用标准符号（如 18 ÷ 6 = 3）""").defaultAdvisors(new SimpleLoggerAdvisor(),                // 配置日志 Advisor，需在 yml 开启日志级别（默认：debug）new MessageChatMemoryAdvisor(chatMemory)  // 配置会话记忆).defaultTools(userTools)  // Tool Calling.build();}
}

2.5 Controller

package com.dragon.springboot3vue3.controller;import cn.dev33.satoken.util.SaResult;
import com.dragon.springboot3vue3.controller.dto.entityDto.AiConversationDto;
import com.dragon.springboot3vue3.controller.dto.entityDto.AiConversationHistoryDto;
import com.dragon.springboot3vue3.controller.dto.entityDto.ChatDto;
import com.dragon.springboot3vue3.entity.AiConversation;
import com.dragon.springboot3vue3.service.IAiConversationService;
import com.dragon.springboot3vue3.tools.UserTools;
import com.dragon.springboot3vue3.utils.StringDTO;
import io.swagger.v3.oas.annotations.Operation;
import io.swagger.v3.oas.annotations.tags.Tag;
import org.springframework.ai.chat.client.ChatClient;
import org.springframework.ai.chat.client.advisor.AbstractChatMemoryAdvisor;
import org.springframework.ai.chat.client.advisor.QuestionAnswerAdvisor;
import org.springframework.ai.chat.memory.ChatMemory;
import org.springframework.ai.chat.messages.AssistantMessage;
import org.springframework.ai.chat.messages.Message;
import org.springframework.ai.chat.messages.SystemMessage;
import org.springframework.ai.chat.messages.UserMessage;
import org.springframework.ai.chat.model.ChatModel;
import org.springframework.ai.chat.model.ChatResponse;
import org.springframework.ai.chat.model.Generation;
import org.springframework.ai.chat.prompt.Prompt;
import org.springframework.ai.openai.OpenAiChatOptions;
import org.springframework.ai.vectorstore.SearchRequest;
import org.springframework.ai.vectorstore.VectorStore;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.validation.annotation.Validated;
import org.springframework.web.bind.annotation.*;
import reactor.core.publisher.Flux;
import java.util.List;@Tag(name = "Spring AI 对话接口")
@RestController
@RequestMapping("/aiConversation")
public class AiConversationController {@Autowiredprivate IAiConversationService aiConversationService;@Autowiredprivate ChatMemory chatMemory;@Autowiredprivate ChatClient chatClient;@Autowiredprivate UserTools userTools;@Autowiredprivate VectorStore vectorStore;/*** 流式输出（要设置流式输出格式）*/@Operation(summary = "对话")@PostMapping(value = "/conversation",produces = "text/html;charset=utf-8")public Flux<String> chatClient(@RequestBody ChatDto chatDto) {return chatClient.prompt().user(chatDto.getPrompt()).advisors(new QuestionAnswerAdvisor(vectorStore, SearchRequest.builder().query(chatDto.getPrompt()).build())) // 对话时，使用向量数据库.advisors(item -> item.param(AbstractChatMemoryAdvisor.CHAT_MEMORY_CONVERSATION_ID_KEY, chatDto.getConversationId())) // 根据会话ID，在ChatMemory存取会话.stream().content();}@Operation(summary = "新增或更新对话")@PostMapping("/saveOrUpdate")public SaResult saveOrUpdate(@RequestBody @Validated AiConversationDto aiConversationDto){AiConversation aiConversation=new AiConversation();BeanUtils.copyProperties(aiConversationDto,aiConversation);aiConversationService.saveOrUpdate(aiConversation);return SaResult.ok();}@Operation(summary = "所有对话列表")@GetMapping("/getAll")public SaResult getAll(){List<AiConversation> list = aiConversationService.lambdaQuery().orderByDesc(AiConversation::getCreateTime).list();return SaResult.ok().setData(list);}@Operation(summary = "对话的历史记录")@PostMapping("/history")public SaResult history(@RequestBody StringDTO stringDTO){List<Message> messages = chatMemory.get(stringDTO.getStr(), Integer.MAX_VALUE);if(messages == null || messages.isEmpty()){return SaResult.ok().setData(List.of());}return SaResult.ok().setData(messages.stream().map(AiConversationHistoryDto::new).toList());}
}

2.6 Service

package com.dragon.springboot3vue3.service;import com.dragon.springboot3vue3.entity.AiConversation;
import com.baomidou.mybatisplus.extension.service.IService;public interface IAiConversationService extends IService<AiConversation> {}

2.7 ServiceImpl

package com.dragon.springboot3vue3.service.impl;import com.dragon.springboot3vue3.entity.AiConversation;
import com.dragon.springboot3vue3.mapper.AiConversationMapper;
import com.dragon.springboot3vue3.service.IAiConversationService;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;@Service
public class AiConversationServiceImpl extends ServiceImpl<AiConversationMapper, AiConversation> implements IAiConversationService {}

2.8 ChatDto、AiConversationDto 、StringDTO 

package com.dragon.springboot3vue3.controller.dto.entityDto;import io.swagger.v3.oas.annotations.media.Schema;
import lombok.Data;import java.io.Serializable;@Data
public class ChatDto implements Serializable {private static final long serialVersionUID = 1L;@Schema(description = "会话ID")String conversationId;@Schema(description = "提示词")String prompt;
}

package com.dragon.springboot3vue3.controller.dto.entityDto;import io.swagger.v3.oas.annotations.media.Schema;
import lombok.Data;@Schema(description = "前端请求参数封装")
@Data
public class AiConversationDto {@Schema(description = "主键")private String id;@Schema(description = "标题")private String title;
}

package com.dragon.springboot3vue3.utils;import io.swagger.v3.oas.annotations.media.Schema;
import jakarta.validation.constraints.NotEmpty;
import lombok.Data;@Data
public class StringDTO {@NotEmpty@Schema(description = "字符串")private String str;
}

2.9 rag -> knowledge.txt

3. Vue 3 + ElementPlus 前端

3.1 安装 marked（将 Markdown 转换为 HTML）、dompurify（防止XXS [跨站脚本攻击]）

npm i marked
npm i dompurify

3.2 AiConversation.vue

<template><div class="container"><el-card class="left"><div class="newConversationBox"><el-button class="newConversationBtn" @click="saveOrUpdate()" type="primary" :icon="Plus" round >开启新对话</el-button></div><div class="conversation" :class="{ 'active': item.id === conversationModel.id }" v-for="item in conversationList" :key="item.id" ><el-text class="text" @click="selectConversation(item)" line-clamp="1"> {{ item.title == "" ? item.id : item.title }} </el-text><el-dropdown trigger="click"><el-icon class="moreFilled" :size="20"> <MoreFilled /> </el-icon><template #dropdown><el-dropdown-menu><el-dropdown-item :icon="EditPen" @click="rename(item)">重命名</el-dropdown-item></el-dropdown-menu></template></el-dropdown><!-- 重命名弹窗 --><el-dialog v-model="visible" width="30%" @close="close"><template #header><h1>重命名</h1></template><el-form :model="conversationModel" ref="formRef" label-width="100px"><el-form-item label="id" prop="id"><el-input v-model="conversationModel.id" placeholder="请输入会话标题"></el-input></el-form-item><el-form-item label="会话标题" prop="title"><el-input v-model="conversationModel.title" placeholder="暂无会话标题"></el-input></el-form-item><el-form-item><el-button @click="visible = false">取消</el-button><el-button type="primary" @click="saveOrUpdate()">确认</el-button></el-form-item></el-form></el-dialog></div></el-card><el-card class="right"><div class="conversation-content" ><el-scrollbar ref="scrollbarRef" height="600px"><div class="history" v-for="(item, index) in history" :key="index"><div class="user" v-if="item.role === 'user'" ><span class="userContent" >{{ item.content }}</span><el-avatar :icon="UserFilled" /></div><div class="assistant" v-if="item.role === 'assistant'"><span><el-avatar :icon="Platform" /></span><div class="assistantContent" v-html="item.content"></div></div></div></el-scrollbar></div><div class="sendBox" v-if="conversationModel.id"><el-input class="custom-textarea"v-model="model.prompt"@keydown.enter="send":disabled="loadingFlag"type="textarea":rows="3":autosize="{ minRows: 2, maxRows: 6 }":placeholder="loadingFlag ? '加载中...' : '给 AI 发送消息'" /><el-button @click="send" :disabled="loadingFlag" :loading="loadingFlag" type="primary" :icon="Position" circle size="large"></el-button></div></el-card></div>
</template><script setup lang="ts">import { ref,reactive,onMounted,nextTick } from 'vue'import { Plus,Position,MoreFilled,EditPen,Platform,UserFilled } from '@element-plus/icons-vue'import conversationApi from '@/api/ai/conversation';import { ElMessage } from 'element-plus'import { marked } from 'marked'    // 将 Markdown 转换为 HTMLimport DOMPurify from 'dompurify'  // 防止XXS（跨站脚本攻击）// 发送消息需要的 modellet model = reactive({conversationId: '',prompt: ''})// 新增会话需要的 modellet conversationModel = reactive({id: '',title: ''})const initConversationModel = { ...conversationModel }// 对话历史 Refconst scrollbarRef = ref()// 新增、编辑弹窗是否可见const visible = ref(false)// 是否加载中const loadingFlag = ref(false)// 重命名表单 Refconst formRef=ref()// 存储当前对话的历史记录const history = ref([]) as any// 对话列表let conversationList =  ref([]) as any// 发送消息const send = async()=>{// 去除前后空格后检查是否为空if (!model.prompt || !model.prompt.trim()) {ElMessage.warning("发送的消息不能为空！");return;}loadingFlag.value = true;history.value.push({role: "user",content: model.prompt})scrollToBottom()// 先添加一条空的 assistant 消息history.value.push({role: "assistant",content: ""})// 获取最后一条消息的引用const lastMessage = history.value[history.value.length - 1];try {// 获取流式响应const reader = await conversationApi.chat(model) as any;// 清空发送的消息model.prompt = ""// 创建解码器（用于解析二进制流）const decoder = new TextDecoder('utf-8');while (true) {const { done, value } = await reader.read();    // 读取一块数据if (done) break;                                // 流结束时退出       // 解码数据并追加到最后一条消息的contentlastMessage.content += decoder.decode(value);// 强制触发Vue的响应式更新（重要！）history.value = [...history.value];}// 使用 marked 将 Markdown 转换为 HTML// 使用 DOMPurify 清理 HTML，防止 XSS 攻击lastMessage.content = DOMPurify.sanitize(marked(lastMessage.content) as any);history.value = [...history.value];} catch (error) {console.error('API Error:', error);alert('发送消息失败，请稍后重试');} finally {loadingFlag.value = false;scrollToBottom()}}// 滚动到底部const scrollToBottom = async() => {// 等待DOM更新await nextTick();// 滚动到底部scrollbarRef.value.setScrollTop(scrollbarRef.value.wrapRef.scrollHeight || 0);}// 新增或更新会话const saveOrUpdate = async()=>{const response = await conversationApi.saveOrUpdate(conversationModel) as any;ElMessage.success(response.msg);// 刷新对话列表getAll();}// 所有会话列表const getAll = async()=>{const response = await conversationApi.getAll();conversationList.value = response.dataif(conversationList.value != null){conversationModel.id = conversationList.value[0].id  // 选中第1个对话model.conversationId = conversationModel.id}getHistoryToHtml(model.conversationId)}// 选择对话const selectConversation = async(item:any)=>{history.value = []conversationModel.id = item.idif(item.title != ""){conversationModel.title = item.title}model.conversationId = conversationModel.idgetHistoryToHtml(item.id)}// 根据对话ID请求后端，将后端响应数据转为 HTMLconst getHistoryToHtml = async(conversationId:string)=>{const res = await conversationApi.getHistory(conversationId);// 数组判空if(Array.isArray(res.data) && res.data.length !=0 ){// 会话历史转为 HTMLhistory.value = res.data.map(((item:any) => ({...item,content: item.role === 'assistant' ? DOMPurify.sanitize(marked(item.content) as any) : item.content})))scrollToBottom()}}// 对话重命名const rename = (item:any)=>{visible.value = true;conversationModel.title = item.title}// 关闭重命名弹窗const close= ()=>{// 清空数据Object.assign(model, initConversationModel);visible.value = false}onMounted(()=>{getAll()})</script><style scoped lang="less">
// 覆盖用户代理样式
body div#app {display: flex;
}.container{height: 100%;box-sizing: border-box; display: flex;justify-content: space-between;
}
.left{height: 100%;width: 20%;
}
.right{height: 100%;width: 79%;display: flex;flex-direction: column;.conversation-content{// height: 100%;flex: 1;.history{margin: 0 20px;.user{display: flex;justify-content: flex-end;margin: 20px 0;.userContent{margin-right: 10px;}}.assistant{display: flex;margin: 20px 0;.assistantContent{margin-left: 10px;}}}}.sendBox{display: flex;justify-content: center;align-items: center;margin-top: 20px;}.custom-textarea{margin: 0 10px;}.custom-textarea ::v-deep .el-textarea__inner {resize: none; /* 禁用手动调整大小 */}
}.conversation{display: flex;align-items: center;height: 30px;margin: 5px 0;border-radius: 20px;padding: 0 8px;justify-content: space-between;.text{flex: 1;}&.active{background-color: #f3f2ff;.text{color: black;}.moreFilled{color: black;}}
}
.newConversationBox{display: flex;justify-content: center;align-items: center;margin-bottom: 20px;
}</style>

3.3 api -> ai -> conversation.ts

import request from "@/utils/request";
import {useTokenStore} from '@/stores/token'// 聊天 API
// fetch API 来处理流式响应
export default{async chat(value:any){try{const response = await fetch(`${request.defaults.baseURL}/aiConversation/conversation`, {method: 'POST',headers: {'Content-Type': 'application/json','X-Token': useTokenStore().token,},body: JSON.stringify(value) // 显式转换为JSON字符串})return response.body?.getReader()} catch (error) {console.error('Conversation API Error:', error)throw error}},// 新增或更新会话saveOrUpdate(value:any){return request.post('/aiConversation/saveOrUpdate',value);},// 所有会话列表getAll(){return request.get('/aiConversation/getAll');},// 所有会话列表getHistory(str:string){return request.post('/aiConversation/history',{ str });},
}