用 ChatGPT 打造自訂網站 annotations ☕ Buy me a coffee

🧑‍🏫 這支影片在講網站開發者能怎麼設計網頁，讓你在 ChatGPT 裡用網站時更順手：你指著網頁上的東西，ChatGPT 就知道你要改哪裡，網站也會主動提示你能做哪些事。如果你常用 AI 幫忙操作網站，這支能讓你了解這類功能背後怎麼運作，也知道未來可以期待什麼。

• 00:00 ChatGPT app 新增支援 WebMSP tools。它是網站開放給 agents 使用的 actions，例如搜尋型錄、更新頁面上的內容
  ↳ WebMSP tools 是網站主動開放給 agent（替你上網辦事的 AI 助理）使用的操作，例如搜尋商品型錄、修改頁面內容。現在 ChatGPT app 可以直接呼叫這些操作。
• 00:00 annotations 的用法：指著頁面上某個特定東西，請 ChatGPT 修改它
  ↳ annotations（標註）就是你在網頁上指出某個東西，跟 ChatGPT 說「改這個」。你不用費力描述是哪一塊，直接指給它看就好。
• 00:00 annotations 現已擴充：開發者可以為 annotations 建立 custom controls，也能用 suggested prompts 以程式方式觸發
  ↳ 開發者現在能替標註加上自己設計的 custom controls（客製控制項，像專屬按鈕），也能寫程式讓網站在適當時機跳出 suggested prompts（建議提示語）。
• 00:00 suggested prompts 的用途是幫助使用者發現自己能在這個頁面上做哪些事
  ↳ 很多人打開一個頁面，不知道能叫 AI 做什麼。建議提示語像一份菜單，先列出幾個可行的選項，讓你知道可以從哪裡開始。
• 00:31 custom annotations 搭配 WebMSP tools，能讓 app 更 agent-friendly
  ↳ agent-friendly 指網站讓 AI 助理容易使用。網站提供能執行的操作，再用標註讓 AI 知道使用者指的是什麼，AI 就比較不會猜錯或做錯。
• 00:31 使用者可以在 ChatGPT app 的 in-app browser 裡直接執行這些 actions
  ↳ in-app browser 是 ChatGPT app 裡內建的瀏覽器。你在裡面開網站，就能直接讓 ChatGPT 執行網站提供的操作，不用在不同 app 之間切換。
• 00:31 例一（編輯場景）：不必自己翻型錄、找物品、拖曳物件。只用 WebMSP 就已經能請 ChatGPT 幫忙編輯場景，annotations 則讓人更清楚有哪些可能做法
  ↳ 以布置場景為例：原本要自己翻型錄、找物品、拖曳擺放。網站有 WebMSP 之後，你已經能請 ChatGPT 代勞；加上標註，你更容易看出有哪些改法可以選。
• 01:03 在 annotation mode 下點選物件，custom controls 會提供「換成相似物品」的簡便方式；點另一處則會出現顏色 picker
  ↳ 在 annotation mode（標註模式）下點某個物件，會跳出「換成類似款」的按鈕；點另一個地方，則會出現 picker（挑選器），在這個例子裡是挑顏色用的。
• 01:03 這些 controls 都在網站程式碼裡定義，形式是 HTML attributes 或 JavaScript
  ↳ 這些按鈕是網站開發者寫在網頁程式碼裡的，不是 ChatGPT 臨時產生的。寫法有兩種：HTML attributes（加在網頁元素上的設定），或 JavaScript（網頁常用的程式語言）。
• 01:03 annotations 和 WebMSP tools 很搭，因為它讓 ChatGPT 多知道「使用者點了什麼、想做什麼」的脈絡
  ↳ 只有操作工具時，AI 不知道你在意的是哪一塊。標註補上「你點了什麼、想做什麼」的線索，AI 就更有機會挑對操作、做對事。
• 01:03 WebMSP 真正的威力在於：使用者的 agent 了解使用者本身的特定脈絡，能運用這些脈絡、透過 tools 和網站互動
  ↳ WebMSP 真正厲害的地方是：你的 AI 助理本來就了解你的習慣和狀況。它帶著這些了解，用網站的工具幫你操作，結果會比網站自己猜更貼近你要的。
• 01:33 annotation extensibility 也能建議 prompts，讓使用者拿去讓自己的 agent 試試
  ↳ annotation extensibility 指開發者可以擴充標註的功能。其中一種做法是丟出建議提示語，讓你一鍵交給自己的 AI 助理試試看。
• 01:33 例二（費用清單 app）：點擊某筆費用會出現 suggested prompt，請 ChatGPT 在使用者的 app 中搜尋，找出網站本身沒有的這筆費用相關脈絡
  ↳ 以記帳 app 為例：你點某筆費用，畫面會跳出建議提示語，請 ChatGPT 到你連結的其他 app 裡搜尋，找出這筆錢背後的來龍去脈。這些資訊是記帳網站本身沒有的。
• 01:33 接著 ChatGPT 可以透過網站提供的 WebMSP tool，為該筆費用加上正確的 metadata
  ↳ 找到線索後，ChatGPT 再用網站提供的 WebMSP 工具，替這筆費用補上正確的 metadata（附加資訊，像分類或說明），整筆紀錄就整理好了。
• 01:33 使用者的 agent 掌握使用者的偏好，也能透過 plugins 存取使用者的資料
  ↳ 你的 AI 助理記得你的偏好，也能透過 plugins（外掛，讓 AI 連到其他服務的連接工具）讀取你的資料，所以它手上的資訊比單一網站多。
• 02:04 整體來說，使用者的 agent 永遠比你的網站更了解使用者
  ↳ 一個網站只看得到你在它那裡做過的事，你的 AI 助理看到的你比較完整。所以由助理來操作網站，結果往往更合你的意。
• 02:04 越來越多人在網路上使用 agents，所以開發者應該讓自己的 app 能和 agents 順利配合
  ↳ 越來越多人用 AI 助理上網辦事。網站如果 AI 看不懂、操作不了，用起來就會卡卡的，所以開發者需要讓網站能跟 AI 順利配合。
• 02:04 透過 annotation extensibility，開發者能用 custom controls 或 suggested prompts 引導使用者和他們的 agent，展示網站上能做的事
  ↳ 開發者可以把客製按鈕和建議提示語當成導覽，同時告訴你和你的 AI 助理這個網站能做哪些事，你就不用自己慢慢摸索。
• 02:04 這項功能開啟了人們搭配 agent 使用網路的新方式，幫助使用者從「想在 web app 上做什麼」走到「把事情完成」
  ↳ 以前你得自己學會網站怎麼操作。現在你只要說出想做什麼，AI 助理搭配網站提供的工具，就能一路幫你把事情做完。

根據影片，annotations 的 custom controls 是如何定義的？