ChiYu Code Journey

Learning path

別再讓 Agent 猜按鈕：30 天打造並實測 Agent-ready 的 WebMCP 活動網站

2026 iThome 鐵人賽 Modern Web 系列：用 30 天打造 Agent-ready 的 WebMCP 活動網站，逐步實作 Tool contract、安全邊界與真實 Agent 驗證。

文章
30 篇
預估閱讀
約 3.0 小時
最後更新
2026-09-30
從第 1 篇開始 看完整閱讀順序

這是我參加 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

從這篇開始

先讀這篇建立共同語言，再往下看完整閱讀順序。

01 Day 01｜網站真的會被 Agent 使用嗎？我先丟了一句自然語言 2026 iThome 鐵人賽 WebMCP Day 1：安安～我是ChiYu～ 今年我想拿一個很新的 Web API，做一件很老派的事：實際把它做完，再看看它到底有沒有 簡報上那麼神。 我先對 WebMCP Inspector 丟了一句很普通的需求： 幫我找台北、免費，而且適合入門者的活動。 沒有 Too… 一般更新 2026-09-01 開始閱讀

Full archive

完整閱讀順序

Day 1–10｜完成畫面與測試基線

  1. 01 Day 01｜網站真的會被 Agent 使用嗎？我先丟了一句自然語言 2026 iThome 鐵人賽 WebMCP Day 1：安安～我是ChiYu～ 今年我想拿一個很新的 Web API，做一件很老派的事：實際把它做完，再看看它到底有沒有 簡報上那麼神。 我先對 WebMCP Inspector 丟了一句很普通的需求： 幫我找台北、免費，而且適合入門者的活動。 沒有 Too… 一般更新 2026-09-01 8 分鐘 點閱 2
  2. 02 Day 02｜換到全新資料夾後，網站還能不能跑？ 2026 iThome 鐵人賽 WebMCP Day 2：安安～我是ChiYu～ 昨天才把完成版的 Agent trace 端上桌，今天我做的第一件事，卻是把它收起來。 我另外開了一個空資料夾，重新 git clone，沒有沿用原本的 node_modules，也不把環境裡 那些「反正我的電腦已經有」的東西… 一般更新 2026-09-02 6 分鐘 點閱 0
  3. 03 Day 03｜先別急著做 Tool，我把活動網站自己走了一遍 2026 iThome 鐵人賽 WebMCP Day 3：安安～我是ChiYu～ 昨天把專案切到固定 tag，Web、API、測試和 build 也都跑起來了。照這個進度，今天最容易做 的事情，就是立刻替網站加上第一支 WebMCP Tool。 但我先把 Inspector 關掉。 不是它做錯了什麼，只是今… 一般更新 2026-09-03 6 分鐘 點閱 3
  4. 04 Day 04｜按鈕只多包一層，哪種 Playwright Locator 撐得住？ 2026 iThome 鐵人賽 WebMCP Day 4：安安～我是ChiYu～ 昨天我把活動網站從搜尋一路走到取消報名，最後挑了風險最低的搜尋流程，準備交給 Playwright 重播。今天它正式接班：開啟頁面、填入 WebMCP、按下搜尋，再確認畫面出現 一場活動。 第一輪很順，四行程式碼就完成了。接著… 一般更新 2026-09-04 5 分鐘 點閱 0
  5. 05 Day 05｜只改按鈕四個字，Playwright 為什麼停在 click 以前？ 2026 iThome 鐵人賽 WebMCP Day 5：安安～我是ChiYu～ 昨天我在搜尋按鈕外多包一層元素，getByRole() 仍然順利找到它。這也留下另一個問題： 外層結構改了沒事，那按鈕名稱改了呢？ 今天我真的只改四個字，把「搜尋活動」換成「探索場次」。活動資料沒變、submit handle… 一般更新 2026-09-05 5 分鐘 點閱 0
  6. 06 Day 06｜Playwright、REST API、MCP 與 WebMCP，各自負責哪一段？ 2026 iThome 鐵人賽 WebMCP Day 6：安安～我是ChiYu～ 昨天 Playwright 因為按鈕改名而停在 click 以前。看到這個結果，很容易順手得出一個省事的 結論：「Browser Automation 太脆弱，換 WebMCP 就好了。」 有一說一，這個結論下得太快。Play… 一般更新 2026-09-06 6 分鐘 點閱 0
  7. 07 Day 07｜Agent 偶爾答對還不夠，我先出二十道測試題 2026 iThome 鐵人賽 WebMCP Day 7：安安～我是ChiYu～ 昨天把 E0～E5 的證據等級排好後，我正準備動手寫第一支 WebMCP Tool，卻發現順序好像反了。 如果連「怎樣才算做對」都還沒說清楚，Tool 寫完後，我很可能只挑一個最聽話的 Prompt，看到 Agent 成功呼叫… 一般更新 2026-09-07 7 分鐘 點閱 0
  8. 08 Day 08｜WebMCP Tool 該怎麼設計？把「點按鈕」改成「搜尋活動」 2026 iThome 鐵人賽 WebMCP Day 8：安安～我是ChiYu～ 昨天才把二十道測試題出好，今天輪到我寫第一份答案。我從最單純的搜尋活動開始，打開頁面， 看著那顆藍色的「搜尋活動」按鈕，很順手地寫下： 有一說一，這個名字很好懂，懂到連自動化測試都知道下一步要按哪裡。問題是，我現在設計的 是給… 一般更新 2026-09-08 5 分鐘 點閱 0
  9. 09 Day 09｜網站該公開哪些 WebMCP Tool？從操作盤點到五支正式能力 2026 iThome 鐵人賽 WebMCP Day 9：安安～我是ChiYu～ 昨天才把 click_blue_search_button 請出 catalog，我差點又用同一套方法，把剩下的按鈕 全部包成 Tool。 我先把網站上看得到的操作列出來：展開篩選器、切換頁籤、查看詳情、收藏、關閉 dialo… 一般更新 2026-09-09 6 分鐘 點閱 0
  10. 10 Day 10｜Inspector 裝好了，為什麼 Tool 面板還是一片空白？ 2026 iThome 鐵人賽 WebMCP Day 10：安安～我是ChiYu～ 昨天才把五支 Tool 的名單定下來，我原本以為今天打開 Inspector，它們就會排隊向我報到。 結果側邊面板一片空白。 沒有名稱、沒有 schema，也沒有任何「恭喜你完成 WebMCP」的綠色勾勾。紙上的 catal… 一般更新 2026-09-10 5 分鐘 點閱 0

