Day 16：【Gemini API】前端正式串接 Google Gen AI SDK：告別假資料，賦予貓咪對話靈魂！

2026 iThome 鐵人賽

DAY 16

Build on Google AI

《30天打造喵語日誌：Gemini API × Vibe Coding 實戰》系列第 16 篇

Day 16：【Gemini API】前端正式串接 Google Gen AI SDK：告別假資料，賦予貓咪對話靈魂！

18th鐵人賽

alice__

團隊五人成行，Bug 不行

2026-08-17 21:20:06

43 瀏覽

分享至

從靜態 Mock 到智慧對話的關鍵跨越

在昨天的半程小結中，我們完整檢視了《喵語日誌》的前端畫面與互動元件。雖然聊天室能收發文字與圖片，但先前為了驗證介面流程，送出訊息後都是透過定時器吐出寫死的罐頭字串，貓咪並無法真正理解使用者的喜怒哀樂。

在第 6 天時，我們曾在初版專案中成功驗證了 Gemini API 的結構化輸出概念。而今天我們的核心任務，就是將這顆強大的 AI 核心正式移植並整合進全新的聊天室模組中。我們將透過 Google 官方最新的 @google/genai SDK 與 gemini-3-flash-preview 模型，讓貓咪根據使用者的即時心情與文字，給予專屬、溫暖且充滿靈性的動態回覆。

核心重構：升級 API 服務與動態 Prompt 組裝

要讓 AI 能針對當下的聊天情境做出共鳴，我們需要將使用者點選的 5 種心情標籤（Rough、Low、Okay、Good、Great）化為 Prompt 的一部分。

我們在 src/services/geminiService.ts 中封裝了 analyzeDiary 函式。除了設定溫柔貼心的貓咪陪伴者 System Instruction 之外，更要求模型必須嚴格遵循 responseSchema 規範，輸出包含心情指數（mood_score）、生活場景標籤（lifestyle_label）以及陪伴文字（cat_response）的結構化 JSON。

// src/services/geminiService.ts
import { GoogleGenAI, Type } from '@google/genai';
import type { CatDiaryResponse } from '../types/diary';

const apiKey = import.meta.env.VITE_GEMINI_API_KEY;
const ai = new GoogleGenAI({ apiKey: apiKey || '' });

export async function analyzeDiary(
  userText: string,
  moodKey?: string | null
): Promise<CatDiaryResponse> {
  const systemInstruction = `你是一隻名為「喵喵」的貼心寵物貓兼生活陪伴者。
- 說話口氣可愛、傲嬌又溫暖，每句話結尾請自然帶上「喵～」、「🐾」等貓咪口吻。
- 必須仔細體察使用者的文字與當前心情標籤，給予專屬的共鳴與鼓勵（50~80字以內）。
- 嚴格以 JSON 格式回傳分析結果。`;

  const moodContext = moodKey ? `【使用者選擇的心情標籤：${moodKey}】\n` : '';
  const prompt = `${moodContext}使用者說：「${userText}」`;

  try {
    const response = await ai.models.generateContent({
      model: 'gemini-3-flash-preview',
      contents: prompt,
      config: {
        systemInstruction,
        responseMimeType: 'application/json',
        responseSchema: {
          type: Type.OBJECT,
          properties: {
            mood_score: {
              type: Type.INTEGER,
              description: '1 到 10 的情緒指數',
            },
            lifestyle_label: {
              type: Type.STRING,
              description: '生活場景標籤，例如：美食日常、深夜加班、悠閒午後',
            },
            cat_response: {
              type: Type.STRING,
              description: '帶有貓咪動作描述與溫暖語氣的回應',
            },
          },
          required: ['mood_score', 'lifestyle_label', 'cat_response'],
        },
      },
    });

    const jsonText = response.text;
    if (!jsonText) throw new Error('未取得 Gemini 回應');

    return JSON.parse(jsonText) as CatDiaryResponse;
  } catch (error) {
    console.error('Gemini API 呼叫失敗:', error);
    return {
      mood_score: 5,
      lifestyle_label: '日常陪伴',
      cat_response: '喵嗚…連線好像有點不穩，本喵先去抓個沙發，等一下再跟我說一次好嗎？🐾',
    };
  }
}

透過這種設計，前端既能取得貓咪的口語化回覆，同時還能獲取標準化的生活標籤與情緒分數，為後續寫入雲端資料庫做好最完美的準備。

聊天室串接：非同步 Request 與 Typing Indicator 連動

在完成服務端封裝後，我們回到 ChatContainer.tsx 改造送出事件。

當使用者按下發送或 Enter 鍵時，前端會先將文字氣泡推入對話串，並將 isLoading 設為 true 啟動跳動的打字動畫（Typing Indicator）。接著透過非同步 await analyzeDiary() 發送請求，在收到回傳的 JSON 後，精準提取 result.cat_response 並渲染為貓咪回覆氣泡。

// src/components/ChatContainer.tsx 發送邏輯重構
const handleSend = async () => {
  const trimmed = input.trim();
  if ((!trimmed && !selectedImage) || isLoading) return;

  const currentMood = mood;
  const userMessage: Message = {
    id: Date.now(),
    role: "user",
    text: trimmed,
    image: selectedImage || undefined,
  };

  // 1. 立即將使用者訊息推入畫面
  setMessages((prev) => [...prev, userMessage]);
  setInput("");
  setSelectedImage(null);
  setIsLoading(true);

  try {
    // 2. 向 Gemini 請求真實即時回覆
    const result = await analyzeDiary(trimmed || "（分享了一張照片）", currentMood);
    
    // 3. 渲染貓咪回覆氣泡
    const catReply: Message = {
      id: Date.now() + 1,
      role: "cat",
      text: result.cat_response,
    };
    setMessages((prev) => [...prev, catReply]);
  } catch (error) {
    console.error(error);
  } finally {
    setIsLoading(false);
  }
};