AI 客服系統的 4 大功能
AI 自動回覆
串接 Gemini / ChatGPT API，根據知識庫自動回答客戶問題。24 小時不間斷服務。
真人客服轉接
AI 無法回答時，自動轉接真人客服。確保客戶問題一定能被解決。
管理後台
網頁管理介面，可以設定 AI 行為、查看對話紀錄、管理知識庫內容。
知識庫上傳
上傳 FAQ、產品資訊等文件，AI 會根據這些資料來回答客戶問題。
AI 客服系統管理後台介面預覽
系統資料流向：一則訊息的旅程
客戶傳送一則 LINE 訊息後，會經過以下流程：
LINE 用戶 → LINE 平台 → Webhook → Netlify Functions → AI API → 回覆
LINE 用戶 → LINE 平台
客人走進餐廳，跟服務生說「我要點餐」
Webhook → Netlify Functions
服務生把點餐單送進廚房，廚師開始準備
AI API → 回覆
廚師做好菜，由服務生送到客人桌上
系統資料流向示意圖
GitHub Pages vs Netlify 比較
| 比較項目 | GitHub Pages | Netlify |
|---|---|---|
| 費用 | 免費 | 免費方案可用（有額度限制） |
| 後端功能 | 不支援 | 支援 Serverless Functions |
| 資料庫 | 不支援 | 可搭配 Supabase 等服務 |
| 環境變數 | 不支援 | 支援（可安全存放 API Key） |
| 自訂網址 | username.github.io | 自訂名稱.netlify.app |
| 適用場景 | 靜態網頁、簡報、作品集 | 需要後端的應用程式 |
兩個平台的功能比較一覽
1 步驟 1：Fork AI 客服專案
- 打開專案網址：
github.com/ChatGPT3a01/ai_customer_service - 點擊右上角的 Fork 按鈕
- Owner 選擇你的 GitHub 帳號
- Repository name 保持預設：
ai_customer_service - 點擊 Create fork
什麼是 Fork？就像影印一份別人的食譜到你的筆記本，你可以自由修改，不影響原作者的版本。
在 GitHub 上 Fork AI 客服專案到你的帳號
2 步驟 2：Supabase 建立資料庫
- 前往
supabase.com，點擊 Start your project - 使用 GitHub 帳號登入（最方便）
- 點擊 New Project
- 填寫專案資訊：
- Name：
ai-customer-service - Database Password：設定一組密碼（請記住！）
- Region：Southeast Asia (Singapore)
- Name：
- 點擊 Create new project，等待建立完成
為什麼選新加坡？離台灣最近的伺服器位置，存取速度最快。
在 Supabase 建立新專案，Region 選擇 Singapore
3 步驟 3：執行 SQL 建立資料表
- 在 Supabase 左側選單點擊 SQL Editor
- 從 Fork 的專案中找到 SQL 檔案
- 將 SQL 內容全選複製，貼到 SQL Editor
- 點擊 Run 執行
會建立的資料表
| 資料表名稱 | 用途說明 |
|---|---|
settings |
系統設定（AI API Key、LINE 資訊等） |
processed_events |
已處理的事件紀錄（防止重複處理） |
user_states |
使用者狀態（追蹤對話進度） |
在 SQL Editor 中貼上 SQL 並執行
4 步驟 4：取得 Supabase 連接資訊
- 在 Supabase 左側選單 → Project Settings
- 點擊 API 頁面
- 記下以下 3 個資訊：
| 資訊名稱 | 位置 | 用途 |
|---|---|---|
| Project URL | API Settings 上方 | 資料庫的網址 |
| anon key | Project API keys | 前端使用的公開金鑰 |
| service_role key | Project API keys | 後端使用的管理金鑰 |
重要警告：
service_role key 擁有資料庫的最高權限，絕對不能外洩！不要貼在公開的地方，只能放在環境變數中。
在 Project Settings > API 頁面取得連接資訊
5 步驟 5：Netlify 部署
- 前往
netlify.com，使用 GitHub 帳號登入 - 點擊 Add new site → Import an existing project
- 選擇 GitHub，找到剛剛 Fork 的
ai_customer_service - 設定建構指令：
- Build command：
npm run build - Publish directory：
dist
- Build command：
- 先不要按 Deploy，還需要設定環境變數！
Netlify 的特色：每次你在 GitHub 更新程式碼，Netlify 會自動重新部署，不需要手動操作。
在 Netlify 匯入 GitHub 專案並設定建構指令
設定環境變數（關鍵步驟！）
在 Netlify 部署前，需要設定 4 個環境變數：
| 變數名稱 | 值（來源） | 說明 |
|---|---|---|
VITE_SUPABASE_URL |
Supabase Project URL | 前端使用的資料庫網址 |
VITE_SUPABASE_ANON_KEY |
Supabase anon key | 前端使用的公開金鑰 |
SUPABASE_URL |
Supabase Project URL（同上） | 後端 Functions 使用 |
SUPABASE_SERVICE_ROLE_KEY |
Supabase service_role key | 後端管理用金鑰 |
為什麼有兩個 URL？
VITE_ 開頭的變數會被打包到前端程式碼中，沒有 VITE_ 開頭的只在後端 Functions 中使用。前後端需要各自的設定。
設定完環境變數後，再點擊 Deploy site！
在 Netlify 的 Environment variables 頁面新增環境變數
6 步驟 6：登入管理後台
6-1. 建立管理員帳號
- 回到 Supabase，左側選單 → Authentication
- 點擊 Add user → Create new user
- 輸入你的 Email 和密碼
- 勾選 Auto Confirm User
6-2. 登入管理後台
- 打開你的 Netlify 網站：
你的名稱.netlify.app - 用剛建立的帳號密碼登入
- 進入管理後台後，可以設定：
- AI API Key（Gemini 或 ChatGPT）
- LINE Channel Access Token
- LINE Channel Secret
沒有 API Key 也沒關係！目前先完成部署，確認管理後台能正常登入即可。API Key 和 LINE 設定可以之後再補。
部署成功！你的 AI 客服系統已經上線了