WebMCP AI教學課程

上門AI教學課程內容

WebMCP AI教學課程大綱（兩小時精華班）

課程簡介
本精華班濃縮WebMCP核心精髓，適合具JavaScript基礎的AI教育者與開發者快速上手。透過講解與實作，學員將理解WebMCP協議原理，並親手建置AI代理工具。總時長2小時（線上直播），聚焦宣告式/命令式API應用於教育與電商場景。預期成果：掌握Chrome 146環境部署，製作AI互動網頁原型，提升線上程式課程實戰能力。

上半小時：基礎與環境搭建（0-30分鐘）

• WebMCP起源：從螢幕抓取痛點到瀏覽器原生API轉變。

• 核心概念：navigator.modelContext介面、工具註冊格式。

• 快速安裝：Chrome預覽版、TypeScript與PNPM環境。

• 示範：第一個工具註冊（登入表單轉換）。

下半小時：宣告式API實作（30-60分鐘）

• HTML表單機制：參數描述、JSON回傳與狀態同步。

• 安全原則：使用者授權與沙盒限制。

• 實作演練：轉換簡單查詢表單為AI工具。

• 互動Q&A：常見錯誤排除。

第三半小時：命令式API與AI整合（60-90分鐘）

• JS函式暴露：searchProducts範例與多步聚合。

• 與LLM串接：Python腳本調用WebMCP。

• 效能技巧：錯誤處理與Cookie驗證。

• 實作：建置電商AI助手原型。

第四半小時：應用、案例與總結（90-120分鐘）

• 教育應用：作業自動化與跨頁協作。

• 商業案例：內容發布工具示範。

• 未來展望：W3C標準與香港社群動態。