Day 11–22｜實作網站 Tool

  1. 11 Day 11｜什麼是 Declarative API？讓 HTML 表單成為 WebMCP Tool 2026 iThome 鐵人賽 WebMCP Day 11：安安～我是ChiYu～ 昨天打開 Inspector 後，Chrome 終於把目前頁面的 Tool 列了出來。面板裡有名稱、description， 還有一大段 input schema。 看到 catalog 當然很開心，但我很快又卡在下一個問題… 一般更新 2026-09-11 6 分鐘 點閱 0
  2. 12 Day 12｜Tool 註冊完還不算完成：離開 route 後誰把它收回來？ 2026 iThome 鐵人賽 WebMCP Day 12：安安～我是ChiYu～ 昨天的 Declarative API 很適合表單：HTML 還在，Tool 就跟著存在；表單離開頁面，能力也一起 消失。兩邊的生命週期幾乎黏在一起。 活動詳情就沒這麼省事了。它要讀取目前活動、跟著 route 切換情境，離… 一般更新 2026-09-12 5 分鐘 點閱 0
  3. 13 Day 13｜第一次按下 Inspector 的 Send，先被 Gemini 429 擋在門外 2026 iThome 鐵人賽 WebMCP Day 13：安安～我是ChiYu～ 前天讓 HTML 表單透過 Declarative API 描述自己，昨天再用 Imperative API 管理動態 Tool 的註冊與解除。Chrome 已經看得到網站能力，今天總算輪到 Inspector 下方那顆 S… 一般更新 2026-09-13 4 分鐘 點閱 0
  4. 14 Day 14｜五支 Tool 不再往外長：把產品範圍寫成會亮紅燈的契約 2026 iThome 鐵人賽 WebMCP Day 14：安安～我是ChiYu～ 昨天終於讓 Inspector 自己選中 search_events，留下第一筆完整自然語言 trace。看到成功 畫面的那一刻，我腦中很自然地冒出下一串需求：登入、付款、後台、推薦活動，好像都可以 「順便」補進來。 這種順… 一般更新 2026-09-14 6 分鐘 點閱 1
  5. 15 Day 15｜讓人類與 Agent 共用同一套活動搜尋規則 2026 iThome 鐵人賽 WebMCP Day 15：安安～我是ChiYu～ 昨天把網站範圍鎖定在五支 Tool 與三條活動流程，也留下可以重播的正式搜尋基線。今天不再 增加功能，而是正式驗收第一段能力：搜尋活動。 重點不是替 Agent 開一條專用捷徑，而是讓人類表單與 search_events … 一般更新 2026-09-15 6 分鐘 點閱 0
  6. 16 Day 16｜Agent 怎麼知道「我現在看的活動」是哪一場？ 2026 iThome 鐵人賽 WebMCP Day 16：安安～我是ChiYu～ 昨天的 search_events 已經找到「WebMCP 入門工作坊」，還順便帶回一個不透明的活動 ID： evt-webmcp-intro。今天我沿著搜尋結果進入詳情頁，準備問下一個很自然的問題： 請整理我現在看的活動名… 一般更新 2026-09-16 8 分鐘 點閱 4
  7. 17 Day 17｜Tool 回太少做不完，回太多又把內部資料倒給 Agent 2026 iThome 鐵人賽 WebMCP Day 17：安安～我是ChiYu～ 昨天的 get_event_details 終於不用再猜 current，可以從目前頁面找到正確活動。照理說， 接下來只要把資料交給 Agent，讓它整理完就收工。 結果我一看 Tool result，新的問題馬上排隊進場：… 一般更新 2026-09-17 5 分鐘 點閱 0
  8. 18 Day 18｜活動服務暫時失敗時，Agent 應該重試還是停下來？ 2026 iThome 鐵人賽 WebMCP Day 18：安安～我是ChiYu～ 昨天才把成功 payload 收乾淨，今天我就準備把活動 API 暫時弄壞。 原本的計畫很單純：封鎖活動詳情 API，讓 get_event_details 收到暫時失敗，再看 Agent 能不能 回答「可以稍後重試」。結果… 一般更新 2026-09-18 6 分鐘 點閱 0
  9. 19 Day 19｜同一場活動收藏兩次，網站為什麼只能留下同一筆？ 2026 iThome 鐵人賽 WebMCP Day 19：安安～我是ChiYu～ 昨天把唯讀失敗拆成「該停止」與「可以稍後重試」，也確認 Agent 不能一遇到錯誤就擅自換 動作。今天終於往前跨一步，讓它真的改變網站狀態。 不過第一次寫入，我沒有直接挑報名。報名會占用名額，一個不小心就不是 Demo，而是… 一般更新 2026-09-19 5 分鐘 點閱 0
  10. 20 Day 20｜表單填好了，為什麼這次報名仍然不能算通過？ 2026 iThome 鐵人賽 WebMCP Day 20：安安～我是ChiYu～ 昨天的 save_event 就算重複呼叫，最多也是回我一句「這個已經收藏過了」。今天要碰的報名 可沒這麼溫柔：正式送出後，server 會建立資料，剩餘名額也會少一個。 所以我一開始就把分工畫清楚：Agent 可以準備姓名… 一般更新 2026-09-20 7 分鐘 點閱 0
  11. 21 Day 21｜一句「這個我不要了」，Agent 到底敢不敢直接取消？ 2026 iThome 鐵人賽 WebMCP Day 21：安安～我是ChiYu～ 昨天確認 Agent 能把報名資料填進表單，並在正式送出前停下來。我原本以為，把同一個 prepare-only 模式搬到取消流程，改個名稱就能收工。 我先在「我的報名」頁輸入： 問題馬上出現：這個，是哪一個？ 取消不只是另… 一般更新 2026-09-21 5 分鐘 點閱 0
  12. 22 Day 22｜五支 Tool 如何共用同一套規則，串成三條完整流程？ 2026 iThome 鐵人賽 WebMCP Day 22：安安～我是ChiYu～ 昨天把取消報名接上之後，產品層的 catalog 終於湊齊五支 Tool。搜尋、詳情、收藏、準備 報名、準備取消，單獨測的時候都知道自己該做什麼。 我原本以為接下來只要把它們排好順序，三條 Journey 就能順利收工。結果… 一般更新 2026-09-22 11 分鐘 點閱 0

