所有節目›AI Engineer Europe 2026| World's Fair 2026完整場次線上軌AI in HealthcareSoftware Factories
The agent-ready web: Simplify user actions with WebMCP在 YouTube 看這一場

AI Engineer Europe 2026 · 演講 · 2026-06-11 · 22 分

讓網站成為 agent 的工具箱

The agent-ready web: Simplify user actions with WebMCP · Tara Agyemang,Google DeepMind

Tara Agyemang 介紹提議中的 WebMCP 標準:網站把功能宣告成結構化工具,agent 不必再靠 DOM 與截圖猜按鈕。現場用迷宮與售票網站示範,並說明兩種 API 與上手方式。

agent 當使用者看原片 ↗

概要

  • agent 操作網頁很費工Tara 以自己做的售票網站為例,agent 要讀整份 DOM、看 accessibility tree、截圖,再算出要點的位置,流程冗長又脆弱,廣告載入把內容推下去還可能點錯。
  • 先把基礎打好Tara 認為讓網站對所有人可用,對 AI agent 也預設可用;語意化 HTML、無障礙標準、頁面效能都做好之後,才輪到 WebMCP。
  • WebMCP 是一份工具選單它是提議中的網頁標準,讓網站把功能定義成結構化工具,Tara 說外界稱它是 AI agent 互動的 USB-C。
  • 兩種實作方式標準表單用宣告式 API,加幾個屬性、瀏覽器自動產生 JSON schema;較複雜的多步驟流程用命令式 API,自己註冊工具並寫 execute。
  • 使用者與 agent 可以交接使用者先自己逛,再把控制權交給 agent,隨時能收回;Tara 也提醒 UI 要和工具呼叫同步,付款這類步驟最好留給使用者。
  • 仍是早期實驗Tara 說 API 還在改,可能下週就不同;目前需要 Chrome 146 以上並開啟測試旗標。

原話

  • “that you can do so much by improving web foundations first.”

    先把網頁的基礎做好,就能做到很多事

    ▶ 03:04
  • “instead of any agent guessing what your website does, you're kind of giving the AI agent a menu of tools that it can use and actions that it can take.”

    不再讓 agent 猜網站能做什麼,而是給它一份可用工具與動作的選單

    ▶ 04:16
  • “in short webmcp is the implementation of the tools part of the mcp”

    簡單說,WebMCP 就是 MCP 裡工具那一塊的實作

    ▶ 10:42
  • “So you always want to make sure that your UI is in sync with the tool calls that are happening.”

    要確保 UI 跟正在進行的工具呼叫保持同步

    ▶ 17:18
  • “This API is very experimental. It will change.”

    這個 API 非常實驗性,之後會改

    ▶ 17:49

延伸

  • Tara 說迷宮示範的提示詞太籠統時,agent 會繞回起點再走一遍;補一句「出口在右下角」,它就走得有效率得多。
  • Tara 認為命令式 API 可能是最常用的一種,因為多數網站想讓 agent 完成的 UI 流程比單一表單複雜。

章節

點時碼直接跳到原片的那一段。

  1. 開場與自我介紹Tara 是 Google Chrome 團隊的 developer relations engineer,今天主題是 WebMCP,現場只有少數人玩過。
  2. 為人設計的網頁過去幾十年網頁是為人的操作與眼睛優化,現在有越來越多 agent 代替人使用網頁,卻要為簡單動作花很多功夫。
  3. 買票流程的繁瑣以 Tara 做的演唱會售票網站為例,agent 要讀 DOM、accessibility tree、截圖再點擊,耗時、脆弱、費 token。
  4. 先做好網頁基礎語意化 HTML、無障礙、效能與 core web vitals 先到位,已經走了一半,之後才談 WebMCP。
  5. WebMCP 是什麼提議中的網頁標準,讓網站把能力定義成結構化工具,給 agent 一份可用動作的選單。
  6. 迷宮遊戲示範用 Chrome 團隊做的迷宮遊戲與 Model Context Tool Inspector,看 agent 呼叫 start game 工具,並用自然語言移動、撿東西。
  7. 使用者與 agent 交接使用者可以先自己瀏覽、再交給 agent、隨時接手回來,簡化使用者旅程是大家感興趣的主因。
  8. WebMCP 與 MCP 的差別兩者互補;WebMCP 受 MCP 啟發,Tara 的比喻是像 JavaScript 受 Java 啟發,是 MCP 工具部分的實作。
  9. 適用情境只做用戶端功能、需要開著瀏覽器;適合複雜網站、商品篩選、複雜的醫療或財務表單。
  10. 宣告式 API標準 HTML 表單加上工具名稱與描述,瀏覽器自動產生 JSON schema,還有標示是否由 agent 填寫的屬性。
  11. 命令式 API較複雜的多步驟流程用 register tool 自訂工具,寫好描述與 execute,並把結果回傳給 agent。
  12. 售票網站示範agent 依序呼叫搜尋演唱會、開啟頁面、購買票券三個工具,UI 同步更新;實際結帳最好交給使用者。
  13. 目前狀態與設定仍是早期預覽、API 會變;Chrome 146 以上,建議用 Canary,開啟測試旗標並裝 inspector 擴充。
  14. 資源與回饋一篇早期預覽計畫的部落格文章,加上放 inspector、示範與 evals CLI 的 GitHub 儲存庫,歡迎回報問題。
  15. 結語用 WebMCP 取代今天的 screen scraping,把網站變成給 agent 的高效能 API,也兼顧使用者體驗。

名詞

WebMCP
Web Model Context Protocol,提議中的網頁標準,讓網站把功能定義成結構化工具給 agent 用
Model Context Tool Inspector
Chrome DevRel 團隊做的側邊欄擴充,列出頁面上的工具,可用提示詞或直接呼叫工具
宣告式 API
在 HTML 表單加工具名稱與描述,瀏覽器自動產生 JSON schema
命令式 API
用 register tool 自訂工具,適合複雜的多步驟 UI 流程
accessibility tree
agent 讀來了解頁面結構的資料之一,和 DOM、截圖並列
Chrome Canary
Tara 建議用來試 WebMCP 的 Chrome 版本,可以和日常瀏覽器分開

相關影片 同屬「agent 當使用者」