Next.js + Spring Boot 实现 AI 多模型并行对话系统（架构设计与关键实现）

前言

最近在做 AI 对话类项目，核心功能包括多模型并行对话、Git 式对话分支、知识自动沉淀、AI 语义搜索等。本文分享下整体架构设计和一些关键技术实现，供同样在做类似项目的同学参考。

一、技术架构

前端

复制代码

Next.js 16 (App Router)
├── React 19
├── TypeScript 5.9
├── shadcn/ui + Tailwind CSS
├── next-intl (国际化，中英双语)
└── SSE Client (流式输出)

后端

复制代码

Spring Boot 3.5
├── Kotlin 2.3
├── JDK 25 (虚拟线程)
├── PostgreSQL + pgvector (向量检索)
├── Redis + Caffeine (二级缓存)
├── Spring AI → OpenRouter (300+ 模型)
└── SSE Server (流式输出)

二、多模型并行对话实现

核心思路

用户一条消息同时发给多个 AI 模型，每个模型的回复通过 SSE 实时流式返回。

前端实现要点

使用 EventSource 监听 SSE 流
多个模型的回复并行展示
每个模型独立显示生成状态（准备中/推理中/输出中/已完成）
支持中途停止生成

后端实现要点

Spring Boot 的 SseEmitter 实现流式输出
通过 OpenRouter 统一调用多家供应商
每个模型的请求并行执行（虚拟线程）
首包时间控制在 3 秒内

三、Git 式对话分支设计

数据模型

复制代码

Chat (对话)
├── Branch (分支)
│   ├── BranchMessageNode (消息节点)
│   │   └── Message (消息，可包含多个模型回复)
│   └── Branch 参数 (模型/工具/参数独立配置)

分支操作

操作	说明
Fork	从某个历史节点创建新分支
Merge	将源分支消息追加到当前分支
Pick	标记哪条回复是主路径
强制指向	当前分支指向另一分支的位置

四、知识沉淀 + 向量检索

技术选型

Embedding 模型：baai/bge-m3（1024 维）
向量存储：PostgreSQL + pgvector
检索方式：余弦相似度

实现流程

AI 回复完成后，异步提取关键信息生成知识条目
将知识内容通过 bge-m3 转化为 1024 维向量
存储到 PostgreSQL 的 pgvector 扩展
用户发消息时，自动检索最相关的知识注入上下文

性能优化

检索前先过滤（用户ID + 标签），减少向量计算量
缓存热门检索结果（Redis + Caffeine 二级缓存）
向量索引优化（IVFFlat）

五、AI 语义搜索

搜索类型

类型	搜索方式
对话/文件夹/应用	关键词匹配
消息	向量语义搜索（显示相似度百分比）
文件	关键词 + AI 语义搜索双模式
AI 图片	向量语义搜索

拓展：文件语义搜索

文件搜索可扩展支持 AI 语义搜索模式，用自然语言描述就能找到文件。例如"上周上传的合同"，实现原理同样是向量检索 + 文件内容 Embedding。

六、后台推流------SSE 连接不断开

这是一个比较独特的功能：用户关闭或刷新页面后，后端与大模型的 SSE 连接不断开，继续在后台流式接收数据。

技术实现：

在 IceUser 表新增 backgroundStreamEnabled 字段，支持数据库持久化
使用 Redis Pub/Sub + Redis List 双轨机制实现多实例解耦
Redis List 存储每个 chunk（保证消息不丢失）
Redis Channel 实时广播新 chunk（解决多实例解耦）
新增 ChatStreamHub 核心逻辑，封装后台流状态管理
新增 /checkActiveStream 和 /resume 接口，支持活跃流查询和 SSE 重连

前端配合：

chat.ts 新增 checkActiveStream 和 resumeMessageStream API
use-chat-sse.ts 新增 resumeStream 函数，处理 CATCH_UP（替换模式）和后续流事件
MessageList.tsx 自动检测 STREAMING 消息并触发重连
Settings 页面添加后台推流开关

七、功能全景

功能	技术要点
后台推流	Redis List + Pub/Sub + SSE 重连
多模型并行对话	SSE + OpenRouter + 虚拟线程
推理过程展示	Reasoning 内容折叠/展开展示
多模态输入输出	图片/音频/视频对话 + 图片生成
模型浏览页	独立模型浏览页 + 供应商/模态/价格筛选
Git 式对话分支	树状数据模型 + 分支操作 API
知识沉淀	bge-m3 + pgvector + 自动提取
记忆系统	6 级稳定性特征 + 向量检索注入
AI 应用创作	SSE 流式生成 HTML + iframe 预览
AI 语义搜索	向量检索 + 自然语言描述
积分系统	按 token 计费 + 实时显示消耗
多渠道支付	Paddle + 微信/支付宝扫码
安全	AES 加密存储 + JWT 认证
国际化	next-intl 中英双语

八、值得关注的扩展功能

除了上面详细展开的核心模块，还有一些实现思路也值得聊一聊：

推理过程展示：将模型 Reasoning 阶段的内容做折叠/展开处理，不干扰主对话流，但用户可以随时查看完整推理链
多模态输入输出：图片/音频/视频对话，技术上涉及多模态消息编码 + 模型适配层
模型浏览页：独立页面展示可用模型，支持按供应商/模态/价格筛选，本质是一个模型元数据管理模块
邀请机制：邀请注册 + 积分奖励，核心是防刷（限频、限设备、限 IP）和积分发放的事务一致性
应用讨论面板：围绕 AI 生成的应用进行实时讨论，类似轻量级评论系统 + SSE 实时推送
多设备数据同步：通过云端存储 + 增量同步实现多端一致性
文件库 + 多格式预览：统一文件管理，支持图片/视频/PDF/Office 等格式的在线预览
存储额度管理：空间可视化 + 智能清理，涉及文件大小统计与配额控制

如果对某些技术实现细节感兴趣，可以在评论区交流，也可以分享你在做类似项目时的经验和踩过的坑。