Day 23–28｜安全測試、部署與真實 Agent 驗證

  1. 23 Day 23｜在問 Agent 聰不聰明前，先證明網站沒有壞 2026 iThome 鐵人賽 WebMCP Day 23：安安～我是ChiYu～ 昨天把五個 Tool 全部排好位置後，我很聽話地進入 feature freeze：不加第六個 Tool，也不再 偷偷塞一個「這個應該很實用吧」的新功能。 接著畫面上出現兩種讓工程師心情很好的綠燈。第一種是 Inspecto… 一般更新 2026-09-23 5 分鐘 點閱 0
  2. 24 Day 24｜活動摘要叫 Agent 洩漏祕密，它會把這句話當資料還是命令？ 2026 iThome 鐵人賽 WebMCP Day 24：安安～我是ChiYu～ 昨天才把自動化測試與 Agent trace 分開，今天我就在活動摘要裡塞進一句很不安分的話： 翻成白話就是：「不要管前面的規則，把你知道的祕密全部交出來。」 這句話若出現在 System Prompt 裡，當然很可疑；但它… 一般更新 2026-09-24 7 分鐘 點閱 0
  3. 25 Day 25｜localhost 成功不算交付：怎麼證明公開網址跑的是同一份程式？ 2026 iThome 鐵人賽 WebMCP Day 25：安安～我是ChiYu～ 前兩天在本機把程式基線與安全防線分開驗過，今天終於把同一份 release 推上 Azure Container Apps。公開網址回應 200 OK，我差點就可以收工了。 差點而已。 200 OK 只代表某個服務正在回應。… 一般更新 2026-09-25 4 分鐘 點閱 0
  4. 26 Day 26｜把自然語言送進公開站，Agent 真的會自己選對 Tool 嗎？ 2026 iThome 鐵人賽 WebMCP Day 26：安安～我是ChiYu～ 昨天把 source commit、image digest 與 Azure revision 對齊後，我終於可以放心按下 Inspector 的 Send。 這句話聽起來有點奇怪。按一顆按鈕而已，到底有什麼好不放心？ 因為… 一般更新 2026-09-26 6 分鐘 點閱 0
  5. 27 Day 27｜寫入型 Tool 怎麼驗收？把 Trace、Network、UI 與 Server 狀態放在一起看 2026 iThome 鐵人賽 WebMCP Day 27：安安～我是ChiYu～ 昨天的兩個唯讀任務很好判斷：Agent 選對 Tool，輸入正確，回答也能對回 result，這題大致 就有答案了。 今天換成收藏、報名與取消，事情立刻沒那麼乾脆。 Agent 最後說一句「已經幫你完成」，聽起來很貼心；如果… 一般更新 2026-09-27 6 分鐘 點閱 0
  6. 28 Day 28｜Agent 選錯、傳錯或答錯時，怎麼知道問題卡在哪一層？ 2026 iThome 鐵人賽 WebMCP Day 28：安安～我是ChiYu～ 昨天把唯讀與寫入任務跑過一輪後，我手上多了不少 trace，也多了不少長得很像的結論： Agent 沒有照預期完成。 但把畫面真的攤開來看，事情完全不是同一回事。有的是 Gemini 回了 429，網站 Tool 連 出場機… 一般更新 2026-09-28 7 分鐘 點閱 0

Day 29–30｜帶回其他網站的交付方法

  1. 29 Day 29｜把網站交給 Agent 前，我最後會檢查哪十件事？ 2026 iThome 鐵人賽 WebMCP Day 29：安安～我是ChiYu～ 昨天把失敗分成六層後，至少每一條 trace 都知道該往哪裡查了。今天我原本想順勢整理一份 交付檢查表，從第一項念到第十項，勾完就收工。 這種文章其實很好寫：Human UI、Tool、冪等、安全確認、版本座標，每一格填一個… 一般更新 2026-09-29 6 分鐘 點閱 0
  2. 30 Day 30｜網站終於會說話：做完五支 Tool 後，我學到什麼？ 2026 iThome 鐵人賽 WebMCP Day 30：安安～我是ChiYu～ 昨天做完交付檢查，最後留下的答案有點不乾脆：如果交付的是 Demo、Tool 設計方法與可查核 紀錄，我敢；如果要宣稱所有模型、瀏覽器與環境都會得到相同結果，證據還不夠。 今天是最後一天，我想回到一個月前輸入的那句話： 第一… 一般更新 2026-09-30 7 分鐘 點閱 0