在騰訊云CodeBuddy上實現一個AI聊天助手項目

在當今數字化時代，AI聊天助手已經成為一種非常流行的應用，廣泛應用于客戶服務、智能助手等領域。今天，我們將通過騰訊云CodeBuddy平臺，實現一個基于Spring Boot和OpenAI API的AI聊天助手項目。這個項目將幫助你快速搭建一個功能強大的聊天助手，同時展示騰訊云CodeBuddy的強大開發能力。

項目背景

我們選擇的項目是 Spring AI 聊天助手，這是一個基于Spring Boot和OpenAI API的開源項目。它使用了DeepSeek-R1-Distill-Llama-8B模型，通過SiliconFlow API提供服務。這個項目具備以下功能特點：

• 基于Spring AI框架實現的聊天功能
• 使用OpenAI兼容的API接口
• 響應式Web界面
• 聊天歷史記錄管理
• 支持代碼高亮顯示

環境準備

在開始之前，我們需要準備以下環境和工具：

• 騰訊云CodeBuddy賬號：用于開發和部署項目。
• JDK 17或更高版本：用于運行Spring Boot項目。
• Maven 3.6或更高版本：用于項目構建。
• OpenAI API密鑰或兼容的API密鑰：用于接入AI服務。

項目搭建

1. 安裝好CodeBuddy

首先，我們需要安裝好CodeBuddy，可以參考我上一篇博客，然后在項目里給出命令，讓AI創建代碼，要加上技術棧和版本，比如本博客使用的版本是1.0.0-M5

這個過程比較長，需要一點引導AI創建修改代碼

2. 配置項目

在騰訊云CodeBuddy中，找到項目的 application.yml 文件，進行以下配置：

spring:ai:openai:api-key: your-api-key-herebase-url: https://api.siliconflow.cnchat:options:model: deepseek-ai/DeepSeek-R1-Distill-Llama-8B

你也可以通過環境變量設置API密鑰，例如：

export OPENAI_API_KEY=your-api-key-here

3. 構建和運行項目

在騰訊云CodeBuddy的終端中，運行以下命令構建項目：

mvn clean package

構建完成后，運行項目：

java -jar target/springboot-ai-chatbot-0.0.1-SNAPSHOT.jar

項目將在 http://localhost:8080 上運行。你可以通過瀏覽器訪問該地址，開始使用AI聊天助手。

4. 使用Web界面與AI交互

打開瀏覽器，訪問 http://localhost:8080。在輸入框中輸入你的問題，點擊“發送”按鈕或按Enter鍵，即可查看AI助手的回復。

5. 通過API與AI交互

你也可以通過API與AI進行交互。以下是幾個常用的API端點：

• 發送聊天消息：

  curl -X POST http://localhost:8080/api/chat \-H "Content-Type: application/json" \-d '{"message":"你好，請介紹一下自己"}'
  

• 獲取聊天歷史：

  curl -X GET http://localhost:8080/api/chat/history
  

• 清除聊天歷史：

  curl -X POST http://localhost:8080/api/chat/clear
  

代碼說明

1. ChatService.java

ChatService.java 是項目的核心服務類，它負責與OpenAI API進行交互，處理聊天邏輯。以下是代碼的關鍵部分：

