网站导航
> 技术文档 > 基于Spring AI Alibaba的多场景聊天AI应用：从零到一的完整实战指南_spring ai alibaba 实战

基于Spring AI Alibaba的多场景聊天AI应用：从零到一的完整实战指南_spring ai alibaba 实战

网友: 技术文档 2025-08-08 11:59:40

前言

随着大模型技术的快速发展，AI应用开发已成为当下最热门的技术领域之一。阿里云作为国内领先的云服务提供商，推出了Spring AI Alibaba框架，为开发者提供了便捷的AI应用开发体验。本文将通过一个完整的实战项目，深入探讨如何使用Spring AI Alibaba构建多场景的智能聊天应用。

项目概览

本项目是一个基于Spring AI Alibaba的综合性聊天AI演示平台，集成了四种不同的AI应用场景：

  1. 多模态智能聊天 - 支持文本和图片输入的通用对话
  2. 哄哄模拟器 - 创新的情感互动游戏应用
  3. 智能客服系统 - 基于工具调用的业务场景实现
  4. ChatPDF知识库 - RAG检索增强生成的文档问答

本还项目集成了三大数据库：关系,图,向量。

技术架构概览

#mermaid-svg-9IQWznXi0Dds7gSD {font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-9IQWznXi0Dds7gSD .error-icon{fill:#552222;}#mermaid-svg-9IQWznXi0Dds7gSD .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-9IQWznXi0Dds7gSD .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-9IQWznXi0Dds7gSD .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-9IQWznXi0Dds7gSD .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-9IQWznXi0Dds7gSD .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-9IQWznXi0Dds7gSD .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-9IQWznXi0Dds7gSD .marker{fill:#333333;stroke:#333333;}#mermaid-svg-9IQWznXi0Dds7gSD .marker.cross{stroke:#333333;}#mermaid-svg-9IQWznXi0Dds7gSD svg{font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-9IQWznXi0Dds7gSD .label{font-family:\"trebuchet ms\",verdana,arial,sans-serif;color:#333;}#mermaid-svg-9IQWznXi0Dds7gSD .cluster-label text{fill:#333;}#mermaid-svg-9IQWznXi0Dds7gSD .cluster-label span{color:#333;}#mermaid-svg-9IQWznXi0Dds7gSD .label text,#mermaid-svg-9IQWznXi0Dds7gSD span{fill:#333;color:#333;}#mermaid-svg-9IQWznXi0Dds7gSD .node rect,#mermaid-svg-9IQWznXi0Dds7gSD .node circle,#mermaid-svg-9IQWznXi0Dds7gSD .node ellipse,#mermaid-svg-9IQWznXi0Dds7gSD .node polygon,#mermaid-svg-9IQWznXi0Dds7gSD .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-9IQWznXi0Dds7gSD .node .label{text-align:center;}#mermaid-svg-9IQWznXi0Dds7gSD .node.clickable{cursor:pointer;}#mermaid-svg-9IQWznXi0Dds7gSD .arrowheadPath{fill:#333333;}#mermaid-svg-9IQWznXi0Dds7gSD .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-9IQWznXi0Dds7gSD .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-9IQWznXi0Dds7gSD .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-9IQWznXi0Dds7gSD .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-9IQWznXi0Dds7gSD .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-9IQWznXi0Dds7gSD .cluster text{fill:#333;}#mermaid-svg-9IQWznXi0Dds7gSD .cluster span{color:#333;}#mermaid-svg-9IQWznXi0Dds7gSD div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-9IQWznXi0Dds7gSD :root{--mermaid-font-family:\"trebuchet ms\",verdana,arial,sans-serif;} 数据存储层 AI服务层 后端层 前端层 MySQL - 业务数据 Milvus - 向量存储 Neo4j - 图数据库 阿里云DashScope 通义千问模型 文本嵌入模型 Spring Boot 3.5.3 Spring AI Alibaba 1.0.0.2 ChatClient多实例配置 Vue.js 3 + TypeScript WebViewer PDF预览 响应式UI设计

技术栈深度解析

1. 核心框架选择

Spring AI Alibaba vs 原生Spring AI

