Learning path
別再讓 Agent 猜按鈕：30 天打造並實測 Agent-ready 的 WebMCP 活動網站
2026 iThome 鐵人賽 Modern Web 系列：用 30 天打造 Agent-ready 的 WebMCP 活動網站，逐步實作 Tool contract、安全邊界與真實 Agent 驗證。
這是我參加 2026 iThome 鐵人賽 Modern Web 組的系列文章。
系列會用一個活動網站回答一個核心問題：網站已經有按鈕、表單與 API，還要補上哪些能力，才值得交給 AI Agent 操作？
30 天實作路線
- Day 1–10：先看完成畫面，再建立可重現的人類網站與測試基線。
- Day 11–22：實作搜尋、讀取詳情、收藏、準備報名與準備取消等網站 Tool。
- Day 23–28：補上安全測試、部署座標與真實 Agent trace。
- Day 29–30：整理可帶回其他網站的 Agent-ready 交付方法。
適合想理解 WebMCP、網站 Tool contract、Browser Agent 與人類確認邊界的前端、後端與 AI Agent 開發者。
Start here
從這篇開始
先讀這篇建立共同語言，再往下看完整閱讀順序。
Full archive
完整閱讀順序
- 01 Day 01｜網站真的會被 Agent 使用嗎？我先丟了一句自然語言 2026 iThome 鐵人賽 WebMCP Day 1：安安～我是ChiYu～ 今年我想拿一個很新的 Web API，做一件很老派的事：實際把它做完，再看看它到底有沒有 簡報上那麼神。 我先對 WebMCP Inspector 丟了一句很普通的需求： 幫我找台北、免費，而且適合入門者的活動。 沒有 Too…
- 02 Day 02｜換到全新資料夾後，網站還能不能跑？ 2026 iThome 鐵人賽 WebMCP Day 2：安安～我是ChiYu～ 昨天才把完成版的 Agent trace 端上桌，今天我做的第一件事，卻是把它收起來。 我另外開了一個空資料夾，重新 git clone，沒有沿用原本的 node_modules，也沒有順手把 環境裡那些「反正我的電腦已經有」…
- 03 Day 03｜先別急著做 Tool，我把活動網站自己走了一遍 2026 iThome 鐵人賽 WebMCP Day 3：安安～我是ChiYu～ 昨天把專案切到固定 tag，Web、API、測試和 build 也都跑起來了。照這個進度，今天最容易 做的事情，就是立刻替網站加上第一支 WebMCP Tool。 但我先把 Inspector 關掉。 不是它做錯了什麼，只是今…
- 04 Day 04｜按鈕只多包一層，哪種 Playwright Locator 撐得住？ 2026 iThome 鐵人賽 WebMCP Day 4：安安～我是ChiYu～ 昨天我把活動網站從搜尋一路走到取消報名，最後挑了風險最低的搜尋流程，準備交給 Playwright 重播。今天它正式接班：開啟頁面、填入 WebMCP、按下搜尋，再確認畫面出現 一場活動。 第一輪很順，四行程式碼就完成了。接著…