react+springAI 接入deepseek Demo

react+springBoot 接入deepseek

先来看看实现效果

后端模块代码

后端模块

后端springBoot +springAi 链接: https://pan.baidu.com/s/1Woio0RVgxLSVvbulhA9rxA?pwd=1234 提取码: 1234

前端模块代码

前端react+vite 链接: https://pan.baidu.com/s/1eMdY8qe5TacdGEEoqskqaA?pwd=1234 提取码: 1234

前端运行： 先 npm install 或者yarn安装依赖

安装好了之后，npm run start 或者yarn start运行

第一步 新建项目

这步选properties或者YAML都行

第二步

新建项目后，先修改配置文件后缀为yml，便于后面填写配置。

spring:application:name:chatCoreJavadatasource:url:jdbc:mysql://localhost:3306/chatcore?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/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（最省事）

1. 用 IntelliJ IDEA 打开项目根目录chatCoreJava

2. 找到主类ChatCoreJavaApplication.java

3. 在main方法左侧点绿色运行按钮，或右键 → Run

启动成功后默认端口：8080

方式二：命令行

在项目根目录执行：
cd D:\AIAgentWorkspaces\AIWorks\chatCoreJava
.\mvnw.cmd spring-boot:run
或先打包再运行：
.\mvnw.cmd package -DskipTests
java -jar target\chatCoreJava-0.0.1-SNAPSHOT.jar
前提：本机已安装 JDK 21（pom.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调用DeepSeek（Anthropic 兼容端点）的核心配置与代码结构。
适用项目：chatCoreJava（Spring Boot 4.1.0）+chatCoreWeb（React + 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_KEY

• AI 对话走一条接口：POST /api/userChat/{id}/chat

• 后端负责：存 user 消息 → 调 Spring AI 流式 → 存 assistant 消息

二、Maven 依赖（chatCoreJava/pom.xml）

2.1 版本属性

<properties> <java.version>21</java.version> <spring-ai.version>2.0.0</spring-ai.version> </properties>

2.2 BOM 统一管理

<dependencyManagement> <dependencies> <dependency> <groupId>org.springframework.ai</groupId> <artifactId>spring-ai-bom</artifactId> <version>${spring-ai.version}</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement>

2.3 核心依赖

<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-webflux</artifactId> </dependency> <dependency> <groupId>org.springframework.ai</groupId> <artifactId>spring-ai-starter-model-anthropic</artifactId> </dependency>

为何用 Anthropic Starter？
DeepSeek 提供 Anthropic 兼容 API，基址为https://api.deepseek.com/anthropic。Spring AI 通过spring.ai.anthropic.base-url指向该地址即可。

三、应用配置（application.yml）

3.1 完整配置

路径：chatCoreJava/src/main/resources/application.yml

spring: 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.7

3.2 配置项说明

3.3 本地密钥配置（不入 Git）

方式 A：本地配置文件（推荐开发使用）

1. 复制application-local.yml.example为application-local.yml

2. 填入 API Key

# application-local.yml spring: ai: anthropic: api-key: your-deepseek-api-key-here

application-local.yml已在.gitignore中，不会提交到仓库。

方式 B：环境变量

# Windows PowerShell $env:DEEPSEEK_API_KEY="sk-你的key"

# Linux / macOS export DEEPSEEK_API_KEY=sk-你的key

主配置通过spring.config.import: optional:classpath:application-local.yml自动加载本地文件（不存在时不报错）。

四、Java 核心代码

4.1 文件清单

4.2 ChatClient 配置（AiConfig.java）

@Configuration 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. 返回 Flux<String> 供 Controller 做 SSE

Message 类型映射：

4.4 HTTP 接口（UserchatConversationController.java）

AI 流式对话（新增）

请求体：

{ "content": "你好" }

响应示例（SSE）：

data:你 data:好 data:！

Controller 核心代码：

@PostMapping(value = "/{conversationId}/chat", produces = MediaType.TEXT_EVENT_STREAM_VALUE) public Flux<ServerSentEvent<String>> chat(@PathVariable Long conversationId, @RequestBody ChatRequest request) { return aiChatService.streamChat(conversationId, request.getContent()) .map(chunk -> ServerSentEvent.builder(chunk).build()); }

相关会话接口（已有）

五、前端配置

5.1 环境变量（chatCoreWeb/.env）

VITE_JAVA_API_BASE_URL=/api VITE_JAVA_PROXY_TARGET=http://localhost:8080 VITE_DEFAULT_USER_ID=1

不再需要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.ts）

export async function streamConversationChat( conversationId: number, content: string, onChunk: (text: string) => void, signal?: AbortSignal, ): Promise<void>

• 请求：POST /api/userChat/{conversationId}/chat

• 解析 SSEdata:行，逐块回调onChunk

5.4 页面发送流程（ChatPage）

1. 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 启动顺序

1. 确保 MySQLchatcore库及表已建好

2. 配置 API Key（application-local.yml或环境变量）

3. 启动后端：chatCoreJava→ 端口8080

4. 启动前端：chatCoreWeb→ 端口5173

5. 打开 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，不是旧的streamChat

Q3：流式没输出 / 接口 500

• 看后端日志，常见为 Key 无效、模型名错误或网络不通

• 确认base-url为https://api.deepseek.com/anthropic（不是 OpenAI 的/v1路径）

Q4：如何换模型？

修改application.yml：

spring.ai.anthropic.chat.model: deepseek-v4-flash # 或 deepseek-v4-pro

DeepSeek Anthropic 端点对不支持的模型名会自动映射，详见 DeepSeek Anthropic API 文档。

Q5：为何同时引入 webmvc 和 webflux？

• webmvc：常规 REST 接口

• webflux：Spring AIChatClient.stream()返回Flux，SSE 流式响应需要 Reactive 支持

九、安全建议

1. API Key 只放后端，不要写进前端.env

2. application-local.yml已加入.gitignore，勿提交密钥

3. Key 泄露后及时在 DeepSeek 控制台轮换

4. 生产环境使用环境变量或密钥管理服务（如 K8s Secret）

十、相关文件索引

文档版本：2026-06 | 对应 Spring AI 2.0.0 + DeepSeek Anthropic API