 AI 生成。](https://yishiashia.github.io/posts/webmcp-introduction/webmcp_hero_hubbd9414c4a21b157ae325276f65c4d0f_427880_360x0_resize_q75_h2_box_2.webp)
[前端開發] WebMCP 介紹與實作：讓 AI Agent 無縫操作你的網頁
前言 隨著 AI 技術的快速發展，AI Agent（智慧代理）已經不再只是聊天機器人，它們開始具備幫我們「執行網頁任務」的能力，例如：幫忙訂機票、比價、甚至是填寫複雜的報帳系統。 不過在過去，AI Agent 若要操作網頁，通常得依靠截圖分析 (Computer Vision) 或是解析原始 DOM 結構 (Screen Scraping) 來找到頁面上的元素。這些方法不但效率低落、耗費大量計算資源，而且非常脆弱：只要網頁的 UI 稍微改版（改個 class name 或換個按鈕顏色），Agent 就可能找不到目標元素而操作失敗。 為了從根本上解決這個問題，一項全新的網頁標準 —— WebMCP (Web Model Context Protocol) 誕生了。它由 W3C Web Machine Learning Community Group 孵化，並獲得 Google 與 Microsoft 的大力推動。本篇文章將帶大家認識 WebMCP 的核心概念與運作原理，並透過兩個實際的 Demo 來體驗如何讓現有的網頁變得 Agent-ready。 💡 小提醒：WebMCP 目前（2026 年初）仍處於早期預覽階段，需要在 Chrome 146 Canary 開啟特定 Flag 才能使用原生支援，但我們可以使用 @mcp-b/global polyfill 在開發階段進行測試。 什麼是 WebMCP？ WebMCP (Web Model Context Protocol) 是一個瀏覽器原生 (Native Browser API) 的標準協議，主要是讓前端開發者可以用結構化、標準化的方式，將網頁的功能（Tools）「自我宣告」並暴露給 AI Agent。...