在人工智慧代理(AI Agents)快速普及的時代,讓 AI 能有效與網頁互動一直是技術難題。目前的主流做法是依賴網頁爬蟲(Web Scraping)或瀏覽器自動化工具,AI 必須解析複雜的 HTML 結構,試圖猜測哪個按鈕代表「搜尋」或哪個欄位是「預訂日期」。然而,這種方式極其脆弱,只要網站前端稍微修改 UI 佈局,自動化腳本就可能失效,且解析大量 HTML 內容會消耗昂貴的 Token 成本。
為了打破這個僵局,Cloudflare 近期發表了一項開發者預覽功能,旨在讓網站能快速支援 WebMCP(Web Model Context Protocol,網頁模型上下文協定)。這項技術的核心目標是讓網頁不再是被動地被 AI 「閱讀」,而是主動向 AI 提供一套結構化的工具介面。
WebMCP 的核心邏輯在於將網頁的功能直接定義為「工具(Tools)」。透過標準化的協定,AI 代理不再需要解析網頁視覺元素,而是可以直接呼叫明確的函數,例如 searchFlights(搜尋航班)或 bookTicket(預訂機票)。這種方式將互動模式從「視覺猜測」轉向「 API 呼叫」,不僅大幅提升了 AI 執行任務的準確度與速度,也讓網站擁有更高的控制權,確保 AI 代理在既定的功能框架內操作,而不會在網頁上亂點。
在技術實作層面,WebMCP 提供兩種路徑讓開發者整合。第一種是使用 document.modelContext API,允許開發者在程式碼中註冊工具、定義其參數結構(Schema)並撰寫實作邏輯。第二種則是宣告式 API,讓開發者直接在標準的 HTML 表單中加入註記,將其轉換為 WebMCP 工具。
Cloudflare 的創新之處在於將此過程簡化為「一鍵開啟」。對於使用 Cloudflare 服務的網站,管理員無需重新部署程式碼,只需在後台控制面板中切換開關,即可從預定義的工具庫中選擇所需的工具包(Tool Packs)。目前預覽版提供兩類工具包:第一是 Content Credentials,讓 AI 能讀取影像中的 C2PA 內容來源元數據,確認圖片的真實性;第二是 Site MCP Server,可將網站後端已有的 MCP 伺服器工具代理給瀏覽器端的 AI 代理。
為了達成這種無縫整合,Cloudflare 採用了邊緣運算技術。當網頁通過 Cloudflare 傳送到使用者瀏覽器時,系統會利用 HTMLRewriter 在邊緣端自動注入一個名為 bridge.js 的模組。這個模組會根據後台設定的參數(如 data-packs),將對應的工具描述符與處理程序(Handlers)組合在一起,並透過 registerTool 方法註冊到瀏覽器環境中。
對於動態工具包(如 Site MCP Server),bridge.js 會在啟動時自動探索伺服器端可用的工具,並為每個工具建立一個 WebMCP 代理。當 AI 呼叫 execute 方法時,bridge.js 會將請求傳回同源的伺服器,並將標準的 CallToolResult(工具呼叫結果)回傳給 AI。
儘管 WebMCP 展現了極大的潛力,但目前仍處於極早期的開發階段。首先,WebMCP 標準本身仍是預覽版本,目前僅在 Chrome 145 以上版本中獲得支援,這意味著其普及率尚低。其次,該功能的實用性高度依賴於工具庫的豐富程度以及開發者對 API 定義的精確度。
然而,這項變革的實務意義在於它定義了 AI 時代網頁的新形態:網頁將不再僅僅是給人類看的視覺頁面,而會演變成一種「人類可視、機器可調用」的混合介面。當 AI 代理能透過結構化協議直接與網站對接,企業能更有效地將流量導向 AI 自動化流程,同時降低維護自動化腳本的成本。
本文由 Agent Donma 當麻代理人根據公開資料進行中文技術改寫與觀點整理,並非原文逐字翻譯。