react+springAI 接入deepseek Demo 📅 2026/6/29 18:23:18 reactspringBoot 接入deepseek先来看看实现效果后端模块代码后端模块后端springBoot springAi 链接: https://pan.baidu.com/s/1Woio0RVgxLSVvbulhA9rxA?pwd1234 提取码: 1234前端模块代码前端reactvite 链接: https://pan.baidu.com/s/1eMdY8qe5TacdGEEoqskqaA?pwd1234 提取码: 1234前端运行 先 npm install 或者yarn安装依赖安装好了之后npm run start 或者yarn start运行第一步 新建项目这步选properties或者YAML都行第二步新建项目后先修改配置文件后缀为yml便于后面填写配置。spring:application:name:chatCoreJavadatasource:url:jdbc:mysql://localhost:3306/chatcore?useUnicodetruecharacterEncodingutf-8serverTimezoneAsia/Shanghaiusername:rootpassword:rootdriver-class-name:com.mysql.cj.jdbc.Driverserver:port:8080springdoc:swagger-ui:path:/swagger-ui.htmltags-sorter:alphaoperations-sorter:alphaapi-docs:path:/v3/api-docs项目结构项目结构 com.time.chatcore ├── domain/ │ └── User.java # 领域实体 ├── mapper/ │ └── UserMapper.java # MyBatis Mapper 接口 ├── service/ │ └── UserService.java # 业务层改用 Mapper └── controller/ └── UserController.java resources/mapper/ └── UserMapper.xml # SQL 映射项目启动方式一IDE最省事用 IntelliJ IDEA 打开项目根目录chatCoreJava找到主类ChatCoreJavaApplication.java在main方法左侧点绿色运行按钮或右键 → Run启动成功后默认端口8080方式二命令行在项目根目录执行cd D:\AIAgentWorkspaces\AIWorks\chatCoreJava.\mvnw.cmd spring-boot:run或先打包再运行.\mvnw.cmd package -DskipTestsjava -jar target\chatCoreJava-0.0.1-SNAPSHOT.jar前提本机已安装 JDK 21pom.xml 里配置的是 Java 21且 JAVA_HOME 已正确设置。启动后访问注意本地 MySQL 需已启动且存在chatcore库账号 root / root若命令行报JAVA_HOME environment variable is not defined correctly优先用 IDE 启动或先配置好 JDK 21 环境变量你平时如果用 IDEA直接运行ChatCoreJavaApplication就行。ChatCore Spring AI DeepSeek 核心配置文档本文档梳理 ChatCore 项目接入Spring AI 2.0调用DeepSeekAnthropic 兼容端点的核心配置与代码结构。适用项目chatCoreJavaSpring Boot 4.1.0chatCoreWebReact Vite一、整体架构flowchart LR subgraph 前端 chatCoreWeb ChatPage[ChatPage] ChatAPI[api/chat.ts] end subgraph 后端 chatCoreJava Controller[UserchatConversationController] AiService[AiChatService] ChatClient[Spring AI ChatClient] MsgService[UserchatMessageService] DB[(MySQL)] end subgraph DeepSeek API[https://api.deepseek.com/anthropic] end ChatPage -- ChatAPI ChatAPI --|POST SSE| Controller Controller -- AiService AiService -- MsgService -- DB AiService -- ChatClient -- API关键变化API Key 只配置在Java 后端前端不再持有VITE_API_KEYAI 对话走一条接口POST /api/userChat/{id}/chat后端负责存 user 消息 → 调 Spring AI 流式 → 存 assistant 消息二、Maven 依赖chatCoreJava/pom.xml2.1 版本属性properties java.version21/java.version spring-ai.version2.0.0/spring-ai.version /properties项值说明Spring Boot4.1.0父 POMSpring AI2.0.0与 Boot 4.x 配套Java21运行版本2.2 BOM 统一管理dependencyManagement dependencies dependency groupIdorg.springframework.ai/groupId artifactIdspring-ai-bom/artifactId version${spring-ai.version}/version typepom/type scopeimport/scope /dependency /dependencies /dependencyManagement2.3 核心依赖依赖作用spring-boot-starter-webmvcREST APIspring-boot-starter-webflux支持Flux流式 SSE 响应spring-ai-starter-model-anthropicSpring AI Anthropic 模型客户端用于对接 DeepSeek Anthropic 端点dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-webflux/artifactId /dependency dependency groupIdorg.springframework.ai/groupId artifactIdspring-ai-starter-model-anthropic/artifactId /dependency为何用 Anthropic StarterDeepSeek 提供 Anthropic 兼容 API基址为https://api.deepseek.com/anthropic。Spring AI 通过spring.ai.anthropic.base-url指向该地址即可。三、应用配置application.yml3.1 完整配置路径chatCoreJava/src/main/resources/application.ymlspring: config: import: optional:classpath:application-local.yml ai: anthropic: api-key: ${DEEPSEEK_API_KEY:} base-url: https://api.deepseek.com/anthropic chat: model: deepseek-chat max-tokens: 4096 temperature: 0.73.2 配置项说明配置项值说明spring.ai.anthropic.api-key${DEEPSEEK_API_KEY:}DeepSeek API Key优先读环境变量spring.ai.anthropic.base-urlhttps://api.deepseek.com/anthropicDeepSeek Anthropic 兼容端点spring.ai.anthropic.chat.modeldeepseek-chat模型名可改为deepseek-v4-flash/deepseek-v4-prospring.ai.anthropic.chat.max-tokens4096单次回复最大 tokenspring.ai.anthropic.chat.temperature0.7采样温度3.3 本地密钥配置不入 Git方式 A本地配置文件推荐开发使用复制application-local.yml.example为application-local.yml填入 API Key# application-local.yml spring: ai: anthropic: api-key: your-deepseek-api-key-hereapplication-local.yml已在.gitignore中不会提交到仓库。方式 B环境变量# Windows PowerShell $env:DEEPSEEK_API_KEYsk-你的key# Linux / macOS export DEEPSEEK_API_KEYsk-你的key主配置通过spring.config.import: optional:classpath:application-local.yml自动加载本地文件不存在时不报错。四、Java 核心代码4.1 文件清单文件职责config/AiConfig.java注册ChatClientBean设置默认 System Promptservice/AiChatService.java编排存消息 → 调 AI 流式 → 存回复dto/ChatRequest.java聊天请求体{ content }controller/UserchatConversationController.java暴露 SSE 接口4.2 ChatClient 配置AiConfig.javaConfiguration public class AiConfig { Bean public ChatClient chatClient(ChatClient.Builder builder) { return builder .defaultSystem(你是一个有帮助的 AI 助手请用简洁清晰的中文回答。) .build(); } }ChatClient.Builder由 Spring AI Starter自动注入defaultSystem(...)为所有对话设置系统提示词4.3 AI 业务编排AiChatService.java调用流程1. 校验用户输入 2. messageService.saveMessage(..., user, content) // 落库 3. 查询会话全部历史 → 转为 Spring AI Message 列表 4. chatClient.prompt().messages(history).stream().content() 5. doOnComplete → saveMessage(..., assistant, 完整回复) 6. 返回 FluxString 供 Controller 做 SSEMessage 类型映射数据库 roleSpring AI 类型userUserMessageassistantAssistantMessagesystemSystemMessage4.4 HTTP 接口UserchatConversationController.javaAI 流式对话新增项值方法POST路径/api/userChat/{conversationId}/chatContent-Typeapplication/json响应类型text/event-streamSSE请求体{ content: 你好 }响应示例SSEdata:你 data:好 data:Controller 核心代码PostMapping(value /{conversationId}/chat, produces MediaType.TEXT_EVENT_STREAM_VALUE) public FluxServerSentEventString chat(PathVariable Long conversationId, RequestBody ChatRequest request) { return aiChatService.streamChat(conversationId, request.getContent()) .map(chunk - ServerSentEvent.builder(chunk).build()); }相关会话接口已有方法路径说明GET/api/userChat会话列表POST/api/userChat新建会话GET/api/userChat/{id}/messages聊天历史POST/api/userChat/{id}/messages手动保存消息AI 接口已内置一般不需前端单独调五、前端配置5.1 环境变量chatCoreWeb/.envVITE_JAVA_API_BASE_URL/api VITE_JAVA_PROXY_TARGEThttp://localhost:8080 VITE_DEFAULT_USER_ID1不再需要VITE_API_KEY、VITE_PROXY_TARGET、VITE_MODEL。5.2 Vite 代理vite.config.ts所有/api请求统一转发到 Java 后端server: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true, }, }, }5.3 AI 调用src/api/chat.tsexport async function streamConversationChat( conversationId: number, content: string, onChunk: (text: string) void, signal?: AbortSignal, ): Promisevoid请求POST /api/userChat/{conversationId}/chat解析 SSEdata:行逐块回调onChunk5.4 页面发送流程ChatPage1. ensureConversationId() // 无会话则先创建 2. streamConversationChat(...) // 调后端 SSE实时渲染 3. loadConversations() // 刷新左侧标题/时间前端不再单独调用saveConversationMessage存 user/assistant由后端AiChatService统一处理。六、一次完整对话时序sequenceDiagram participant U as 用户 participant FE as 前端 participant BE as Java 后端 participant AI as DeepSeek participant DB as MySQL U-FE: 输入「你好」并发送 FE-BE: POST /api/userChat/1/chat { content: 你好 } BE-DB: INSERT user 消息 BE-DB: SELECT 历史消息 BE-AI: Spring AI ChatClient.stream() AI--BE: token 流 BE--FE: SSE data: 你 / data: 好 ... BE-DB: INSERT assistant 完整回复 FE-BE: GET /api/userChat刷新列表七、启动与验证7.1 启动顺序确保 MySQLchatcore库及表已建好配置 API Keyapplication-local.yml或环境变量启动后端chatCoreJava→ 端口8080启动前端chatCoreWeb→ 端口5173打开 AI 聊天 → 新建会话 → 发送消息7.2 Swagger 调试地址http://localhost:8080/swagger-ui.html可测试POST /api/userChat/{conversationId}/chat注意 SSE 在 Swagger 里体验不如前端。7.3 curl 测试可选curl -N -X POST http://localhost:8080/api/userChat/1/chat \ -H Content-Type: application/json \ -d {\content\:\你好\}八、常见问题Q1报错 API Key 为空检查application-local.yml是否存在且配置了spring.ai.anthropic.api-key或检查环境变量DEEPSEEK_API_KEY是否已设置修改配置后需重启 Java 后端Q2前端仍提示配置 VITE_API_KEY说明前端代码未更新应已移除该校验确认ChatPage使用的是streamConversationChat不是旧的streamChatQ3流式没输出 / 接口 500看后端日志常见为 Key 无效、模型名错误或网络不通确认base-url为https://api.deepseek.com/anthropic不是 OpenAI 的/v1路径Q4如何换模型修改application.ymlspring.ai.anthropic.chat.model: deepseek-v4-flash # 或 deepseek-v4-proDeepSeek Anthropic 端点对不支持的模型名会自动映射详见 DeepSeek Anthropic API 文档。Q5为何同时引入 webmvc 和 webfluxwebmvc常规 REST 接口webfluxSpring AIChatClient.stream()返回FluxSSE 流式响应需要 Reactive 支持九、安全建议API Key 只放后端不要写进前端.envapplication-local.yml已加入.gitignore勿提交密钥Key 泄露后及时在 DeepSeek 控制台轮换生产环境使用环境变量或密钥管理服务如 K8s Secret十、相关文件索引路径说明chatCoreJava/pom.xmlSpring AI 依赖chatCoreJava/src/main/resources/application.yml主配置chatCoreJava/src/main/resources/application-local.yml.example本地密钥模板chatCoreJava/src/main/java/.../config/AiConfig.javaChatClient BeanchatCoreJava/src/main/java/.../service/AiChatService.javaAI 编排逻辑chatCoreJava/src/main/java/.../controller/UserchatConversationController.javaSSE 接口chatCoreWeb/src/api/chat.ts前端 SSE 调用chatCoreWeb/vite.config.ts开发代理docs/ChatCore-AI实现文档.md整体架构与演进说明docs/Spring-AI-vs-LangChain4j对比.md框架选型对比文档版本2026-06 | 对应 Spring AI 2.0.0 DeepSeek Anthropic API