WebMCP
mcp2everything · 程式設計
WebMCP（Web Model Context Protocol）是一項為 AI 代理網頁整合而提出的網頁標準。它讓網站把結構化工具直接開放給在瀏覽器內執行的 AI 代理。代理不必再截圖猜測按鈕在哪裡，而是由網站註冊帶有名稱、說明與參數結構的 JavaScript 函式，代理立刻就能呼叫。它是一套輕量的開源函式庫，加上瀏覽器層級的 API，瞄準的是想讓自家頁面與 AI 助理乾淨協作的前端開發者。
關於 WebMCP
WebMCP 是什麼
WebMCP 是一項為 AI 代理打造的開放網頁標準。它把常見的瀏覽器自動化模式整個翻轉過來：不是由代理解析 DOM 或讀取截圖來判斷頁面能做什麼，而是頁面自己把能力宣告成結構化工具。瀏覽器接著把這些工具交給任何已連接的 AI 代理，代理就像呼叫本機函式一樣呼叫它們。
核心概念建立在一個全域物件上：navigator.modelContext。開發者呼叫 registerTool，帶入名稱、白話說明、參數的 JSON Schema，以及處理函式。代理會自動探索這個工具，並用真實參數呼叫。由於工具在活動頁面內執行，它已經握有使用者的工作階段、Cookie 與當前應用程式狀態，因此不需要額外的驗證管線。
有個實際限制值得及早知道。WebMCP 與瀏覽器分頁同生共死。關掉分頁，工具就消失。它只涵蓋工具，不含完整 MCP 伺服器能承載的資源與提示。而且它假定有人在场授權動作，這是安全設計，卻也排除了完全無人看管的背景作業。
開始使用
- 打開網站的前端程式碼，加入 WebMCP 的 script 標籤（或執行
npm install webmcp），讓函式庫在頁面上載入。 - 建立
WebMCP實例。你可以傳入按鈕顏色、位置與大小等介面選項，控制浮動輔助小工具。 - 用
mcp.registerTool(name, description, schema, handler)註冊第一個工具。把處理函式指向應用程式原本就有的邏輯。 - 在 script 載入後立刻註冊所有工具。MCP 用戶端往往需要重新啟動，才能看到新開放的工具。
- 在支援的瀏覽器中測試，並連接一個 MCP 用戶端，然後上線。上線後，代理就能呼叫你的工具。
就這樣。沒有後端、沒有驗證伺服器、不必改寫。
產品資訊
快速了解 WebMCP 的定價、支援平台與效能。
適合對象
這項工具最適合的使用者、任務與情境。
使用者
- 前端開發者：這套函式庫是純 JavaScript，不綁定任何框架，因此能放進 React、Vue 或原生頁面，前提是你有權編輯網站程式碼。
- 獨立網站站主與小型團隊：不需要後端、不需要 OAuth 伺服器，也不需要為每個網站裝 AI 外掛，只要能貼上一段 script 標籤，整合成本就很低。
- 為 AI 流量做準備的產品團隊：若你希望 AI 助理在網站上完成真實任務，而不是抓取內容，這個標準就很實用。
任務
- 開放搜尋工具，讓代理用關鍵字查詢你的內容並回傳結構化結果，而不是在螢幕上讀取清單。
- 註冊表單填寫與送出動作，讓助理代替使用者完成訂單或預約，且工作階段早已就緒。
- 把現有的 JavaScript 商業邏輯包成代理可呼叫的函式。這樣就不必另建一層只為 AI 服務的 API。
情境
- 購物流程中，代理呼叫加入購物車工具，而不是在會變動的版面中點來點去。
- 文件網站讓助理在使用者提問時直接取出頁面內容。
- 儀表板中，助理透過註冊資源讀取即時小工具，而不是重新解析 DOM。
主要功能
以 JSON Schema 註冊工具
registerTool 是這套 AI 代理網頁標準的核心。你傳入名稱、自然語言說明、參數結構與處理函式，工具就會對任何已連接的代理開放。結構會告訴模型能送出哪些輸入，減少格式錯誤的呼叫與瞎猜。
共用工作階段與頁面脈絡
工具在頁面內執行，因此繼承使用者既有的登入狀態、Cookie 與記憶體中的資料。代理不必重建驗證，也不用擔心跨來源限制。相較於為每個 AI 動作架設獨立的後端代理，這簡化了許多。
工具之外的提示與資源
除了動作，WebMCP 也讓你能註冊提示範本，以及以 URI 標識的可讀資源。提示可以塑形常見查詢，並接受每次呼叫都不同的參數。資源可以把頁面內容當作脈絡開放。兩者合起來，給代理的不只是可按的按鈕。
不依賴框架或後端
這套函式庫是小型原生 JavaScript 外掛，能在 Chrome、Firefox、Safari 與 Edge 上運作，也與 React、Vue 及 Angular 相處融洽。你不需要新伺服器、新資料庫，也不必重寫架構。只要你能編輯頁面前端，就能加入 WebMCP。
對介面變動的耐受度
因為代理呼叫的是語意工具，而非定位螢幕元素，所以 CSS 類別改名或版面重排都不會破壞整合。以截圖與 DOM 抓取為主的代理，在設計師一動頁面時就失效。WebMCP 避開了這一整類的故障。
優缺點
優點
- 後端零改動，加上簡單的 script 標籤設定，小型團隊的整合成本得以壓低。
- MIT 授權且免費，沒有廠商帳號，也沒有為 AI 流量支付的每次請求費用。
- 重複使用既有前端邏輯，服務真人使用者的同一套程式碼也能服務代理。
- 自動繼承使用者工作階段，省去 AI 路徑上多數驗證接線。
- 在各大瀏覽器與前端框架上都能運作，不會被單一技術堆疊綁死。
缺點
- 分頁關閉後工具就消失，因此無法支撐持久或無介面的背景自動化。
- 不像完整 MCP 伺服器那樣內建資源與提示支援，限制了部分代理能做的事。
- 設計上要求使用者授權，較安全，但代理動手前多了一道步驟。
- 周邊工具鏈仍早，可能遇到粗糙邊角與為數不多的可用範例。
常見問題
它讓網站把結構化工具交給瀏覽器內的 AI 代理。代理直接呼叫這些工具，因此能搜尋、填表或觸發動作，而不必抓取頁面或猜哪裡要點。
相關內容
探索與 WebMCP 相關的工具、技能與文章。
WebMCP 替代方案
Forefront
Forefront · 程式設計Forefront 是一個用來打造開源 AI 的網頁平台。你可以用自己的資料微調主流的開源語言模型、評估它們的表現，再透過 API 執行，或匯出後自行架設。想要封閉式平台的便利、卻堅持要自己擁有模型與資料的開發者，就是這裡的目標客群。
Startkit
StartKit.AI · 程式設計Startkit 是一套用來打造 AI SaaS 與 AI 包裝產品的樣板。可以把它想成一個 AI 新創樣板，把枯燥的部分都先接好了：驗證、Stripe 與 Lemon Squeezy 付款、用量限制、交易型電子郵件，以及一套能與 OpenAI、Anthropic、Groq 或 Llama 溝通的 AI API 啟動套件。你複製儲存庫、設定價格，然後專心在產品中使用者真正願意付費的部分。它建構於 React 與 Tailwind 之上的 Next.js，所以大部分的樣板程式碼對你來說並不陌生。
Testim
Tricentis · 程式設計Testim 是專為網頁、行動與 Salesforce 應用程式打造的 AI 測試自動化平台，用來建立並執行端到端測試。它靠機器學習在介面變動時維持測試穩定，團隊因此少花時間修補壞掉的定位器。對於一款今天就能開始使用的自動化測試工具來說，這表現不算差。你透過在瀏覽器錄製動作來建立測試，需要更多控制時再補上 JavaScript。對忙碌的 QA 團隊來說，這是個可靠的選擇。