今天我們要把前幾天的成果整合，讓前端畫面可以呼叫後端 API，實際拿到 Gemini 回覆，完成真正的智慧聊天功能。

1️⃣ 前端呼叫後端 API

• 我們在 Day 1、Day 2 已經建立了前端畫面與互動功能。
• 這一天我們只需要修改「發送訊息的功能」，把使用者輸入傳給後端。

流程說明：

1. 使用者輸入訊息，按下「發送」或 Enter。
2. 前端組成訊息陣列（messages）。
3. 透過 fetch 或 axios 發送 POST 請求到 /api。
4. 後端取得 Gemini 回覆後返回 JSON。
5. 前端接收到回覆後，更新畫面訊息列表。

2️⃣ API 呼叫邏輯

• POST 請求的 Body 包含 messages，這是前端累積的聊天紀錄。
• 後端只取最後一則訊息發給 Gemini。
• 回覆接回來後，前端加入訊息列表顯示。

3️⃣ 安全性注意事項

• API Key 只在後端使用。
• 這樣前端看不到金鑰，也避免 Key 外洩。

4️⃣ 前端整合效果

整合後，使用者在前端輸入訊息：

1. 按下「發送」或 Enter。
2. 訊息會出現在聊天區。
3. 等待後端回覆。
4. Gemini 回覆出現在畫面上。

5️⃣ 測試方法

• 啟動專案：npm run dev。
• 在前端輸入訊息，例如「你好」，按發送。
• 應該會看到聊天機器人回覆。
• 確認 console 沒有錯誤，訊息列表正常更新。

到這裡，我們就把前端跟後端串起來，完成一個能回話的智慧聊天機器人啦！🎉