用 WebMCP 打造 agent-ready 的網站
🏦 台灣Pay 銀行轉帳 💙 PayPal
Codex 支援 WebMCP，網站可內建 tools 給 Codex 使用，並分享設計 tools 的建議
- 00:01 Codex 已能使用網頁一段時間，但缺點是速度相當慢。
- 01:03 替網站加上 WebMCP 很簡單，請 Codex 做就行。它會自己弄懂 spec，並幫你寫好 tools。
- 02:03 agent 現在能獨立於使用者和網站互動，講者認為這些可能性才剛開始被探索。
💡 你可以怎麼用：如果妳有自己的網站，或正在請 Codex 幫忙做網站，可以直接跟它說「幫我的網站加上 WebMCP tools」。做好後讓它實際用一輪，再問它「哪些 tools 不好用、說明哪裡不清楚」，照它的回饋刪掉多餘功能、把說明改清楚。
看全部 15 條重點
🧑🏫 這支影片是 OpenAI 介紹 Codex 新支援的 WebMCP。Codex 是 OpenAI 的 AI 助手，能幫你寫程式、動手完成任務。重點是網站可以主動把功能交給 AI 用，AI 就不必再像人一樣慢慢點畫面。影片用一個 3D 建模網站示範，最後也分享怎麼把這些功能設計得讓 AI 好用。
- 00:01 Codex 已能使用網頁一段時間，但缺點是速度相當慢。↳ Codex 其實早就能上網操作網站，但它通常得像人一樣看畫面、找按鈕、一步步試，所以做起來很慢。
- 00:01 Codex 推出 WebMCP 支援：可以把 tools 直接加進網站，Codex 會抓取並找出它需要知道的功能，在網站上做出很好的結果。↳ WebMCP 是讓網站直接附上一組 tools 的機制。tools 就是網站寫好、專門給 AI 呼叫的功能，例如「新增形狀」。Codex 一讀就知道這個網站能做什麼，不用自己摸索。
- 00:01 示範 Codex Modeling Studio：Codex 開啟網站，以視覺方式反覆修改 3D 模型，完成後還能拿去 3D 列印。↳ 示範網站叫 Codex Modeling Studio。Codex 打開網站後，一邊看成品一邊修改 3D 模型，改到滿意為止。完成的模型還能拿去 3D 列印（3D print），把電腦裡的模型印成實體物件。
- 00:32 Codex 能建立形狀，並從不同角度截圖，而且不會打斷使用者自己的畫面。↳ Codex 能自己加形狀，也能從不同角度截圖檢查成果。這些動作都在背後進行，你正在看的畫面不會被它轉來轉去。
- 00:32 使用者和 Codex 可以一起協作，Codex 工作時還能隨時給它筆記。↳ 你不是把任務丟給它就只能乾等。它做的同時，你可以隨時留筆記，例如「底座加厚一點」，它會照你的意見繼續改。
- 00:32 網站不只能做簡單的 eShop 頁面，也能做完整的 3D 渲染等進階內容。WebMCP 大幅拓展了能展示、發布給人的可能性。↳ 講到讓 AI 用網站，很多人只會想到購物頁那種簡單操作。這裡示範連即時顯示 3D 畫面的網站都行，代表能做給別人用的網站類型多了很多。
- 01:03 替網站加上 WebMCP 很簡單，請 Codex 做就行。它會自己弄懂 spec，並幫你寫好 tools。↳ 替網站加 WebMCP 不用自己懂細節，直接請 Codex 做就好。它會自己讀懂 spec，也就是規定 tools 該怎麼寫的規格，然後幫你把 tools 寫好。
- 01:03 建議花時間 dogfooding，和 Codex 反覆迭代。Codex 才是你的顧客，使用 tools 的是 Codex 而不是使用者。↳ dogfooding 原意是自己先用自己做的產品。這裡是指花時間讓 Codex 實際用你的 tools，再一起反覆修改。因為真正使用這些功能的是 Codex，它才是你要照顧的顧客。
- 01:03 要確保 tools 能被 Codex 找到，並讓它清楚知道要做什麼。↳ tools 做好了，Codex 卻找不到或看不懂，就等於白做。名稱和說明要讓它一看就知道：這個功能在哪裡、拿來做什麼。
- 01:03 可以精簡 tool set，確保描述清楚，讓 Codex 盡可能有效率地到達目標。↳ tool set 是網站提供給 Codex 的整組 tools。功能不是越多越好。把重複和用不到的拿掉，每個說明寫清楚，Codex 就少走冤枉路，更快完成任務。
- 01:03 只要向 Codex 要求回饋，它就會告訴你。↳ 想知道 tools 好不好用，直接問 Codex 就行。它會告訴你哪裡卡住、哪裡看不懂，等於有一個使用者當場給你意見。
- 01:33 示範中加了一個 feedback tool，Codex 工作時能標出錯誤，並在有東西需要修正時通知開發者。↳ feedback tool 是示範裡特別加的一個功能。Codex 工作時碰到錯誤，可以用它標出問題並通知開發者哪裡要修，不用你自己一個個找。
- 01:33 替模型打造 tools 和替人打造非常不同。現在模型和人能在同一個介面上，透過不同管道協作。↳ 給人用的介面要看得懂、點得順；給模型用的 tools 要說明清楚、好呼叫。現在兩邊能在同一個網站上合作，你用畫面操作，Codex 走 tools。
- 01:33 Codex 能替自己打造 tools。你們看到的東西不同，它能和你一起在視覺上迭代。↳ Codex 還能替自己寫它需要的 tools。你看的是畫面，它透過 tools 取得資訊，兩邊看到的東西不一樣，但可以一起邊看成果邊修改。
- 02:03 agent 現在能獨立於使用者和網站互動，講者認為這些可能性才剛開始被探索。↳ agent 是指能自己判斷、自己動手完成任務的 AI，Codex 就是其中一種。它現在不用靠你操作，就能自己和網站互動。講者認為這類用法才剛開始被探索。
📘 術語
WebMCP（WebMCP）：把 tools 直接加進網站，讓 Codex 抓取並了解網站功能的支援機制
tools（工具）：加在網站裡、供 Codex 使用的功能。Codex 會據此找出該網站的能力
tool set（工具組）：網站提供給 Codex 的整組 tools，建議精簡並把描述寫清楚
spec（規格）：字幕只說 Codex 會自行弄懂 spec，再幫你寫 tools
dogfooding（自己試用自家產品）：字幕指花時間和 Codex 反覆迭代，因為 Codex 才是 tools 的使用者
feedback tool（回饋工具）：示範中加入的 tool，讓 Codex 工作時能標出錯誤、提醒需要修正的地方
3D print（3D 列印）：示範中 Codex 迭代完成的 3D 模型，之後可以拿去 3D 列印
tools（工具）：加在網站裡、供 Codex 使用的功能。Codex 會據此找出該網站的能力
tool set（工具組）：網站提供給 Codex 的整組 tools，建議精簡並把描述寫清楚
spec（規格）：字幕只說 Codex 會自行弄懂 spec，再幫你寫 tools
dogfooding（自己試用自家產品）：字幕指花時間和 Codex 反覆迭代，因為 Codex 才是 tools 的使用者
feedback tool（回饋工具）：示範中加入的 tool，讓 Codex 工作時能標出錯誤、提醒需要修正的地方
3D print（3D 列印）：示範中 Codex 迭代完成的 3D 模型，之後可以拿去 3D 列印
✏️ 小考一題
根據影片，為網站設計 WebMCP tools 時，誰才是「你的顧客」？
A. eShop 頁面的購物者B. CodexC. 網站開發者自己D. 瀏覽網站的一般使用者看答案
答案：B。[01:03] 講者說：Codex is your customer. It's the one using the tools, not the user.
💛 覺得有幫助？支持一下
課本免費、沒有廣告，支持與否都能照常讀 🐰