前言

隨著 AI 技術的快速發展，AI Agent（智慧代理）已經不再只是聊天機器人，它們開始具備幫我們「執行網頁任務」的能力，例如：幫忙訂機票、比價、甚至是填寫複雜的報帳系統。

不過在過去，AI Agent 若要操作網頁，通常得依靠截圖分析 (Computer Vision) 或是解析原始 DOM 結構 (Screen Scraping) 來找到頁面上的元素。這些方法不但效率低落、耗費大量計算資源，而且非常脆弱：只要網頁的 UI 稍微改版（改個 class name 或換個按鈕顏色），Agent 就可能找不到目標元素而操作失敗。

為了從根本上解決這個問題，一項全新的網頁標準 —— WebMCP (Web Model Context Protocol) 誕生了。它由 W3C Web Machine Learning Community Group 孵化，並獲得 Google 與 Microsoft 的大力推動。本篇文章將帶大家認識 WebMCP 的核心概念與運作原理，並透過兩個實際的 Demo 來體驗如何讓現有的網頁變得 Agent-ready。

💡 小提醒：WebMCP 目前（2026 年初）仍處於早期預覽階段，需要在 Chrome 146 Canary 開啟特定 Flag 才能使用原生支援，但我們可以使用 @mcp-b/global polyfill 在開發階段進行測試。

什麼是 WebMCP？

WebMCP (Web Model Context Protocol) 是一個瀏覽器原生 (Native Browser API) 的標準協議，主要是讓前端開發者可以用結構化、標準化的方式，將網頁的功能（Tools）「自我宣告」並暴露給 AI Agent。

這就像是網站 SEO 演進的下一個階段：以往我們為了做 SEO（搜尋引擎最佳化），會在網頁中埋入「結構化資料 (Structured Data)」或 JSON-LD，讓 Google 的網頁爬蟲能夠看懂頁面的資訊（例如：這個商品的價格多少、評分多少）；而現在，為了達到 AI Agent 友善 (Agent-friendly)，我們則是使用 WebMCP，讓 AI Agent 不只能「看懂」資訊，更能代替使用者「動手操作」網頁功能。

說到這裡，就不得不提一下 WebMCP 的「前輩」—— 2024 年 11 月，Anthropic 開源發布了 MCP (Model Context Protocol)，這是一個讓 AI 模型能夠標準化地連接外部工具與資料來源的開放協議。MCP 推出後迅速獲得 OpenAI、Google、AWS 等大廠的採用，被譽為「AI 界的 USB-C」，可以說是徹底改變了 AI 與外部世界溝通的方式。

不過，MCP 走的是 Backend-to-Backend 的路線 —— 開發者需要自行架設 MCP Server，將大型語言模型連接到企業資料庫或外部 API。對後端工程師來說這很合理，但對於前端開發者來說，光是「架 Server」這件事本身就有不小的門檻。

而 WebMCP 的出現正好補上了這塊拼圖。它完全是 Client-Side（前端） 的協議，直接內建於瀏覽器中，不需要開發者架設任何伺服器，直接利用現有網頁的 Session 狀態和身份驗證（Cookie/Token），Agent 的操作權限等同於使用者本人的權限。換句話說，只要會寫前端，就能讓網頁接上 AI Agent 的世界。不過開發者在實作時需特別留意，對於涉及交易或具破壞性的重要操作，務必要設計讓使用者進行最後確認（Human-in-the-loop）的機制，確保操作安全。

WebMCP 註冊方式

WebMCP 提供了兩種截然不同的 API 供開發者使用，以應對不同複雜度的場景：

  1. Declarative API (宣告式 API)：極低侵入性，不需要寫 JavaScript，透過 HTML 屬性即可完成，適合簡單的傳統表單。（註：Declarative API 目前屬於 Chrome 的實作層級功能，尚未正式納入 W3C 規格書中。）
  2. Imperative API (指令式 API)：強大且靈活，使用 JavaScript 動態註冊工具，支援複雜的 JSON Schema 與非同步操作，適合現代 SPA 架構與複雜工作流。此 API 已正式定義於 W3C WebMCP 規格書。

接下來，我們將透過兩個具體的 Demo 範例來分別說明這兩種 API 的使用方式。

1. Declarative API：企業訂便當系統

Declarative API 的精神在於「漸進式增強 (Progressive Enhancement)」。對於一個傳統的 HTML 表單，只需要加上 toolname 和 tooldescription 兩個屬性，瀏覽器就會自動將表單內的 <input>、<select> 解析並組合出一個 JSON Schema 給 Agent 辨識。

📌 程式碼範例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!-- 關鍵在於加上 toolname 和 tooldescription -->
<form id="lunchForm"
      toolname="orderLunch"
      tooldescription="Submit a lunch order for an employee. Contains information like name, department, meal type, spicy preference, and notes.">

  <div>
    <label>訂購人姓名</label>
    <input type="text" name="name" required>
  </div>

  <div>
    <label>餐點種類</label>
    <select name="meal_type" required>
      <option value="pork_ribs">排骨飯</option>
      <option value="chicken_leg">雞腿飯</option>
      <!-- ... -->
    </select>
  </div>

  <!-- Agent 讀懂表單後，在背後會直接呼叫 form.requestSubmit() -->
  <button type="submit">一般提交表單</button>
</form>

對於 Agent 來說，它讀取這個網頁時，瀏覽器會告訴它：這裡有一個叫 orderLunch 的工具，需要傳入 name 和 meal_type 兩個參數。當 Agent 決定好餐點後，直接以程式化方式觸發表單送出，完全不受限於 UI 上按鈕的樣式或位置。

