什麼是 WebMCP ?

AI資訊

什麼是 WebMCP ?

什麼是 WebMCP？

WebMCP，全稱為 Web Model Context Protocol，是一項由 Google Chrome 團隊推出的創新瀏覽器標準協議，旨在讓 AI 代理能夠直接與網頁功能互動，而非依賴傳統的螢幕抓取技術。這項技術於 2026 年初在 Chrome 146 早期預覽版中亮相，標誌著 AI 與網頁交互進入全新階段，讓網站開發者能將既有功能轉化為結構化工具，供 AI 高效調用。

 

WebMCP 的起源與背景

WebMCP 的出現源於 AI Agent 發展的痛點。過去，AI 代理在操作網頁時，常需模擬人類行為，如解析像素、點擊按鈕或滾動頁面，這不僅延遲高、成本昂貴，還易因介面微調而失效。Google 與 Microsoft 共同推動此協議，透過 W3C 標準化流程，提出「發布工具，而非像素」的核心理念，讓網頁從被動顯示轉為主動提供 API 合約。

開發者社群迅速熱議此技術，尤其在 AI 教育與應用領域。它解決了 LLM（大型語言模型）從文字生成轉向行動執行的瓶頸，為程式設計課程注入新元素，例如教導學生如何在前端暴露工具給 AI。

 

核心架構與運作機制

WebMCP 依賴瀏覽器原生 API，主要透過 navigator.modelContext 介面實現，包含兩大互補模式：

• 宣告式 API（Declarative API）：針對標準 HTML 表單動作，如資料提交，直接處理無需複雜邏輯的操作。

• 命令式 API（Imperative API）：支援 JavaScript 函式執行，例如 searchProducts(query, filters) 或 addToCart(productId, quantity)，讓 AI 一次調用完成多步驟任務。

運作流程簡單：網站開發者註冊工具（包含名稱、描述、參數與回傳格式），AI 代理透過瀏覽器沙盒調用，無需額外後端暴露。使用者權限與狀態同步由 Cookie 或會話機制保障，確保安全。

例如，在電商網站，AI 可直接呼叫 checkout(orderId)，取代數十次 DOM 操作，大幅提升速度與準確率。

 

主要功能與優勢

WebMCP 帶來三大關鍵優勢：

• 程式碼復用：直接利用既有前端邏輯，無需重寫後端 API。

• 統一介面：人類與 AI 共享同一入口，簡化驗證與狀態管理。

• 無障礙升級：輔助技術也能執行高階操作，提升可及性。

此外，它支援多頁面工具聚合，例如瀏覽器擴充功能可從數個網站收集 ToDo 清單，實現跨域協作。開發環境使用 TypeScript、Turborepo 與 PNPM，MIT 授權下開源，易於整合進線上程式課程。

優勢比較	傳統螢幕抓取	WebMCP
執行速度	慢（多步交互）	快（單次函式呼叫）
可靠性	低（UI 變動失效）	高（結構化合約）
安全性	中（全域解析）	高（沙盒限制）
開發成本	高（自訂腳本）	低（標準 API）

 

應用場景與實際案例

在教育領域，WebMCP 完美契合 AI 程式課程。例如，教師可建置互動平台，讓學生用 AI 代理自動化表單填寫或資料擷取，練習 Python 或 JavaScript 與瀏覽器 API 整合。

商業應用更廣泛：

• 電商自動化：AI 代理直接查詢商品、加入購物車，無需視覺辨識。

• 內容管理：新聞網站暴露 publishArticle(title, content) 工具，讓 AI 生成並發布報導。

• 擴充功能開發：聚合多網站資料，如跨平台任務管理。

香港開發者社群已開始實驗，例如結合本地 AI 工具，打造智慧購物助手，預計在 2026 年教育展覽中亮相。

 

安全與隱私考量

WebMCP 強調「Human-in-the-loop」原則，使用者須明確授權工具暴露。所有操作限於瀏覽器沙盒，僅存取當前權限資料，避免後端洩漏。開發者需驗證頁面認證機制完整，例如 HTTPS 與 CSRF 防護。

相較開放 API，它縮小攻擊面，但仍需注意工具濫用風險。Google 建議企業逐步暴露功能，從簡單查詢開始測試。

 

未來發展與挑戰

WebMCP 正朝 W3C 標準推進，預計 2026 年底全瀏覽器支援。挑戰包括跨瀏覽器相容性與開發者採用率，但其潛力巨大，可能重塑 Web 生態，讓 AI 成為網頁原生夥伴。

對 AI 教育者而言，這是絕佳教材：學生不僅學程式，還能探索 AI 代理時代的 Web 開發。隨著 Chrome 更新，更多開源專案湧現，值得持續追蹤。