项目采用了Spring AI Alibaba而非原生Spring AI，主要优势包括：

  • 本土化优势：更好的中文支持和本地化服务
  • 性能优化：针对阿里云基础设施的深度优化
  • 成本控制：相比国外模型服务更具价格优势
  • 合规性：符合国内数据安全和隐私保护要求

迁移对比示例：

// 原生Spring AI配置@Beanpublic ChatClient openAiChatClient(OpenAiChatModel model) { return ChatClient.builder(model) .defaultOptions(OpenAiChatOptions.builder() .withModel(\"gpt-4\") .build()) .build();}// Spring AI Alibaba配置@Beanpublic ChatClient dashScopeChatClient(DashScopeChatModel model) { return ChatClient.builder(model) .defaultOptions(DashScopeChatOptions.builder() .withModel(\"qwen-omni-turbo-latest\") .withMultiModel(true) // 多模态支持 .build()) .build();}

2. 多ChatClient架构设计

项目的核心创新在于针对不同应用场景配置了专门的ChatClient实例：

@Configurationpublic class CommonConfiguration { // 基础聊天客户端 - 轻松友好的对话风格 @Bean public ChatClient chatClient(DashScopeChatModel model, ChatMemory chatMemory) { return ChatClient.builder(model) .defaultOptions(DashScopeChatOptions.builder() .withModel(\"qwen-omni-turbo-latest\") .withMultiModel(true) .build()) .defaultSystem(\"你是一个可爱的傻白甜萝莉，你会用可爱的语言和我聊天。\") .defaultAdvisors( new SimpleLoggerAdvisor(), MessageChatMemoryAdvisor.builder(chatMemory).build() ) .build(); } // 游戏聊天客户端 - 角色扮演专用 @Bean public ChatClient gameChatClient(DashScopeChatModel model, ChatMemory chatMemory) { return ChatClient.builder(model) .defaultSystem(SystemConstants.GAME_SYSTEM_PROMPT) .defaultAdvisors( new SimpleLoggerAdvisor(), MessageChatMemoryAdvisor.builder(chatMemory).build() ) .build(); } // 客服聊天客户端 - 集成工具调用 @Bean public ChatClient serviceChatClient(DashScopeChatModel model,  ChatMemory chatMemory,  CourseTools courseTools) { return ChatClient.builder(model) .defaultSystem(SystemConstants.SERVICE_SYSTEM_PROMPT) .defaultTools(courseTools) // 关键：工具调用 .defaultAdvisors( new SimpleLoggerAdvisor(), MessageChatMemoryAdvisor.builder(chatMemory).build() ) .build(); } // PDF聊天客户端 - RAG检索增强 @Bean public ChatClient pdfChatClient(DashScopeChatModel model,  ChatMemory chatMemory,  VectorStore vectorStore) { return ChatClient.builder(model) .defaultSystem(\"你是一个友好且知识渊博的AI助手。基于提供的上下文信息来回答问题，如果上下文中没有相关信息，请明确告知用户。\") .defaultAdvisors( new SimpleLoggerAdvisor(), MessageChatMemoryAdvisor.builder(chatMemory).build(), QuestionAnswerAdvisor.builder(vectorStore)  .searchRequest(SearchRequest.builder() .topK(10) .similarityThreshold(0.2) .build())  .build() ) .build(); }}

四大应用场景深度实现

1. 多模态智能聊天

核心特性
  • 支持文本+图片的多模态输入
  • 流式响应处理
  • 聊天历史管理
  • 暗黑/明亮主题切换
技术实现要点

后端多模态处理：

private Flux<String> multiModalChat(String prompt, String chatId, List<MultipartFile> files) { List<Media> medias = files.stream() .map(file -> new Media( MimeType.valueOf(Objects.requireNonNull(file.getContentType())), file.getResource() )).toList(); return chatClient.prompt() .user(p -> p.text(prompt).media(medias.toArray(Media[]::new))) .advisors(a -> a.param(CONVERSATION_ID, chatId)) .stream() .content();}

前端流式响应处理：

const sendMessage = async () => { const reader = await chatAPI.sendMessage(formData, currentChatId.value) const decoder = new TextDecoder(\'utf-8\') let accumulatedContent = \'\' while (true) { const { value, done } = await reader.read() if (done) break accumulatedContent += decoder.decode(value) // 实时更新消息内容 await nextTick(() => { const updatedMessage = { ...assistantMessage, content: accumulatedContent } const lastIndex = currentMessages.value.length - 1 currentMessages.value.splice(lastIndex, 1, updatedMessage) }) await scrollToBottom() }}

2. 哄哄模拟器：创新的游戏化AI应用

这是项目中最具创意的功能，通过AI角色扮演实现情感互动游戏。

游戏机制设计
  • 角色设定：AI扮演生气的女友
  • 数值系统：原谅值（0-100）动态变化
  • 游戏目标：通过合适的回复让原谅值达到100
  • 失败条件：原谅值降到0或超过最大轮次
系统提示词工程
public static final String GAME_SYSTEM_PROMPT = \"\"\" 你需要根据以下任务中的描述进行角色扮演，你只能以女友身份回答，不是用户身份或AI身份，如记错身份，你将受到惩罚。 ## Goal 你扮演用户女友的角色。现在你很生气，用户需要尽可能的说正确的话来哄你开心。 ## Rules - 初始原谅值为 20，每次交互会增加或者减少原谅值，直到原谅值达到 100，游戏通关 - 每次用户回复的话分为 5 个等级来增加或减少原谅值： -10 为非常生气，-5 为生气，0 为正常，+5 为开心，+10 为非常开心 ## Output format {女友心情}{女友说的话} 得分：{+-原谅值增减} 原谅值：{当前原谅值}/100 \"\"\";
前端游戏状态管理
// 实时解析原谅值变化const forgivenessMatch = accumulatedContent.match(/原谅值[:：]\\s*(\\d+)/i)if (forgivenessMatch) { const newForgiveness = parseInt(forgivenessMatch[1]) if (!isNaN(newForgiveness)) { forgiveness.value = Math.min(100, Math.max(0, newForgiveness)) // 游戏胜利判断 if (forgiveness.value >= 100) { isGameOver.value = true gameResult.value = \'恭喜你！成功哄好了女友！💕\' } }}

3. 智能客服系统：工具调用的完美实践

工具调用架构

Spring AI的工具调用功能允许AI模型调用预定义的Java方法，实现复杂的业务逻辑。

@Component@RequiredArgsConstructorpublic class CourseTools { private final ICourseService courseService; private final ISchoolService schoolService; private final ICourseReservationService reservationService; @Tool(description = \"根据条件查询课程\") public List<Course> queryCourse(@ToolParam(description = \"查询的条件\", required = false) CourseQuery query) { if (query == null) { return courseService.list(); } QueryChainWrapper<Course> wrapper = courseService.query() .eq(query.getType() != null, \"type\", query.getType()) .le(query.getEdu() != null, \"edu\", query.getEdu()); return wrapper.list(); } @Tool(description = \"查询所有校区\") public List<School> querySchool() { return schoolService.list(); } @Tool(description = \"生成预约单，返回预约单号\") public Integer createCourseReservation( @ToolParam(description = \"预约课程\") String course, @ToolParam(description = \"预约校区\") String school, @ToolParam(description = \"学生姓名\") String studentName, @ToolParam(description = \"联系电话\") String contactInfo, @ToolParam(description = \"备注\", required = false) String remark) { CourseReservation reservation = new CourseReservation(); reservation.setCourse(course); reservation.setSchool(school); reservation.setStudentName(studentName); reservation.setContactInfo(contactInfo); reservation.setRemark(remark); reservationService.save(reservation); return reservation.getId(); }}
业务流程设计

客服系统采用严格的业务流程控制：

  1. 信息收集阶段：获取用户学习兴趣和学历背景
  2. 课程推荐阶段：基于条件查询匹配课程
  3. 校区选择阶段：展示可用校区供用户选择
  4. 预约确认阶段：收集完整信息并生成预约单

4. ChatPDF：RAG检索增强生成的实战应用

RAG技术架构

#mermaid-svg-OhpWiJkChi1qAmeb {font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-OhpWiJkChi1qAmeb .error-icon{fill:#552222;}#mermaid-svg-OhpWiJkChi1qAmeb .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-OhpWiJkChi1qAmeb .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-OhpWiJkChi1qAmeb .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-OhpWiJkChi1qAmeb .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-OhpWiJkChi1qAmeb .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-OhpWiJkChi1qAmeb .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-OhpWiJkChi1qAmeb .marker{fill:#333333;stroke:#333333;}#mermaid-svg-OhpWiJkChi1qAmeb .marker.cross{stroke:#333333;}#mermaid-svg-OhpWiJkChi1qAmeb svg{font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-OhpWiJkChi1qAmeb .label{font-family:\"trebuchet ms\",verdana,arial,sans-serif;color:#333;}#mermaid-svg-OhpWiJkChi1qAmeb .cluster-label text{fill:#333;}#mermaid-svg-OhpWiJkChi1qAmeb .cluster-label span{color:#333;}#mermaid-svg-OhpWiJkChi1qAmeb .label text,#mermaid-svg-OhpWiJkChi1qAmeb span{fill:#333;color:#333;}#mermaid-svg-OhpWiJkChi1qAmeb .node rect,#mermaid-svg-OhpWiJkChi1qAmeb .node circle,#mermaid-svg-OhpWiJkChi1qAmeb .node ellipse,#mermaid-svg-OhpWiJkChi1qAmeb .node polygon,#mermaid-svg-OhpWiJkChi1qAmeb .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-OhpWiJkChi1qAmeb .node .label{text-align:center;}#mermaid-svg-OhpWiJkChi1qAmeb .node.clickable{cursor:pointer;}#mermaid-svg-OhpWiJkChi1qAmeb .arrowheadPath{fill:#333333;}#mermaid-svg-OhpWiJkChi1qAmeb .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-OhpWiJkChi1qAmeb .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-OhpWiJkChi1qAmeb .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-OhpWiJkChi1qAmeb .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-OhpWiJkChi1qAmeb .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-OhpWiJkChi1qAmeb .cluster text{fill:#333;}#mermaid-svg-OhpWiJkChi1qAmeb .cluster span{color:#333;}#mermaid-svg-OhpWiJkChi1qAmeb div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\"trebuchet ms\",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-OhpWiJkChi1qAmeb :root{--mermaid-font-family:\"trebuchet ms\",verdana,arial,sans-serif;} PDF文档 文档分割 向量化 Milvus存储 用户问题 向量检索 相关文档 上下文注入 LLM生成答案

核心实现代码

文档处理与向量化：

private void writeToVectorStore(Resource resource) { // 1.创建PDF读取器 PagePdfDocumentReader reader = new PagePdfDocumentReader( resource, PdfDocumentReaderConfig.builder() .withPageExtractedTextFormatter(ExtractedTextFormatter.defaults()) .withPagesPerDocument(1) // 每页作为一个Document .build() ); // 2.读取并拆分文档 List<Document> documents = reader.read(); // 3.添加元数据标识 String fileName = resource.getFilename(); documents.forEach(document -> { document.getMetadata().put(\"file_name\", fileName); }); // 4.存储到向量数据库 vectorStore.add(documents);}

检索增强查询：

@RequestMapping(value = \"/chat\", produces = \"text/html;charset=utf-8\")public Flux<String> chat(String prompt, String chatId) { Resource file = fileRepository.getFile(chatId); if (!file.exists()) { throw new RuntimeException(\"会话文件不存在！\"); } // 构造文档过滤条件 String filterExpression = \"file_name == \'\" + file.getFilename() + \"\'\"; return pdfChatClient.prompt() .user(prompt) .advisors(a -> a.param(CONVERSATION_ID, chatId)) .advisors(a -> a.param(FILTER_EXPRESSION, filterExpression)) .stream() .content();}
Milvus向量数据库配置
spring: ai: vectorstore: milvus: client: host: \"你的地址\" port: 19530 database-name: \"chatAiDemo\" collection-name: \"chatPDF\" embedding-dimension: 1024 index-type: IVF_FLAT metric-type: COSINE initialize-schema: true

前端技术亮点

1. 现代化UI设计

  • Vue 3 Composition API + TypeScript
  • 响应式设计适配多种屏幕
  • 暗黑/明亮主题无缝切换
  • 流畅的动画和交互效果

2. WebViewer PDF集成

项目集成了PDFTron WebViewer，提供专业级的PDF预览功能：

3. 流式响应优化

前端采用ReadableStream处理流式响应，确保用户体验的流畅性：

// 统一的流式响应处理while (true) { const { value, done } = await reader.read() if (done) break accumulatedContent += decoder.decode(value) // 实时更新UI await nextTick(() => { currentMessages.value[lastIndex] = { ...assistantMessage, content: accumulatedContent } }) await scrollToBottom()}

性能优化与最佳实践

1. 聊天记忆管理

@Beanpublic ChatMemory chatMemory(ChatMemoryRepository chatMemoryRepository) { return MessageWindowChatMemory.builder() .chatMemoryRepository(chatMemoryRepository) .maxMessages(10) // 限制记忆窗口大小 .build();}

2. 向量检索优化

QuestionAnswerAdvisor.builder(vectorStore) .searchRequest(SearchRequest.builder() .topK(10) // 限制检索数量 .similarityThreshold(0.2) // 设置相似度阈值 .build()) .build()

3. 前端资源管理

  • 组件懒加载减少初始包大小
  • PDF文件的IndexedDB本地缓存
  • 图片压缩和格式优化

部署与运维

1. 环境变量配置

# 阿里云DashScope API密钥export DASHSCOPE_API_KEY=your_dashscope_api_key# MySQL数据库密码export MYSQL_PASSWORD=your_mysql_password# Neo4j数据库密码export NEO4J_PASSWORD=your_neo4j_password

2. Docker容器化部署

FROM openjdk:17-jre-slimCOPY target/chatAiDemo-*.jar app.jarEXPOSE 8080ENTRYPOINT [\"java\", \"-jar\", \"/app.jar\"]

3. 监控与日志

logging: level: org.springframework.ai: DEBUG com.touhouqing.chatAiDemo: DEBUG

项目亮点与创新

1. 技术创新

  • 多ChatClient架构：针对不同场景的专门优化
  • 游戏化AI应用：创新的情感互动设计
  • 完整的RAG实现：从文档处理到检索生成的全链路
  • 工具调用深度集成：业务逻辑与AI能力的完美结合

2. 工程实践

  • 清晰的代码架构：分层明确，职责单一
  • 完善的错误处理：异常情况的优雅处理
  • 优秀的用户体验：流式响应、实时交互
  • 可扩展的设计：便于新增功能和场景

3. 业务价值

  • 多场景覆盖：从娱乐到商务的全方位应用
  • 技术栈统一：降低开发和维护成本
  • 快速迭代：基于Spring AI的快速开发能力
  • 产品化就绪：完整的功能和良好的交互设计

总结与展望

本项目作为Spring AI Alibaba的综合实战案例，展示了现代AI应用开发的最佳实践。通过四个不同场景的实现，我们可以看到：

  1. Spring AI框架的强大能力：简化了AI应用的开发复杂度
  2. 阿里云生态的完整性：从模型服务到基础设施的全栈支持
  3. AI应用的多样化可能：从工具性应用到娱乐性创新的广阔空间

未来发展方向

  1. 多模态能力扩展：支持音频、视频等更多媒体类型
  2. 智能体工作流：实现更复杂的AI代理任务
  3. 微服务架构改造：支持更大规模的并发访问
  4. AI能力平台化：构建可复用的AI能力中台

通过本项目的学习和实践，开发者可以快速掌握Spring AI Alibaba的核心概念和实战技能，为构建下一代AI应用打下坚实基础。
如果对你有帮助，请花一分钟点个star，谢谢了

项目地址：GitHub仓库链接

本文基于Spring AI Alibaba 1.0.0.2版本编写，部分API可能随版本更新有所变化，请以最新官方文档为准。

网络标签：

相关问题