package com.example.chatbot.service;import com.example.chatbot.exception.ChatException;
import com.example.chatbot.model.ChatMessage;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.ai.chat.client.ChatClient;
import org.springframework.ai.chat.messages.AssistantMessage;
import org.springframework.ai.chat.messages.Message;
import org.springframework.ai.chat.messages.SystemMessage;
import org.springframework.ai.chat.messages.UserMessage;
import org.springframework.ai.chat.prompt.Prompt;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.locks.ReentrantLock;
import java.util.stream.Collectors;@Service
public class ChatService {private static final Logger log = LoggerFactory.getLogger(ChatService.class);private final ChatClient chatClient;private final String systemPrompt;private final int maxHistorySize;private final List<Message> chatHistory = new ArrayList<>();private final ReentrantLock historyLock = new ReentrantLock();public ChatService(ChatClient.Builder builder,@Value("${spring.ai.openai.system-prompt:你是一個友好、樂于助人的AI助手。請提供簡潔、準確的回答。}") String systemPrompt,@Value("${spring.ai.chat.history.max-size:50}") int maxHistorySize) {this.chatClient = builder.defaultSystem(systemPrompt).build();this.systemPrompt = systemPrompt;this.maxHistorySize = maxHistorySize;initializeChatHistory();}/*** 初始化聊天歷史，添加系統消息*/private void initializeChatHistory() {historyLock.lock();try {chatHistory.clear();chatHistory.add(new SystemMessage(systemPrompt));log.info("聊天歷史已初始化，系統提示: {}", systemPrompt);} finally {historyLock.unlock();}}/*** 處理聊天請求* @param userInput 用戶輸入內容* @return AI響應內容*/public String chat(String userInput) {if (userInput == null || userInput.trim().isEmpty()) {throw new ChatException("輸入內容不能為空");}try {String processedInput = userInput.trim();log.info("收到用戶輸入: {}", processedInput);// 添加用戶消息到歷史記錄UserMessage userMessage = new UserMessage(processedInput);addToHistory(userMessage);// 檢查歷史記錄大小，超過限制則清理trimHistoryIfNeeded();// 創建提示并獲取響應（直接使用框架Message列表）Prompt prompt = new Prompt(new ArrayList<>(getFrameworkChatHistory()));log.info("發送請求到AI模型，歷史消息數量: {}", prompt.getInstructions().size());String responseContent = chatClient.prompt(prompt).call().chatResponse().getResult().getOutput().getContent();// 處理空響應if (responseContent == null || responseContent.trim().isEmpty()) {responseContent = "抱歉，未能生成有效響應，請嘗試重新提問。";log.warn("AI返回空響應，使用默認回復");}// 添加助手響應到歷史記錄addToHistory(new AssistantMessage(responseContent));log.info("AI響應處理完成，響應長度: {}", responseContent.length());return responseContent;} catch (Exception e) {log.error("處理聊天請求失敗", e);throw new ChatException("處理聊天請求失敗: " + e.getMessage(), e);}}/*** 獲取前端需要的聊天歷史（不含系統消息）* @return 聊天歷史列表*/public List<ChatMessage> getChatHistory() {historyLock.lock();try {return chatHistory.stream().skip(1) // 跳過系統消息.map(message -> {String role = message instanceof UserMessage ? "user" : "assistant";return new ChatMessage(role, message.getContent());}).collect(Collectors.toList());} finally {historyLock.unlock();}}/*** 獲取框架需要的完整聊天歷史（包含系統消息）* @return 框架消息列表*/private List<Message> getFrameworkChatHistory() {historyLock.lock();try {return new ArrayList<>(chatHistory);} finally {historyLock.unlock();}}/*** 清除聊天歷史*/public void clearHistory() {initializeChatHistory();log.info("聊天歷史已清除");}/*** 添加消息到歷史記錄*/private void addToHistory(Message message) {historyLock.lock();try {chatHistory.add(message);log.debug("添加消息到歷史，角色: {}, 內容長度: {}",message.getClass().getSimpleName(),message.getContent().length());} finally {historyLock.unlock();}}/*** 如果歷史記錄超過最大限制，清理部分歷史*/private void trimHistoryIfNeeded() {historyLock.lock();try {// 保留系統消息，只清理用戶和助手的消息if (chatHistory.size() > maxHistorySize) {int messagesToRemove = chatHistory.size() - maxHistorySize;for (int i = 0; i < messagesToRemove; i++) {chatHistory.remove(1); // 從索引1開始刪除（保留系統消息）}log.info("聊天歷史已修剪，移除了 {} 條消息，當前大小: {}",messagesToRemove, chatHistory.size());}} finally {historyLock.unlock();}}
}

• OpenAIClient：這是Spring AI提供的客戶端，用于與OpenAI API進行交互。
• ChatRequest：這是發送給AI的請求對象，包含用戶的消息。
• ChatResponse：這是從AI返回的響應對象，包含AI的回復。

2. ChatController.java

ChatController.java 是項目的控制器類，負責處理HTTP請求和響應。以下是代碼的關鍵部分：

package com.example.chatbot.controller;import com.example.chatbot.model.ChatMessage;
import com.example.chatbot.service.ChatService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;import java.util.List;
import java.util.Map;@RestController
@RequestMapping("/api/chat")
public class ChatController {private final ChatService chatService;@Autowiredpublic ChatController(ChatService chatService) {this.chatService = chatService;}@PostMappingpublic ResponseEntity<ChatMessage> chat(@RequestBody Map<String, String> request) {String userMessage = request.get("message");String response = chatService.chat(userMessage);return ResponseEntity.ok(new ChatMessage("assistant", response));}@GetMapping("/history")public ResponseEntity<List<ChatMessage>> getChatHistory() {return ResponseEntity.ok(chatService.getChatHistory());}@PostMapping("/clear")public ResponseEntity<Void> clearHistory() {chatService.clearHistory();return ResponseEntity.ok().build();}
}

• @PostMapping：處理發送聊天消息的POST請求。
• @GetMapping("/history")：處理獲取聊天歷史的GET請求。
• @PostMapping("/clear")：處理清除聊天歷史的POST請求。

3. index.html

index.html 是項目的前端頁面，提供了一個響應式的Web界面，用戶可以通過這個界面與AI進行交互。以下是代碼的關鍵部分：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AI 聊天助手</title><!-- 引入Tailwind CSS --><script src="https://cdn.tailwindcss.com"></script><!-- 引入Font Awesome --><link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"><!-- 配置Tailwind自定義顏色和字體 --><script>tailwind.config = {theme: {extend: {colors: {primary: '#3B82F6',secondary: '#10B981',neutral: '#F3F4F6',dark: '#1F2937',light: '#F9FAFB'},fontFamily: {inter: ['Inter', 'system-ui', 'sans-serif'],},}}}</script><style type="text/tailwindcss">@layer utilities {.content-auto {content-visibility: auto;}.message-appear {animation: fadeIn 0.3s ease-out forwards;}.typing-pulse span {animation: pulse 1.4s infinite ease-in-out both;}.typing-pulse span:nth-child(1) { animation-delay: -0.32s; }.typing-pulse span:nth-child(2) { animation-delay: -0.16s; }}@keyframes fadeIn {from { opacity: 0; transform: translateY(10px); }to { opacity: 1; transform: translateY(0); }}@keyframes pulse {0%, 80%, 100% { transform: scale(0); }40% { transform: scale(1); }}</style>
</head>
<body class="font-inter bg-gradient-to-br from-light to-neutral min-h-screen flex flex-col">
<!-- 頂部導航欄 -->
<header class="bg-white shadow-md py-4 px-6 sticky top-0 z-10"><div class="max-w-4xl mx-auto flex items-center justify-between"><div class="flex items-center gap-2"><i class="fa fa-comments text-primary text-2xl"></i><h1 class="text-[clamp(1.25rem,3vw,1.75rem)] font-bold text-dark">AI 聊天助手</h1></div><div class="text-sm text-gray-500"><span class="flex items-center gap-1"><span class="h-2 w-2 bg-green-500 rounded-full animate-pulse"></span>在線</span></div></div>
</header><!-- 主內容區 -->
<main class="flex-grow flex flex-col max-w-4xl w-full mx-auto w-full px-4 py-6 md:py-8"><!-- 聊天容器 --><div class="chat-container bg-white rounded-2xl shadow-lg p-4 md:p-6 h-[70vh] overflow-y-auto mb-6"><div th:each="message : ${chatHistory}"><div th:class="${message.role == 'user' ? 'message user-message' : 'message assistant-message'}"th:utext="${#strings.replace(#strings.escapeXml(message.content), '&#10;', '<br/>')}"></div></div><!-- 輸入指示器 --><div class="message assistant-message typing opacity-0" id="typing-indicator"><div class="flex items-center gap-2"><div class="w-2 h-2 bg-gray-400 rounded-full typing-pulse"><span class="absolute w-2 h-2 bg-gray-400 rounded-full"></span><span class="absolute w-2 h-2 bg-gray-400 rounded-full ml-3"></span><span class="absolute w-2 h-2 bg-gray-400 rounded-full ml-6"></span></div><span>正在思考...</span></div></div></div><!-- 輸入區域 --><div class="input-container bg-white rounded-2xl shadow-md p-3 flex gap-3"><inputtype="text"id="user-input"placeholder="輸入你的問題..."autocomplete="off"class="flex-grow px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all"><button id="send-btn" class="bg-primary hover:bg-primary/90 text-white p-3 rounded-xl transition-all shadow-md hover:shadow-lg flex items-center justify-center"><i class="fa fa-paper-plane"></i></button><button id="clear-btn" class="bg-gray-200 hover:bg-gray-300 text-gray-700 p-3 rounded-xl transition-all shadow-sm hover:shadow"><i class="fa fa-trash"></i></button></div>
</main><!-- 頁腳 -->
<footer class="py-4 px-6 text-center text-gray-500 text-sm"><p>? 2025 AI 聊天助手 | 提供智能對話服務</p>
</footer><script>document.addEventListener('DOMContentLoaded', function() {const chatContainer = document.querySelector('.chat-container');const userInput = document.getElementById('user-input');const sendBtn = document.getElementById('send-btn');const clearBtn = document.getElementById('clear-btn');const typingIndicator = document.getElementById('typing-indicator');// 滾動到底部function scrollToBottom() {chatContainer.scrollTop = chatContainer.scrollHeight;}// 初始滾動到底部scrollToBottom();// 添加消息到聊天界面function addMessage(content, isUser) {const messageDiv = document.createElement('div');messageDiv.className = `message message-appear ${isUser ? 'user-message' : 'assistant-message'} mb-4 opacity-0`;// 處理代碼塊格式if (content.includes('```')) {content = content.replace(/```([\s\S]*?)```/g,'<pre class="bg-gray-100 p-3 rounded-lg my-2 overflow-x-auto"><code>$1</code></pre>');}messageDiv.innerHTML = content.replace(/\n/g, '<br/>');chatContainer.appendChild(messageDiv);// 觸發動畫setTimeout(() => {messageDiv.classList.remove('opacity-0');}, 10);scrollToBottom();}// 發送消息function sendMessage() {const message = userInput.value.trim();if (message === '') return;// 添加用戶消息addMessage(message, true);userInput.value = '';// 顯示正在輸入指示器typingIndicator.style.display = 'block';setTimeout(() => {typingIndicator.classList.remove('opacity-0');}, 10);scrollToBottom();// 發送請求到服務器fetch('/api/chat', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ message: message })}).then(response => response.json()).then(data => {// 隱藏正在輸入指示器typingIndicator.classList.add('opacity-0');setTimeout(() => {typingIndicator.style.display = 'none';}, 300);// 添加AI響應addMessage(data.content, false);}).catch(error => {console.error('Error:', error);typingIndicator.classList.add('opacity-0');setTimeout(() => {typingIndicator.style.display = 'none';}, 300);addMessage('發生錯誤，請重試。', false);});}// 清除聊天歷史function clearChat() {fetch('/api/chat/clear', {method: 'POST'}).then(() => {// 清除聊天界面const messages = chatContainer.querySelectorAll('.message:not(.typing)');messages.forEach(msg => {msg.classList.add('opacity-0');setTimeout(() => msg.remove(), 300);});}).catch(error => {console.error('Error:', error);});}// 事件監聽器sendBtn.addEventListener('click', sendMessage);clearBtn.addEventListener('click', clearChat);userInput.addEventListener('keypress', function(e) {if (e.key === 'Enter') {sendMessage();}});// 樣式定義const style = document.createElement('style');style.textContent = `.user-message {background-color: #3B82F6;color: white;margin-left: auto;border-radius: 18px 18px 4px 18px;padding: 12px 18px;max-width: 75%;word-wrap: break-word;box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);}.assistant-message {background-color: #F3F4F6;color: #1F2937;margin-right: auto;border-radius: 18px 18px 18px 4px;padding: 12px 18px;max-width: 75%;word-wrap: break-word;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);}pre {font-family: 'Consolas', 'Monaco', monospace;}.chat-container::-webkit-scrollbar {width: 6px;}.chat-container::-webkit-scrollbar-track {background: #f1f1f1;border-radius: 10px;}.chat-container::-webkit-scrollbar-thumb {background: #c1c1c1;border-radius: 10px;}.chat-container::-webkit-scrollbar-thumb:hover {background: #a8a8a8;}`;document.head.appendChild(style);});</script>
</body>
</html>

• chat-container：聊天界面的容器。
• chat-history：顯示聊天歷史的區域。
• chat-input：用戶輸入消息的輸入框。
• send-button：發送消息的按鈕。

4. scripts.js

scripts.js 是前端的JavaScript腳本，負責處理用戶輸入和與后端API的交互。以下是代碼的關鍵部分：

document.getElementById('send-button').addEventListener('click', function() {const message = document.getElementById('chat-input').value;if (message) {fetch('/api/chat', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ message: message })}).then(response => response.json()).then(data => {const chatHistory = document.getElementById('chat-history');chatHistory.innerHTML += `<p><strong>User:</strong> ${message}</p>`;chatHistory.innerHTML += `<p><strong>AI:</strong> ${data.choices[0].message.content}</p>`;document.getElementById('chat-input').value = '';});}
});

• fetch：發送POST請求到后端API。
• response.json()：解析返回的JSON數據。
• innerHTML：將聊天內容動態顯示到頁面上。

自定義項目

你可以通過修改以下文件來自定義聊天助手的行為：

• ChatService.java：修改系統提示信息和聊天邏輯。
• index.html：自定義Web界面。
• application.yml：調整模型參數和API設置。

項目截圖

以下是項目運行的截圖：

總結

通過騰訊云CodeBuddy，我們快速搭建了一個基于Spring Boot和OpenAI API的AI聊天助手項目。這個項目不僅具備強大的功能，還提供了靈活的自定義選項。希望這篇文章能幫助你更好地理解和使用騰訊云CodeBuddy進行項目開發。

如果你有任何問題或建議，歡迎在評論區留言。讓我們一起探索更多有趣的技術項目！