API

前言 隨著 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。...

前言 現代網站開發流行前後端分離的開發模式，前端通常使用 JavaScript 框架如 ReactJS, VueJS 或 AngularJS 來實作 UI 的呈現與渲染，而後端主要使用 RestFul 或 GraphQL 等方式來提供 API 給前端串接。 但專案開發需求時程通常都是又急又需要快速完成，前端工程師如果要等到後端把 API 完成後再來實作就可能會耽誤到 UI 的開發，所以常見的做法會是前後端討論完 API 的規格後 (包含輸出的資料格式與範例)，前端這邊會使用 Mock Data 來模擬後端 API 的輸出，然後來整合前端的程式。 各個軟體框架或是第三方套件 (如: Mock.js) 都有提供 Mock Data 的實作方式，然而在實務上這也衍生了 Mock Data 管理的問題，例如在執行原始碼版控時可能將 Mock 資料也推到公用版控主機，或是 Bundle 輸出 js 檔時，都可能把 Mock 資料也包進產出的 js 檔案中，如果 Mock 資料有包含機敏資料，就有外洩的可能。 所以本文介紹使用 Chrome 瀏覽器的開發者工具來進行 API Mock，除了讓 Mock 資料與專案原始碼脫鉤 (decouple)，也可以避免原本的前端專案資料夾過於雜亂，各個流程的 Mock 資料也可以另外進行版控，或是拿來用在 e2e 測試程式中，感覺起來是相對優雅而乾淨的做法。 第一步: 使用 The Dog API 建立一個範例專案 The Dog API 是由 That API Company 這間專門從事 API 開發的國際性公司所開發的 API，主要是提供給新手工程師練習串接 API 使用，我們會使用 The Dog API 來建立一個範例的前端程式。...