01
WebMCP 介紹
AI Agent × Web Platform
WebMCP 介紹
連結 Web 應用與 AI Agent 的瀏覽器原生工具介面
Web Model Context ProtocolW3C Web Machine Learning CGGoogle & Microsoft社群草案
02
WebMCP 介紹
Speaker
Bruce Lee 李冠緯
網站開發 × WordPress 社群 × AI 自動化
哈拉設計創辦人,13+ 年網站開發與自由接案經驗,熟悉 WordPress、Laravel、前後端開發與伺服器維運。
@supergud
WordPressLaravelAI Workflow
個人介紹
把新技術拆成可落地的網站流程,是我平常最常做的事。
13+ 年哈拉設計創辦人,長期接觸企業網站、活動網站、會員系統、主題開發與維運工作。
社群WordPress Taipei Meetup、WordCamp Taiwan/Asia、WP Campus Connect 參與者與活動組織者。
AI研究如何把 AI 生成設計、內容與自動化流程,變成真正能安裝、維護和上線的 WordPress 解決方案。
我喜歡把新工具玩到真的可以上線。平常在寫程式、辦小聚,還有研究怎麼讓 AI 幫我少加一點班。
03
WebMCP 介紹
Why WebMCP?
不要只讓 Agent 模擬滑鼠和鍵盤
傳統「啟動(actuation)」是讓 Agent 像真人一樣點擊、輸入、走流程;每一步都需要重新理解畫面。
- 畫面、文案或 DOM 一改,代理就可能誤判
- 複雜任務會累積錯誤,可靠度下降
- Agent 需要猜測元素用途,速度與穩定性都受影響
- 使用者也比較難確認 Agent 到底做了什麼
WebMCP:網站宣告工具,沿用前端邏輯與登入情境。
Source: Chrome for Developers — WebMCP docs, 2026-06-09
04
WebMCP 介紹
Core Idea
一句話理解 WebMCP
WebMCP 是一個建議中的網頁標準:網站用 JavaScript 與 HTML 表單標註,把功能公開成 AI Agent 可理解與呼叫的工具。
Discovery頁面用標準方式註冊 checkout、filter_results 等工具
JSON Schema明確定義工具輸入,降低誤解與幻覺
State共享目前網頁脈絡與可立即操作的資源
Action在可見瀏覽器環境中執行既有功能
不是取代 UI,而是替 UI 加上一層給 Agent 使用的工具合約;人類體驗和品牌流程仍留在網站裡。
Source: Chrome for Developers — WebMCP docs
05
WebMCP 介紹
How it Works
網站說清楚功能,Agent 才不用猜
WebMCP 讓網站定義 tool,例如 checkout、filter_results、submit_application;Agent 透過瀏覽器發現工具、理解 schema,並在使用者可見的頁面脈絡中執行。
使用者提出目標與限制
→
AI Agent讀取工具清單與 schema
→
Browser提供頁面狀態與權限邊界
→
WebMCP ToolSchema + Handler
→
Web App呼叫既有表單與流程
共享情境:沿用分頁 Session / Cookie,由應用更新 UI,讓人與 Agent 檢視同一份結果。
Source: Chrome for Developers — WebMCP docs
Comparison Matrix
傳統後端 MCP vs. Client-Side WebMCP
| 對比維度 | Backend MCP | WebMCP Client-Side |
|---|
| 執行環境 | 外部獨立伺服器(Server-side) | 使用者本地瀏覽器分頁(Client-side) |
|---|
| 通訊路徑 | Agent ↔ 後端 Server | Agent ↔ 瀏覽器分頁(DOM / JS) |
|---|
| 使用者認證 | 另行整合 OAuth / API Key | 沿用網站 Session / Cookie 與授權 |
|---|
| 視覺 UI 呈現 | 需額外串接前端狀態同步 | 工具沿用前端邏輯,即時更新 UI |
|---|
| 開發者門檻 | 需維護工具服務與認證整合 | 可包裝現有 JS / Form;複雜狀態仍需設計 |
|---|
WebMCP 補足前端互動;後端 MCP 適合服務與資料整合,兩者可以搭配。
Declarative API
宣告式表單:用語意標註漸進增強
HTML / orderLunch
<form id="lunchForm" toolname="orderLunch"
tooldescription="提交員工午餐訂單,包含姓名、餐點與備註。">
<label for="employee">訂購人姓名</label>
<input id="employee" name="employee_name" type="text"
toolparamdescription="員工全名" required>
<label for="meal">餐點選擇</label>
<select id="meal" name="meal_type"
toolparamdescription="主餐類別">
<option value="pork_ribs">排骨飯</option>
<option value="chicken_leg">雞腿飯</option>
</select>
<label for="memo">備註</label>
<input id="memo" name="notes" toolparamdescription="餐點備註">
<button type="submit">送出訂單</button>
</form>
表單 → 工具
toolname 定義名稱。
tooldescription 說明用途。
瀏覽器將表單辨識為 orderLunch。
欄位 → JSON Schema
name 對應參數名稱。
toolparamdescription 描述欄位。
required 表示必填。
沿用既有 submit 處理流程;本例補齊備註欄位與 label 關聯。
Imperative API
指令式程式碼:動態註冊前端能力
JavaScript / add-todo
const controller = new AbortController();
if (typeof document.modelContext?.registerTool === "function") {
await document.modelContext.registerTool({
name: "add-todo",
description: "向使用者的待辦事項清單新增一個項目",
inputSchema: {
type: "object",
properties: {
text: { type: "string", description: "待辦事項文字" }
},
required: ["text"]
},
annotations: { readOnlyHint: false },
async execute({ text }, { signal }) {
signal.throwIfAborted();
await addTodoItemToCollection(text);
return { status: "success", message: `已新增:${text}` };
}
}, { signal: controller.signal });
}
SPA / 非同步工作流
先檢測支援
不支援時保留原有 UI。
執行應用邏輯
addTodoItemToCollection 由網站實作,更新資料與 UI。
兩個取消訊號
註冊 signal:管理工具生命週期。
執行 signal:取消本次任務;非同步流程也應配合處理。
草案 API 範例;await 位於 module 或 async 函式內。readOnlyHint 是提示,非權限保證。
Contextual Tools
情境化工具與 Token 預算管理
依目前頁面提供相關工具,減少無關 Schema 與選擇干擾。
商品清單頁
search_catalogfilter-products
元件載入時註冊搜尋、篩選工具。
Agent 專注於找商品。
結帳頁
fill_addressreview_order
卸載舊工具,再註冊地址與訂單確認工具。
敏感操作仍需確認。
頁面切換controller.abort()移除舊工具 → 註冊新情境工具
同一分頁的 SPA 路由與元件卸載,要主動清理;切換瀏覽器分頁不等於文件自動卸載。
10
WebMCP 介紹
Use Cases
官方文件提到的典型場景
最適合從「資料結構明確、流程步驟多、容易因 UI 變動失敗」的任務開始。
🎫
客服支援
幫 Agent 找到正確表單,並填入使用者已提供的資訊。
✈️
旅遊預訂
處理多停點、多乘客、日期與條件篩選等複雜行程。
🧾
結構化表單
用 submit_application 這類工具把對話資料精準對應到欄位。
🧰
開發診斷
用 run_diagnostics 觸發隱藏在選單深處的修正或檢查。
Source: Chrome for Developers — WebMCP docs
Use Cases
電商、開發者工作流與影城選位
01 / 電商與購物
search_catalog
filter-products
update_cart
proceed_to_checkout
依尺寸、顏色篩選並更新商品 Grid,再引導使用者確認結帳。
02 / Gerrit Code Review
get-trybot-statuses
get-trybot-failure-snippet
add-suggested-edit
讀取 CI 失敗日誌,將建議 Patch Diff 顯示在 UI,交由工程師審查。
03 / 影城訂票與選位
getMovies
getAvailableSeats
bookTickets
查詢場次、空位並在座位圖顯示選位結果;使用者確認後才提交訂票。
Gerrit 來自規範提案情境;電商(如 Shopify 網站)與影城為整合示意,工具名稱由網站定義。
12
WebMCP 介紹
WordPress / WooCommerce
放到 WordPress 可以怎麼想?
把網站上「人類本來就能操作」的流程,包成 Agent 可理解的工具;先從客服、搜尋、報名、診斷這類低風險任務開始,再逐步接到會員與商務流程。
search_postsfilter_productscompare_productssubmit_contact
create_support_ticketfind_eventsubmit_registrationcheck_order_status
download_invoiceupdate_profile_draftrun_diagnosticsexport_report
最小可行實驗:先做「站內搜尋 tool」或「客服表單 tool」,讓 Agent 能找得到、填得準、回報得清楚。
13
WebMCP 介紹
Getting Started
從一個工具開始導入
官方文件提供兩種測試路徑:Chrome 149 起可加入來源試用;本機開發可開啟 chrome://flags/#enable-webmcp-testing。
01選定流程
挑高價值、可驗證、低風險的任務,例如搜尋或客服表單
02定義 Schema
定義輸入 Schema、必要欄位與可理解的結果/錯誤
03註冊工具
用 HTML 標註表單,或用 JavaScript 註冊複雜 handler
04用 Inspector 測試
檢查工具探索、手動呼叫、結構化輸出與錯誤回應
Source: Chrome for Developers — WebMCP docs, 2026-06-09
WordPress × WebMCP / Live Demo
用一句話,在 Merveille 挑選商品。
自製外掛已上線:真實商品、真實購物車,操作過程同步顯示。
現場示範網站
Merveille
merveille.eat2die.com
請使用 Merveille WebMCP 工具,搜尋 500 元以下的耳環,查看一件有庫存且可直接購買的商品,加入購物車 1 件,再列出購物車內容。不要結帳。
先登入 WordPress 管理員,開啟 Demo。
確認「5 個工具已註冊」,再由 AI 呼叫。
- 01 / 搜尋與查看商品
merveille_search_products
merveille_get_product觀眾看到:商品圖片、價格與詳情。
- 02 / 加入並查看購物車
merveille_add_to_cart
merveille_get_cart觀眾看到:商品 × 1、購物車總額。
- 03 / 清理,準備下一輪
merveille_cleanup_demo_cart只移除 Demo 商品,保留原有品項。
已驗證:工具註冊、手動搜尋、購物車保存與清理。
AI 自然語言呼叫待實測;現場可用面板按鈕操作,紀錄會標示「手動測試」。
Inside the Plugin / Merveille WebMCP Demo 1.0.1
外掛做的事:接起工具、資料與畫面。
01 / 瀏覽器註冊 5 個工具搜尋、詳情、加入購物車、查看、清理。
02 / WordPress 驗證並執行管理員+nonce;WooCommerce 處理購物車。
03 / 回傳結果,同步更新 UI商品卡、總額與紀錄,讓觀眾看見操作。
JavaScript · 註冊工具 → 呼叫 REST API
// 1. 註冊工具:名稱、參數格式與執行函式
await api.registerTool({
name: names[action], description, inputSchema,
annotations: { readOnlyHint, untrustedContentHint: true },
execute: async (args, context = {}) => JSON.stringify(
await run(action, args, 'WebMCP', context.signal)
)
}, { signal: controller.signal });
// 2. run() 呼叫同站 REST API,帶入登入狀態與 nonce
const res = await fetch(cfg.api + action, {
method: 'POST', credentials: 'same-origin',
headers: { 'Content-Type': 'application/json',
'X-WP-Nonce': cfg.nonce },
body: JSON.stringify(args), signal
});
const data = await res.json();
// 成功後:products(data) / detail(data) / cart(data)
PHP · 權限檢查 → WooCommerce 購物車
// 3. 每個 REST 工具都先驗證管理員身分與 nonce
'permission_callback' => function ($r) {
return current_user_can('manage_options')
&& wp_verify_nonce(
$r->get_header('X-WP-Nonce'), 'wp_rest'
);
},
// 4. 通過商品與庫存檢查後,加入真實購物車
$key = WC()->cart->add_to_cart(
$p->get_id(), 1, 0, [],
['merveille_demo_owner' => get_current_user_id()]
);
WC()->cart->calculate_totals();
WC()->cart->set_session();
return mwd_cart_data();
Demo 邊界:僅登入管理員可用;只清理自己加入的 Demo 商品;不建立訂單或付款。
核心節錄:assets/js/script.js 的 register() / run();merveille-webmcp-demo.php 的 REST 路由與 mwd_execute()。
為閱讀省略外層迴圈、支援偵測、錯誤處理與商品驗證;api、names、cfg 等由外掛定義,非獨立可執行範例。
Security & Human-in-the-Loop
Agent 可以代辦,使用者保有決定權
敏感操作與風險提示
付款、刪除、送出前確認
以 UI 清楚顯示對象、金額與影響,再取得使用者確認。
readOnlyHint
唯讀工具可標示 true;這只是提示,不能取代伺服器授權與驗證。
資料與來源邊界
Prompt Injection / Tool Poisoning
工具描述與回傳值可能夾帶惡意指令,應視為不可信輸入。
iframe 權限政策
tools 預設 self;跨來源 iframe 需明確委派,如 allow="tools",並遵守上層政策。
瀏覽器提供執行邊界;網站仍須驗證參數、權限與操作結果。
Browser Support & Status
生態系與支援現況
瀏覽器 / Origin Trial
Chrome 149 起開放來源試用;Edge 亦有 WebMCP 來源試用項目。
現行草案入口:document.modelContext。舊版實作需核對版本。
AI 宿主 / ChatGPT
桌面版內建瀏覽器提供 Site tools,可使用網頁暴露的 WebMCP 工具。
需帳號、所選模型與目前網頁均支援。
測試 / 開發工具
Model Context Tool Inspector:探索與測試工具。
@mcp-b/global:含 polyfill、MCP server 與傳輸的社群 runtime;需確認 API 版本相容性。
截至 2026-09-12:仍屬實驗性草案與試用生態,不能假設所有瀏覽器原生可用。
18
WebMCP 介紹
Takeaway
Agent-ready Web
下一波網站優化,不只是讓 AI「讀懂內容」,而是讓 AI「可靠完成任務」。
這個網站最常被使用者要求代辦什麼?
哪個流程最容易因 UI 改版讓 Agent 失敗?
哪個工具可以安全地先開放給 Agent?
從一個工具開始,讓網站多一個 AI 可以理解的入口。
19
WebMCP 介紹
References
參考資料
第一版介紹結合 API 教學與生態現況,依 2026-09-10 社群草案及官方文件整理。WebMCP 尚非正式 W3C 標準,瀏覽器與宿主支援需確認版本。
Chrome for Developers — WebMCP docs
https://developer.chrome.com/docs/ai/webmcp?hl=zh-tw
WebMCP GitHub / Explainer
最新社群草案 · Explainer
ChromeStatus — WebMCP
https://chromestatus.com/feature/5151691210653696
Chrome Web Store — Model Context Tool Inspector
可用於測試與檢查頁面工具。
ChatGPT Site tools · MCP-B runtime
20
WebMCP 介紹
Q&A
Question & Answer
歡迎提問,也可以交流 WordPress、AI Agent、WebMCP 與網站自動化。
@supergudWordPress AI WorkflowAgent-ready Web