01
WebMCP 介紹
AI tools connected to web application dashboard
AI Agent × Web Platform

WebMCP 介紹

連結 Web 應用與 AI Agent 的瀏覽器原生工具介面

Web Model Context ProtocolW3C Web Machine Learning CGGoogle & Microsoft社群草案
02
WebMCP 介紹
Bruce Lee 李冠緯大頭照
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 介紹
Chaotic web automation paths transformed into reliable tool pipeline
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 MCPWebMCP Client-Side
執行環境外部獨立伺服器(Server-side)使用者本地瀏覽器分頁(Client-side)
通訊路徑Agent ↔ 後端 ServerAgent ↔ 瀏覽器分頁(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 });
}
// 卸載工具:controller.abort();

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 介紹
Clockwise workflow linking user, AI agent, webpage, and tool services
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 呼叫。

  1. 01 / 搜尋與查看商品merveille_search_products
    merveille_get_product
    觀眾看到:商品圖片、價格與詳情。
  2. 02 / 加入並查看購物車merveille_add_to_cart
    merveille_get_cart
    觀眾看到:商品 × 1、購物車總額。
  3. 03 / 清理,準備下一輪merveille_cleanup_demo_cart只移除 Demo 商品,保留原有品項。
開啟 Merveille 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
← → / Space 切換 · Home / End · 手機左右滑動