一個假想的咖啡豆選購頁面，註冊了五個 tool 給 AI Agent 使用：搜尋商品、看商品細節、加入購物車、查看購物車、結帳。
這頁是 build 後的單一檔案，原始碼拆分在 src/ 底下，讀 source 建議從那邊開始。
按下情境按鈕，畫面會照一段「使用者說話 → Agent 思考 → 呼叫 tool → 畫面更新」的腳本跑過一遍， 搜尋條件、購物車會自己動，遇到寫入類 tool 還會跳確認視窗。 這就是真的 Agent 接上之後你會看到的畫面，差別只在這裡的「思考」是寫死的腳本、真實情況由 LLM 決定。
如果想一次呼叫一個 tool 看 input / output 格式，用下面的按鈕。這跟 Agent 實際呼叫的資料結構一致。
還沒有輸出，按上面任一顆按鈕試試看。
最完整的體驗在 Chrome 146+ Canary：打開 chrome://flags，搜尋並啟用
Experimental Web Platform features，重開瀏覽器後回到這頁，狀態列會顯示「原生 API」。
安裝 Model Context Tool Inspector 擴充（Chrome Web Store 搜尋名稱）就能看到註冊的 tool 並手動觸發。
其他瀏覽器（含一般 Chrome / Safari / Firefox）這頁會透過
@mcp-b/global
polyfill 補上 navigator.modelContext，手動觸發面板仍可運作，tool 本身也實際註冊完成，
只是目前沒有這些瀏覽器內建的 Agent 可以自動呼叫它。
購物車狀態存在 localStorage，資料不會上傳。想清空執行 localStorage.clear() 即可。