👉 實作測試：我在部落格上放了一個可以直接體驗的 Demo 頁面，可以點進去試試這份表單，以及點擊「模擬 Agent 送出」來觀察整個流程。 🍱 企業訂便當系統 Demo

2. Imperative API：電影院訂票與選位系統

如果是需要複雜邏輯驗證、多步驟動態取得資料（例如必須先選電影、再選時間、最後選座位）的場景，Declarative API 的 <form> 就顯得不夠用了。這時我們就需要使用 Imperative API。

透過 JavaScript 的 navigator.modelContext.registerTool()，我們可以精確地定義輸入 Schema，並在 execute function 裡面處理各種非同步邏輯。

📌 程式碼範例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

if (window.navigator && window.navigator.modelContext) {

  // 註冊第一個工具：查詢電影列表
  navigator.modelContext.registerTool({
    name: "getMovies",
    description: "查閱正在上映的電影清單",
    inputSchema: { type: "object", properties: {} },
    execute: async () => {
       const movies = await fetchMoviesAPI();
       return { content: [{ type: "text", text: JSON.stringify(movies) }] };
    }
  });

  // 註冊第二個工具：查詢座位狀態
  navigator.modelContext.registerTool({
    name: "getAvailableSeats",
    description: "查詢特定電影與場次的剩餘空位",
    inputSchema: {
      type: "object",
      properties: {
        movieId: { type: "string" },
        showtime: { type: "string" }
      },
      required: ["movieId", "showtime"]
    },
    execute: async ({ movieId, showtime }) => {
      // 這裡可以打後端 API 取得最新的即時空位
      const result = await fetchSeats(movieId, showtime);
      return { content: [{ type: "text", text: JSON.stringify(result) }] };
    }
  });

  // 註冊第三個工具：執行訂票
  navigator.modelContext.registerTool({
    name: "bookTickets",
    description: "訂劃特定座位",
    inputSchema: { /* 定義 movieId, showtime, seats(Array) 等等 */ },
    execute: async ({ movieId, showtime, seats }) => {
      const resp = await bookSeatAPI(movieId, showtime, seats);
      if (resp.success) {
        // 更新網頁 UI，反映真實操作
        renderSeatMap();
        return { content: [{ type: "text", text: "訂票成功！座位為：" + seats.join(', ') }] };
      } else {
        return { isError: true, content: [{ type: "text", text: "座位已被訂走" }] };
      }
    }
  });
}

上面我們註冊了三個工具，各司其職。假設使用者對 Agent 說：「幫我訂兩張今天晚上的沙丘電影票」，Agent 的執行流程會是：

  1. 呼叫 getMovies() 拿到電影清單，發現《沙丘》是 m1，晚上有 19:00 的場次。
  2. 呼叫 getAvailableSeats({movieId: 'm1', showtime: '19:00'}) 取得座位圖。
  3. Agent 分析發現 E1, E2 是空位。
  4. 呼叫 bookTickets({movieId: 'm1', showtime: '19:00', seats: ['E1', 'E2']})。

整個過程不需要頁面跳轉，資料格式 100% 精準。

👉 實作測試：這部分我也做了一個完整的 Demo，包含「Tool Inspector 面板」可以動態查看這個網頁向外暴露了哪些 Tool，建議點擊「執行 Agent 訂票腳本」來觀看整個自動化流程是如何運作的。 🎟️ 電影院訂票選位 Demo

人類操作 vs. Agent 操作

導入 WebMCP 後，網站同時服務了兩種截然不同的「使用者」。以下我們來比較一下兩者在找尋與操作功能上的差異：

  1. 人類操作路徑：

    • 瀏覽器畫面載入 HTML/CSS
    • 眼睛掃描畫面，尋找符合目標的按鈕或文字
    • 用滑鼠/鍵盤點擊與輸入
    • （容易受 UI 改版、RWD、顏色對比度影響）

  2. Agent 操作路徑（透過 WebMCP）：

    • 讀取瀏覽器暴露的 navigator.modelContext 工具註冊表
    • 直接看懂每個工具的 description 與 JSON schema
    • 以程式碼方式呼叫 API（觸發 execute function）
    • 幾乎零延遲，對前端畫面的 UI 改版具有完全的免疫力

這就是 WebMCP 最迷人的地方 —— 網頁變成了一個具有「語意介面」的智慧載體，不管前端怎麼改版，Agent 都能穩定地找到它需要的功能。

啟用方式與操作展示

由於這項功能非常新，目前如果要使用 Chrome 原生支援來跑 WebMCP（而不是只用 polyfill 看效果），需要安裝 Chrome Canary 開發者預覽版：

  1. 在網址列輸入 chrome://flags
  2. 搜尋 Experimental Web Platform features (#enable-experimental-web-platform-features)
  3. 將其設定為 Enabled 並重啟瀏覽器。

AI Agent 透過 WebMCP 操作範例的電影訂票網站

開啟之後，使用者只要透過 Google AI 助理詢問網頁內容或指派任務，Chrome 就會自動比對網頁上註冊的 WebMCP Tool 來幫助使用者完成操作。

結語

可以預見的是，在 2026 年下半年，隨著各大框架（如 Next.js、Nuxt）對 WebMCP 的生態系支援越來越完善，「成為 Agent-ready 的網站」將會變成每一家企業與電商的基本要求。比起耗費大量時間去做傳統的 SEO 讓搜尋引擎看懂文字內容，提供 WebMCP 讓 AI Agent 能夠直接操作網站功能，帶來的商業價值是相當可觀的。

歡迎打開前面的兩個 Demo 頁面實際體驗看看，希望透過本文的介紹，能讓大家對 WebMCP 有更進一步的認識，一起迎接 Agentic Web 的時代 😊

延伸閱讀：