第一部分：專案說明
這是什麼
這是專為康和證券開發的 AI 語音客服系統，提供文字與語音雙模式的自動化客戶服務。系統使用 Anthropic Claude API 來理解和回答客戶問題，前端用 Vue 3 開發互動介面，後端用 Node.js + Express 處理 API 請求。
開發策略：
- 第一階段（進行中）：完成文字聊天功能，確保基礎服務穩定運作
- 第二階段（規劃中）：整合語音功能，讓客戶可以用說話的方式詢問，系統也能用自然語音回應
康和只需要在網站加入一行 JavaScript 程式碼：
<script src="https://your-domain.com/widget.js?key=YOUR_API_KEY"></script>客服小工具就會出現在網站右下角，客戶可以選擇用打字或語音的方式詢問問題。
解決什麼問題
這個系統主要解決以下問題：
- 減少人工客服工作量：自動回答常見問題，如營業時間、手續費、開戶流程等
- 提供 24/7 服務：不受上下班時間限制，隨時可以回答客戶問題
- 統一回答標準：基於康和提供的文件資料，確保回答內容一致且正確
- 提升服務便利性：語音互動讓客戶在開車、做家事等不方便打字的情況下也能獲得服務
- 無障礙服務：照顧視力不便或不熟悉打字的客戶群體
系統會記錄所有對話（文字與語音），方便後續分析客戶常問的問題類型。
如何整合
整合過程分為三個步驟：
- 系統部署：將系統部署到康和指定的伺服器環境（自有伺服器或雲端服務）
- 資料準備：協助康和整理並上傳相關文件，如FAQ、產品說明、服務條款等（支援 PDF、TXT、DOCX）
- 網站整合：在康和網站中加入客服小工具程式碼
整個部署與整合過程預計需要 1-2 個工作天。系統會自動處理上傳的文件，建立專屬康和的知識庫供 AI 查詢使用。
第二部分：核心功能
AI 聊天小工具（Chat Widget）
聊天小工具是客戶看到並使用的介面，具有以下功能：
基本功能
- 浮動按鈕固定在網頁右下角，點擊展開聊天視窗
- 支援文字輸入和發送訊息
- 顯示 AI 回覆，包含打字動畫效果
- 保存對話歷史（使用瀏覽器 localStorage）
- 自動適應手機、平板、桌面螢幕尺寸
AI 對話能力
- 理解自然語言提問，不需要特定格式
- 記住對話上下文，可以進行多輪對話（目前上限 10 輪）
- 透過 MCP (Model Context Protocol) 查詢公司文件
- 根據文件摘要判斷相關性，找出正確答案
- 無法回答時會建議聯繫人工客服
技術實現
- 使用 Vue 3 開發，編譯成單一 JavaScript 檔案（約 200KB）
- 透過 WebSocket 或 HTTP 與後端 API 通訊
- 支援 CORS，可嵌入任何網域的網站
- 介面樣式隔離，不會影響原網站的 CSS
截圖待補充：需要聊天介面的截圖，展示實際的對話畫面
AI 語音客服功能（第二階段）
語音客服功能讓客戶可以用更自然的方式與系統互動：
語音互動功能
- 語音輸入：點擊麥克風按鈕即可開始說話
- 自然語音回應：AI 用流暢的語音回答客戶問題
- 文字/語音模式切換：客戶可隨時切換偏好的互動方式
- 語音中斷處理：支援客戶隨時打斷並提出新問題
技術方案（評估中）
目前正在評估以下技術方案，將根據技術發展選擇最適合的：
- 方案一：OpenAI Real-time API（等待暑期新模型發布）
- 方案二：Eleven Labs 語音合成技術
- 方案三：傳統架構 STT + LLM + TTS 組合
- 最終方案將考慮：回應速度、語音自然度、成本效益、整合複雜度
預期效果
- 降低客戶使用門檻，特別是年長客戶
- 提高互動效率，語音溝通比打字快 3-5 倍
- 創造更人性化的服務體驗
截圖待補充：需要語音介面的概念圖或流程圖
管理後台功能
管理後台讓康和可以設定和管理 AI 客服系統：
文件管理
- 上傳康和的相關文件（支援 PDF、TXT、DOCX 格式）
- 檢視已上傳的文件列表
- 為每個文件設定摘要（summary）
- 刪除或更新文件內容
- 系統自動產生文件索引供 AI 使用
AI 測試功能
- 在後台直接測試 AI 的回答效果
- 調整 AI 的回答風格（正式/親切）
- 設定無法回答時的預設回覆
- 查看 AI 使用了哪些文件來生成答案
對話記錄
- 查看所有客戶對話歷史
- 搜尋特定關鍵字的對話
- 匯出對話記錄（CSV 格式）
- 分析常見問題統計
系統設定
- 自訂聊天視窗的顏色和標題
- 設定營業時間提示
- 管理 API Key
- 設定允許使用的網域（安全白名單）
截圖待補充：需要管理後台的介面截圖，展示主要功能頁面
第三部分：技術實現
使用的技術棧
前端技術
- 聊天小工具：Vue 3 + TypeScript，使用 Vite 打包成單一 JS 檔案
- 管理後台：Vue 3 + Element Plus UI 框架，Vue Router 處理頁面路由
- 狀態管理：Pinia（Vue 官方推薦的狀態管理工具）
- HTTP 請求：Axios 處理 API 通訊
後端技術
- 伺服器框架：Node.js + Express.js
- 程式語言：TypeScript（提供型別檢查，減少錯誤）
- 資料庫：PostgreSQL（儲存對話記錄、用戶資料、文件內容）
- 認證機制：JWT（JSON Web Token）處理用戶登入狀態
- 檔案處理：Multer 處理檔案上傳，pdf-parse 解析 PDF 文件
AI 整合
- 文字對話：Anthropic Claude 3.5 Sonnet API
- 實作方式：使用官方 SDK (@anthropic-ai/sdk)
- 回應模式：支援一般回應和串流回應（Server-Sent Events）
語音技術（第二階段）
- 語音識別：評估中（Web Speech API / 第三方服務）
- 語音合成：評估中（Eleven Labs / OpenAI TTS / Edge TTS）
- 即時對話：研究 OpenAI Real-time API 與工具整合方案
- 備選方案：傳統 STT → LLM → TTS 管線架構
系統架構圖
┌─────────────────────────────────────┐
│ 客戶網站 │
│ ┌─────────────────────┐ │
│ │ Chat Widget (Vue3) │ │
│ └──────────┬──────────┘ │
└──────────────┼─────────────────────┘
│ HTTPS API
▼
┌─────────────────────────────────────┐
│ 後端 API 服務器 │
│ ┌─────────────────────┐ │
│ │ Express.js API │ │
│ │ - /api/chat │ │
│ │ - /api/documents │ │
│ │ - /api/admin │ │
│ └──────────┬──────────┘ │
└──────────────┼─────────────────────┘
│
┌──────────┴──────────┐
▼ ▼
┌─────────┐ ┌──────────────┐
│PostgreSQL│ │Anthropic API │
│ Database │ │ (Claude) │
└─────────┘ └──────────────┘
技術細節說明
對話處理流程
- 用戶在聊天視窗輸入問題
- 前端將問題發送到後端 API（
POST /api/chat/message） - 後端從記憶體載入對話歷史（最多 10 輪）
- 組合 system instruction：包含文件索引（所有文件名稱和摘要）
- AI 根據問題和文件摘要，使用 MCP 工具查詢相關文件
- 基於查詢結果生成回答
- 儲存對話到資料庫
- 回傳答案給前端顯示
MCP (Model Context Protocol) 說明
- AI 可以主動使用 MCP 工具與資料庫互動
- MCP 工具提供的功能：
- 列出所有可用文件
- 讀取特定文件內容
- 搜尋文件中的關鍵資訊
- AI 透過文件摘要判斷哪些文件可能包含答案
安全性設計
- API Key 認證：所有請求需要有效的 API Key
- CORS 設定：只允許白名單內的網域存取
- 輸入驗證：使用 express-validator 檢查所有輸入
- SQL 注入防護：使用參數化查詢
- XSS 防護：前端自動轉義所有用戶輸入
效能優化
- 對話記憶體快取：使用 Map 結構暫存最近對話
- 文件索引快取：AI system instruction 包含所有文件摘要，減少查詢次數
- 前端資源壓縮：Widget 檔案使用 gzip 壓縮
- API 回應快取：相同問題 5 分鐘內不重複呼叫 AI
部署架構
- 單一 VPS 伺服器（2-4 核心 CPU，4-8GB RAM）
- 使用 PM2 管理 Node.js 程序
- Nginx 反向代理處理 HTTPS
- Let's Encrypt 免費 SSL 憑證
- 每日自動備份資料庫
截圖待補充：需要更詳細的技術架構圖，顯示資料流向和各組件之間的關係