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: chatCoreJava
  datasource:
    url: jdbc:mysql://localhost:3306/chatcore?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai
    username: root
    password: root
    driver-class-name: com.mysql.cj.jdbc.Driver

server:
  port: 8080

springdoc:
  swagger-ui:
    path: /swagger-ui.html
    tags-sorter: alpha
    operations-sorter: alpha
  api-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>
项 值 说明
Spring Boot 4.1.0 父 POM
Spring AI 2.0.0 与 Boot 4.x 配套
Java 21 运行版本

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 核心依赖

依赖 作用
spring-boot-starter-webmvc REST API
spring-boot-starter-webflux 支持 Flux 流式 SSE 响应
spring-ai-starter-model-anthropic Spring AI Anthropic 模型客户端（用于对接 DeepSeek Anthropic 端点） 
<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 配置项说明

配置项 值 说明
spring.ai.anthropic.api-key ${DEEPSEEK_API_KEY:} DeepSeek API Key，优先读环境变量
spring.ai.anthropic.base-url https://api.deepseek.com/anthropic DeepSeek Anthropic 兼容端点
spring.ai.anthropic.chat.model deepseek-chat 模型名，可改为 deepseek-v4-flash / deepseek-v4-pro
spring.ai.anthropic.chat.max-tokens 4096 单次回复最大 token
spring.ai.anthropic.chat.temperature 0.7 采样温度

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 文件清单

文件 职责
config/AiConfig.java 注册 ChatClient Bean，设置默认 System Prompt
service/AiChatService.java 编排：存消息 → 调 AI 流式 → 存回复
dto/ChatRequest.java 聊天请求体 { content }
controller/UserchatConversationController.java 暴露 SSE 接口

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 类型映射：

数据库 role Spring AI 类型
user UserMessage
assistant AssistantMessage
system SystemMessage

4.4 HTTP 接口（UserchatConversationController.java）

AI 流式对话（新增）
项 值
方法 POST
路径 /api/userChat/{conversationId}/chat
Content-Type application/json
响应类型 text/event-stream（SSE）

请求体：

{
  "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());
}
相关会话接口（已有）
方法 路径 说明
GET /api/userChat 会话列表
POST /api/userChat 新建会话
GET /api/userChat/{id}/messages 聊天历史
POST /api/userChat/{id}/messages 手动保存消息（AI 接口已内置，一般不需前端单独调）

五、前端配置

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

  • 解析 SSE data: 行，逐块回调 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. 确保 MySQL chatcore 库及表已建好

  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 AI ChatClient.stream() 返回 Flux，SSE 流式响应需要 Reactive 支持

九、安全建议

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

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

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

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

十、相关文件索引

路径 说明
chatCoreJava/pom.xml Spring AI 依赖
chatCoreJava/src/main/resources/application.yml 主配置
chatCoreJava/src/main/resources/application-local.yml.example 本地密钥模板
chatCoreJava/src/main/java/.../config/AiConfig.java ChatClient Bean
chatCoreJava/src/main/java/.../service/AiChatService.java AI 编排逻辑
chatCoreJava/src/main/java/.../controller/UserchatConversationController.java SSE 接口
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

# react.js # 前端 # 前端框架 # spring boot # spring
Logo
DeepSeek技术社区

欢迎加入DeepSeek 技术社区。在这里，你可以找到志同道合的朋友，共同探索AI技术的奥秘。

更多推荐

cover

DeepSeek联合北大最新文章DSpark： 如何让大模型推理速度提升 85%？

avatar DeepSeek技术社区
cover

解决导出格式难题选 AI 导出鸭：ChatGPT 公式粘贴后乱码怎么解决？多终端通用修复方案

avatar DeepSeek技术社区
cover

Claude 导出 word 下载不了？AI 导出鸭一键搞定文档导出难题

avatar DeepSeek技术社区