WebMCP 是一個新的網頁標準提案，讓網站透過 navigator.modelContext API
直接向 AI Agent 暴露可呼叫的工具。不再需要 DOM 猜測或螢幕截圖，
Agent 可以精確地理解並操作網頁。
檢查你的瀏覽器是否支援 WebMCP API。如果看到紅色，請先完成安裝設定。
AI Agent 必須透過「DOM 猜測」或「螢幕截圖」來理解網頁結構。這種方式又慢、又貴、又不準確。
網頁主動告訴 Agent 它能做什麼、怎麼呼叫。Agent 直接用結構化 JSON 操作，精確又高效。
WebMCP 提供兩種方式讓網頁暴露工具給 Agent。
在現有的 <form> 標籤上加入屬性，零 JavaScript。適合表單操作。
透過 navigator.modelContext.registerTool() 註冊更複雜的動態工具。
3 分鐘快速上手 WebMCP。
打開本站的任何 Demo 頁面，就可以看到 WebMCP 工具的實際運作方式。
從簡單到複雜，循序漸進體驗 WebMCP 的威力。
登入表單、航班搜尋、聯絡表單 — 純 HTML 屬性，零 JavaScript。
開啟 Demo → Imperative待辦事項、計算機、天氣查詢 — 用 JS 註冊互動式工具。
開啟 Demo → Combined模擬電商網站 — 同時使用 Declarative（搜尋）+ Imperative（購物車）。
開啟 Demo → MarTechCRM 客戶管理、陌生開發、簡訊發送、數據觀測統計 — 完整行銷自動化。
開啟 Demo → AI + Letta整合 Letta Agent 的 SaaS 後台 — 任務管理、通知中心、系統設定 + AI 聊天助手。
開啟 Demo → Monitor即時監控 Agent 與工具之間的 request/response 互動紀錄。
開啟 Demo →| 面向 | 傳統 Browser Automation | WebMCP |
|---|---|---|
| 偵測方式 | DOM 猜測 / 螢幕截圖 | 結構化 API 直接暴露 |
| Token 消耗 | 高（截圖轉 base64） | 低（純 JSON，節省 89%） |
| 準確度 | ~60-80%（依頁面複雜度） | ~98%（結構化呼叫） |
| 速度 | 慢（截圖 + LLM 解析） | 快（直接 JSON 呼叫） |
| 維護成本 | 高（UI 改動就壞） | 低（API 合約穩定） |
| 瀏覽器支援 | 所有瀏覽器 | Chrome Canary 146+（實驗中） |