🔥 全网最轻量的 Deepseek WebChat 项目！
零依赖，零配置，几分钟即可本地启动自己的 AI 聊天界面。
🧠 一、项目介绍
Deepseek WebChat 是一个基于 Spring Boot 后端 + HTML 前端 的简洁 AI 聊天演示项目，
可以与 Deepseek API 进行实时流式对话，支持 Markdown 高亮和代码块渲染。
👉 效果演示：
特点：
✅ 支持流式输出（即打字机式回复）
✅ 支持 Markdown 格式（含代码高亮）
✅ 前后端独立，结构简单易部署
✅ 纯本地运行，不依赖外部服务
🧩 二、技术栈
| 模块 | 技术 |
|---|---|
| 后端 | Spring Boot 3 + WebFlux + Jackson |
| 前端 | 原生 HTML + JS + Markdown-it + Highlight.js |
| 通信方式 | SSE（Server-Sent Events）流式传输 |
| 构建工具 | Maven |
⚙️ 三、快速启动教程
1️⃣ 克隆项目
bash
git clone https://github.com/MTQ851/deepseek-webchat.git
cd deepseek-webchat⚠️ 如果你在中国大陆地区访问 GitHub 较慢，可以使用镜像或代理。
2️⃣ 修改配置（可选）
打开 src/main/java/com/deepseek/controller/ai/DeepSeekController.java，设置你的 Deepseek API Key：
yaml
private static final String DEEP_SEEK_API_KEY = "Bearer sk-xxxxxxxxxxxxxxxx";3️⃣ 启动后端服务
在项目根目录下执行：
bash
mvn spring-boot:run启动成功后，控制台会输出：
2025-10-27 16:06:35.139 INFO 48652 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port(s): 8080 (http) with context path ''
2025-10-27 16:06:35.144 INFO 48652 --- [ main] com.deepseek.DeepSeekApplication : Started DeepSeekApplication in 0.865 seconds (JVM running for 1.183)
2025-10-27 16:06:35.164 INFO 48652 --- [nio-8080-exec-1] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring DispatcherServlet 'dispatcherServlet'
2025-10-27 16:06:35.164 INFO 48652 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet : Initializing Servlet 'dispatcherServlet'
2025-10-27 16:06:35.166 INFO 48652 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet : Completed initialization in 2 ms
请手动打开浏览器访问 http://localhost:8080/4️⃣ 打开前端页面
前端页面地址：
http://localhost:8080/默认访问接口地址为：
http://localhost:8080/api/deepseek/stream然后输入内容，就能实时看到模型回答啦！
💬 四、项目结构
deepseek-webchat/
├── src/
│ ├── main/
│ │ ├── java/com/deepseek/controller/ai/DeepSeekController.java
│ │ ├── resources/static/index.html
│ │ └── resources/application.yml
├── pom.xml
└── README.md🧩 五、核心代码示例
后端流式接口（简化版）
java
@GetMapping(value = "/stream", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public Flux<String> stream(@RequestParam String prompt, HttpServletRequest request) {
//todo 历史记录可加上下文联系逻辑自行补充
List<Map<String, String>> chatHistory = new LinkedList<>();
// 添加用户输入
Map<String, String> userInput = new HashMap<>();
userInput.put("role", "user");
userInput.put("content", prompt);
chatHistory.add(userInput);
// 组装 OpenAI API 参数
Map<String, Object> paramMap = new HashMap<>();
paramMap.put("model", "deepseek-chat");
paramMap.put("messages", chatHistory);
paramMap.put("stream", true);
ObjectMapper objectMapper = new ObjectMapper();
StringBuilder answerBuffer = new StringBuilder();
StringBuilder answerThinkBuffer = new StringBuilder();
return webClientByDeepSeek.post()
.uri("/v1/chat/completions")
.contentType(MediaType.APPLICATION_JSON)
.bodyValue(paramMap)
.retrieve()
.bodyToFlux(String.class)
.doOnNext(json -> {
// 跳过 [DONE] 标记，避免 JSON 解析错误
if ("[DONE]".equals(json)) {
return;
}
// 保持返回内容不变，但提取回答保存
try {
// 解析 JSON 文本为树形结构
JsonNode root = objectMapper.readTree(json);
// 提取聊天回答内容（模型输出）
String extracted = root.path("choices").get(0).path("delta").path("content").asText("");
answerBuffer.append(extracted);
// 提取模型推理内容（有些模型返回 reasoning_content）
String extractedThink = root.path("choices").get(0).path("delta").path("reasoning_content").asText("");
answerThinkBuffer.append(extractedThink);
} catch (JsonProcessingException e) {
log.error("解析回答失败: {}", json, e);
}
})
.doFinally(signal -> {
//todo 可补充保存内容逻辑
log.info("模型输出: " + answerBuffer);
log.info("模型推理: " + answerThinkBuffer);
})
.delayElements(Duration.ofMillis(50)); // 控制节奏
}前端请求逻辑
js
const url = `http://127.0.0.1:8080/api/deepseek/stream?prompt=${encodeURIComponent(prompt)}`;
const response = await fetch(url);🌈 六、常见问题
❓Q1：API Key 从哪里来？
👉 前往 Deepseek 官网 申请并在配置文件中填入。
📦 七、源码地址
GitHub 开源地址：https://github.com/MTQ851/deepseek-webchat.git
❤️ 八、支持一下
如果本项目对你有帮助：
- ⭐ 给仓库一个 Star！
- 💬 在评论区留言支持！
- 🔁 分享给需要的小伙伴！
✍️ 九、作者寄语
本项目初衷是帮助开发者更快上手 Deepseek API，
并提供一个简单、美观的本地可运行界面。
欢迎 Fork、改进、再创作 ❤️！