AI Agent 已從實驗走向產品，但前端工程師普遍缺乏一套系統性的方法來設計「AI 工作中」的介面。市面上的教學幾乎都停在「串 API 拿回文字」，當 Agent 開始會思考、呼叫工具、失敗、重試，前端的狀態複雜度就完全不同了。

這場 Workshop 填補從 demo 到產品之間的工程缺口，涵蓋四個核心技術模組：

1. Agent 執行狀態建模：用 TypeScript discriminated union 設計 AgentStep 型別系統，讓編譯器在 switch 裡自動窄化型別，徹底消除 runtime 的 undefined 錯誤。

2. 混合型別 SSE Stream 解析：用 fetch + ReadableStream 取代傳統 EventSource，實作能同時處理 thinking / tool_call / tool_result / text / error 多種事件型別的 parser；text token 以 16ms throttle 合批更新，把 re-render 次數從每 token 一次降至最多 60fps。

3. 即時回饋 UI 元件：實作 AgentTimeline Vue 元件，每種 step type 對應獨立 template 分支；閃爍游標、工具呼叫展示、錯誤狀態視覺化一次到位。

4. Abort + Retry 機制：整合 AbortController 讓使用者能中途取消；根據後端回傳的 retryable flag 判斷是否可重試，並從指定 step 恢復執行，而非重頭來過。

後端以 Go 實作 SSE emitter 與 mock LLM（三種 scenario：search_and_calc、multi_tool、error_retry），不需要任何 API Key，確保 Workshop 現場不受網路費用或 rate limit 影響。學員 git clone 後即可立刻開始，每個 checkpoint 有骨架（TODO 標記）和對應解答資料夾。所有程式碼於 Workshop 結束後公開於 GitHub。

帶走一套可直接使用的 TypeScript 狀態機設計、Vue 3 Composable 架構，以及能處理真實 Agent event stream 的 parser。所有程式碼在 Workshop 結束後公開於 GitHub，學員回去可以直接套用在自己的專案上。

• 筆電

• 具備 JavaScript/TypeScript 基礎。
• 具備基礎程式開發能力，並對終端機（Terminal）操作有基本熟悉度。
• 具備 Go 語言基礎者更佳。

Node.js (下載連結)

Go 環境 (下載連結)

推薦安裝 Bun (下載連結)（講師將使用此環境進行演示）

請確保已安裝您熟悉的 IDE（如：VS Code, Zed, Cursor, Neovim 等），以便於現場進行實作練習。