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、按下搜尋，再確認畫面出現 一場活動。 第一輪很順，四行程式碼就完成了。接著…
- 05 Day 05｜只改按鈕四個字，Playwright 為什麼停在 click 以前？ 2026 iThome 鐵人賽 WebMCP Day 5：安安～我是ChiYu～ 昨天我在搜尋按鈕外面多包一層元素，getByRole() 仍然順利找到它。這讓我留下另一個問題： 外層結構改了沒事，那按鈕名稱改了呢？ 今天我真的只改四個字，把「搜尋活動」換成「探索場次」。活動資料沒變，submit hand…
- 06 Day 06｜Playwright、REST API、MCP 與 WebMCP，各自負責哪一段？ 2026 iThome 鐵人賽 WebMCP Day 6：安安～我是ChiYu～ 昨天 Playwright 因為按鈕改名而停在 click 以前。看到這個結果，很容易順手得出一個省事的 結論：「Browser Automation 太脆弱，換 WebMCP 就好了。」 有一說一，這個結論下得太快。Play…
- 07 Day 07｜Agent 偶爾答對還不夠，我先出二十道測試題 2026 iThome 鐵人賽 WebMCP Day 7：安安～我是ChiYu～ 昨天把 E0～E5 的證據等級排好後，我正準備動手寫第一支 WebMCP Tool，卻發現順序好像反了。 如果連「怎樣才算做對」都還沒說清楚，Tool 寫完之後，我很可能只挑一個最聽話的 Prompt， 看到 Agent 成功…
- 08 Day 08｜WebMCP Tool 該怎麼設計？把「點按鈕」改成「搜尋活動」 2026 iThome 鐵人賽 WebMCP Day 8：安安～我是ChiYu～ 昨天才把二十道測試題出好，今天輪到我寫第一份答案。我從最單純的搜尋活動開始，打開 頁面，看著那顆藍色的「搜尋活動」按鈕，很順手地寫下： 有一說一，這個名字很好懂，懂到連自動化測試都知道下一步要按哪裡。問題是，我現在設計 的是給…
- 09 Day 09｜網站該公開哪些 WebMCP Tool？從操作盤點到五支正式能力 2026 iThome 鐵人賽 WebMCP Day 9：安安～我是ChiYu～ 昨天才把 click_blue_search_button 請出 catalog，我差點又用同一套方法，把剩下的按鈕 全部包成 Tool。 我先把網站上看得到的操作列出來：展開篩選器、切換頁籤、查看詳情、收藏、關閉 dialo…
- 10 Day 10｜什麼是 WebMCP Inspector？從安裝、設定到看見網站 Tool 2026 iThome 鐵人賽 WebMCP Day 10：安安～我是ChiYu～ 昨天才把五支 Tool 的名單定下來，今天要把紙上的 catalog 搬進真實 Chrome。不過在打開 面板以前，得先回答一個最基本的問題：WebMCP Inspector 到底是什麼？ WebMCP Inspector …
- 11 Day 11｜什麼是 Declarative API？讓 HTML 表單成為 WebMCP Tool 2026 iThome 鐵人賽 WebMCP Day 11：安安～我是ChiYu～ 昨天打開 Inspector 後，Chrome 終於把目前頁面的 Tool 列了出來。面板裡有名稱、 description，還有一大段 input schema。 看到 catalog 當然很開心，但我很快又卡在下一個問題…
- 12 Day 12｜什麼是 Imperative API？用 JavaScript 控制 Tool 的註冊與解除 2026 iThome 鐵人賽 WebMCP Day 12：安安～我是ChiYu～ 昨天介紹的 Declarative API 很適合表單：只要替既有 HTML 補上標註，瀏覽器就能整理出 Tool 契約。表單待在頁面上，Tool 也跟著待在頁面上，兩邊的生命週期幾乎黏在一起。 但活動詳情不是一張等著送出的…
- 13 Day 13｜第一次用 Inspector 測 Agent，先遇到 Gemini API 額度不足 2026 iThome 鐵人賽 WebMCP Day 13：安安～我是ChiYu～ 前天讓 HTML 表單透過 Declarative API 描述自己，昨天再用 Imperative API 管理動態 Tool 的註冊與解除。Chrome 已經看得到 Tool，網站端的生命週期也補好了。準備這麼久，今天總…
- 14 Day 14｜先凍結開發範圍：五支 WebMCP Tool 串起三條活動流程 2026 iThome 鐵人賽 WebMCP Day 14：安安～我是ChiYu～ 昨天終於讓 Inspector 自己選中 search_events，完成了第一筆自然語言搜尋。看到完整 trace 跑出來的那一刻，很容易冒出下一個念頭：既然搜尋都成功了，要不要順便加登入、 付款、後台，再補一支推薦活動的…
- 15 Day 15｜讓人類與 Agent 共用同一套活動搜尋規則 2026 iThome 鐵人賽 WebMCP Day 15：安安～我是ChiYu～ 昨天先把網站範圍鎖定在五支 Tool 與三條活動流程，也留下可以重播的正式搜尋基線。今天 不再增加功能，而是正式驗收第一段能力：搜尋活動。 這裡最重要的不是讓 Agent 多一條專用捷徑，而是讓人類表單與 search_ev…
- 16 Day 16｜Agent 怎麼知道「我現在看的活動」是哪一場？ 2026 iThome 鐵人賽 WebMCP Day 16：安安～我是ChiYu～ 昨天的 search_events 已經找到「WebMCP 入門工作坊」，還順便帶回一個不透明的活動 ID： evt-webmcp-intro。今天我沿著搜尋結果進入詳情頁，準備問下一個很自然的問題： 請整理我現在看的活動名…