昨天我們成功在背景準備好了 Gemini API，並寫好了呼叫 AI 的 aiService.js。今天，我們要把這位「幕後英雄」請到舞台上，在畫面中加入一個「AI 洞察面板」，讓使用者能實際看到 AI 產生的溫暖建議。此外，為了讓 Vercel 線上版也能順利運作，我們還需要補上雲端的環境變數設定。

Step 1：建立 AI 洞察面板 (AIPanel.jsx)
在 src/components 資料夾中，新增一個名為 AIPanel.jsx 的檔案。
這個元件會透過 useContext 取得全域的用藥清單，並提供一個按鈕。當使用者點擊按鈕時，便會呼叫 aiService 將清單傳送給 Gemini，然後顯示分析結果。

在 AIPanel.jsx 寫出以下程式碼：

Step 2：將 AIPanel 放入 App.jsx
打開 src/App.jsx，將剛剛做好的面板引入，並放置在進度條的下方。

Step 3：在 Vercel 設定環境變數

Vercel 雲端主機目前並沒有 API Key，所以線上版按下按鈕會發生錯誤。我們必須手動將它加進去：

1. 登入Vercel，點擊你的專案。
2. 進入專案後，點選上方的「Settings」標籤。
3. 在左側選單找到「Environment Variables」。
   4.【重要步驟】在設定變數前，請注意畫面最上方的選項，將類型從預設的 Secret 切換成Config。
   (💡 小知識：因為我們的 Key 開頭是 VITE_，代表要讓前端瀏覽器讀取。Vercel 為了安全，會阻擋你把這種變數存成機密的 Secret，所以我們必須選擇 Config，告訴 Vercel 我們知道這會公開給前端。)*
4. 在 Key欄位輸入：VITE_GEMINI_API_KEY
5. 在 Value欄位貼上：你的 API Key 字串（就是昨天申請的那把鑰匙）。
6. 點擊右下角的「Save」儲存。

重新部署讓設定生效
環境變數設定好後，必須重新部署一次才會生效：

1. 點選畫面上方的「Deployments」標籤。
2. 找到最上面的那一次紀錄，點擊右側的 ... 選單。
3. 選擇「Redeploy」，等待約 1 分鐘跑完。

啟動後，網頁就會多一個AI用藥分析