課程 B · ai-chatbot-build

動手做自己的 AI 聊天機械人

用真正的 LLM API,做出可下載的聊天網頁

每課從一個壞掉的現象出發(金魚記憶、亂編校曆),先搞懂原理再填空。每格填對會解釋自己;全部對了進入編輯器自由改。課室金鑰會過期,教材會說明為何不能把真金鑰寫進網頁。

教法為什麼這樣設計

  • 概念先於程式:不要一開始就丟十個空格讓人猜 fetch。
  • 填對就教學:回饋是解釋,而不只是打勾。
  • 先感受失敗,再修:記憶、幻覺、不會查天氣,都讓學生先碰到。
  • 創意放在自由改造:人格、資料、介面沒有單一標準答案。

每課實際流程

  1. 1看投影片,理解「為什麼現在這台機械人做不到 X」。
  2. 2在真實可運行的 HTML 裡填空,伺服器逐格批改並解釋。
  3. 3全部填對後進入編輯器,改人格、改資料、改介面,即時預覽。
  4. 4下載成品帶走。

七課

01

AI 是怎樣「接電話」的 — 第一次 API 呼叫

親手寫出一個真正會回話的對話框。重點是看懂「請求 → 回應」。

  • API 像快餐櫃檯:按格式落單,不必知道廚房怎麼運作。
  • 請求四件事:網址、方法、身分(Authorization)、內容(body)。
  • JSON 來回;async/await 在等網路。
  • 金鑰不能寫死在前端。本課用課室專用、會過期的鎖匙。

02

打破金魚記憶 — 讓 AI 記得你說過什麼

模型每次都是全新失憶的。ChatGPT 記得住,是因為記憶在你的程式裡。

  • Stateless:每次 API 呼叫獨立,AI 不記得上一句。
  • 所謂記憶 = 每次把整段 chatHistory 再送出去。
  • 三種 role:system、user、assistant。
  • 對話越長越慢越貴;可用檔案把記憶存走、讀回來。

03

給 AI 一個靈魂 — System Prompt 與知識注入

同一模型,換一段 system prompt 就換性格。再把學校資料放進去,並禁止亂編。

  • 好人格四要素:身分、語氣、輸出格式、禁止事項。
  • Temperature:查資料要低、創作要高。
  • 簡易 RAG:把相關資料放進 prompt。
  • 最有效的一句:「資料中沒有就說不知道」。
  • Prompt injection:規則放在 system 是第一道防線。

04

分工與眼睛 — 指令路由和讓 AI 看圖

先看使用者想做什麼再處理;再給它一雙眼睛。

  • 意圖判斷是 Agent 的第一步;startsWith 與 includes 不一樣。
  • 翻譯用低溫、想點子用高溫。
  • 多模態:content 變成文字 + 圖片的零件清單。
  • 圖片要變 base64;縮圖 = 更快、更省錢。

05

讓 AI 動手做事 — 呼叫真實世界的 API

問今日香港幾度一定是假的。由你的程式先取真實數據,再交給 AI。

  • 知識截止:模型不知道今日天氣、股價、新聞。
  • 工具三步曲:判斷 → 打真實 API → 把資料夾進 prompt。
  • 公開 API(如天文台)不必鎖匙。
  • 先印出陌生 JSON,再逐層取值;小心空陣列陷阱。

06

真正的 AI Agent — 讓 AI 自己決定用什麼工具

關鍵字會誤判。把判斷也交給模型:先問該用哪件工具,再執行。

  • 兩段式呼叫:先 JSON 選工具,再作答。
  • 判斷用溫度 0、作答用 0.7。
  • 工具登記表;永遠驗證 AI 的輸出(它會發明不存在的工具)。
  • Chatbot 只會說話;Agent 會決定並執行行動。

07

畢業作品 — 組裝出屬於你的 AI 助手

用途先想清楚,再組裝記憶、人格、工具、介面。測正常、刁難、網路失敗三種情況。

  • 總複習前六課,把人格設定搬到畫面上。
  • 至少一件工具;專屬知識用 RAG 並要求「沒有就說不知道」。
  • 改配色與標題,讓它一看就是你的作品。
  • 下載 .html 交給老師,或用瀏覽器打開給家人看。

這條課的好處

  • 黑盒打開:ChatGPT「記得你、會查、會看圖」其實都是你的程式在做。
  • 可帶走的作品:比測驗卷更能證明「我會做」。
  • 工程直覺:請求/回應、狀態、成本、驗證、失敗處理。
  • 與提示語課閉環:人格、RAG、溫度,這次寫進程式。
  • 安全習慣一開始就對:過期 token、不信任模型 JSON、不公開真金鑰。