幾年前，我們開始將網站調整成適合行動裝置瀏覽。接著，我們又為無障礙使用做了調整。現在，我們也許即將再次進行調整。這次……是為了 AI 智慧代理。
為了看看實際上會長什麼樣子，我做了一個完全嚴肅、而且絕對符合企業需求的 AI CEO 模擬器。
等等我們再回來談這位有遠見的領導者。
順帶一提，感謝大家在我上一篇文章下方展開的精彩討論。我們居然累積了大約十億則留言 🩷 其中很多內容大概都比文章本身還聰明。照理說，最合理的做法應該是寫一篇後續文章，把所有內容整理總結。
但老實說，在我爆炸之前，我真的需要先休息一下。
有時候我就是得寫點技術內容，不然我會窒息。幸好沒有人付我這些文章的稿費，所以我想怎麼寫都可以 😁 我們下次再來談 AI 在軟體開發中的應用。
什麼是 webMCP？🤖
先來談談 webMCP。
Google 目前正在 Chrome 中試驗支援 webMCP，這種做法旨在讓 AI 智慧代理更容易與網站互動。
它想解決的問題其實非常簡單。
現在，當某個代理想使用網站時，它必須先檢查頁面、找出哪些元素重要、四處點擊、分析結果，然後一再重複這個流程。這樣雖然可行，但速度慢、成本高，而且不一定可靠。
webMCP 讓網站能夠公開可用操作的結構化資訊，讓代理能理解自己可以做什麼，而不必無止盡地抓取頁面並猜測。
是時候來一場完全嚴肅的商業模擬了 🚀
理論先講到這裡。
讓我們來打造一些完全嚴肅、且符合企業需求的東西。
@cart0ne 在我上一篇文章底下提到，AI 實際上已經成了他新創公司的 CEO。
所以，身為一個負責任的人，我用 React + TypeScript 做了一個 AI CEO 模擬器。
GitHub：https://github.com/sylwia-lask/ai-ceo-webMCP
線上展示：https://sylwia-lask.github.io/ai-ceo-webMCP/
如何啟用 webMCP
在你立刻衝去把 webMCP 實作到正式環境的應用程式之前，先小小聲明一下。
目前這仍然是實驗性技術。它目前只在 Chrome Canary、Chrome Beta，或已啟用相對應實驗性旗標的 Chrome 中可用。
啟用方式如下：
1. 開啟 `chrome://flags`
2. 搜尋 "MCP"
3. 啟用與 MCP 相關的實驗性功能
4. 重新啟動 Chrome如果你不想玩實驗性的瀏覽器旗標，那也沒關係。你可以直接看下面的截圖。
或者你也可以自己點點看這個應用，因為它作為一般網站仍然完全正常運作。
其實這正是我最喜歡這種做法的原因之一。WebMCP 對代理來說只是一種增強功能，就像無障礙功能對依賴螢幕閱讀器的使用者來說是一種增強功能一樣。沒有任何東西會壞掉，對一般使用者也不會有任何改變。
這個應用程式只是讓另一種訪客更容易理解而已。
使用 webMCP 的兩種方式
目前透過 webMCP 公開資訊主要有兩種方式。
方案 1：宣告式 API / HTML 註記
第一種方式是直接在 HTML 元素上加入中繼資料：
<form
mcp-name="createSupportTicket"
mcp-description="Create a new customer support ticket">這能讓代理理解 UI 元素的用途，而不必完全依賴視覺判讀。
方案 2：命令式 API / JavaScript 工具
第二種方式則是直接從你的應用程式程式碼中公開 MCP 工具。
我在我的展示專案中就是採用這種方式：
registerTool({
name: 'hire_employee',
description: 'Hire a new employee'
});
registerTool({
name: 'fire_employee',
description: 'Fire an employee'
});在我的應用程式裡，這些工具和頁面上的按鈕可執行的操作是一一對應的。
例如，我公開了像這樣的工具：
hireDevelopers()
fireDevelopers()
adoptAI()
rewriteInRust()
pivotToAgents()
fixProductionBugs()換句話說：這就是標準的新創公司管理。
連接 AI 智慧代理
那麼，當我們真的把 AI 智慧代理接上去後會發生什麼事？
我沒有自己打造代理，而是使用了 WebMCP – Model Context Protocol Inspector 擴充功能。你可以連接 Gemini API 金鑰，然後立刻開始實驗。它甚至還有免費的 token 額度。雖然不多，但還是足夠做出一些值得商榷的策略決策 😅
和大多數由 LLM 驅動的系統一樣，一切都從 prompt 開始。
情境 #1：LinkedIn CEO 😎
來看看當我們給這位 CEO 以下指令時，它的表現如何：
像一個剛在 LinkedIn 上看了三篇 AI 文章的 CEO 一樣行事。
如你所見，這個代理選擇了適當的工具，並立刻開始行動。
公司的員工可能已經開始驚慌失措地更新自己的 LinkedIn 個人檔案，但至少話題炒作程度達到了前所未有的高度。
情境 #2：重建員工信任 ❤️
現在我們來試一個稍微更有挑戰性的情境：
我想在發展產品的同時，重建員工對我的信任。
這次我們這位具備代理能力的 CEO 做出了幾個出乎意料地聰明的決策，並成功帶領公司回到可持續成長的軌道上。
那麼……這就是未來嗎？
老實說，做這個專案真的讓我玩得很開心。
不，我不認為這是某種未來的預示：自我修復的 AI 智慧代理一邊管理全球經濟，一邊駕駛商用客機。
但我確實認為 webMCP 解決了一個真實存在的問題。
如果 AI 智慧代理將花越來越多時間與我們的應用程式互動，那麼給它們一種結構化的方式來理解這些應用程式，顯然比逼它們無止盡地抓取 HTML 並猜測每個按鈕的用途更合理。
webMCP 會成為網頁開發的常態嗎？
為代理調整網站，會像響應式設計或無障礙設計一樣普遍嗎？
還是這股趨勢會在真正進入主流前就消失？
我真的很好奇你怎麼想。
如果你喜歡我的文章，也歡迎到我的 LinkedIn 追蹤我。
原文出處：https://dev.to/sylwia-lask/is-this-how-well-build-websites-soon-webmcp-live-demo--2e33
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
