AI 竟能直接操控網站？「Persona.js」開啟代理人時代

想像一下：早晨醒來，你對手機或電腦上的 AI 助理說：「幫我把今天下午三點的會議資料上傳到網站，並發信通知相關人員。」以前的 AI 就像人眼看螢幕一樣，必須透過「螢幕截圖」來分析網站，過程緩慢且笨拙。但現在，一個 AI 能直接理解網站「內部構造」並將其作為工具來運用的新時代已經來臨。

近期在開發者間引起關注的 Persona.js 與 WebMCP，正是這場變革的核心。

為什麼這項技術如此重要？

過去，為了代勞處理瑣事而存在的「AI 代理人」在操作網站時，必須經過非常低效的過程。因為 AI 必須將網站畫面逐一截圖，分析按鈕在哪裡、輸入框在哪裡。這對人類而言，就像蒙著眼睛、摸索著鍵盤打字一樣。

Persona.js 與 WebMCP 技術讓 AI 不再只是「看著」螢幕，而是能直接讀取網站的「藍圖」並進行精確操作。這意味著 AI 助理不再只是單純的聊天工具，而是能真正成為代你處理業務的「實務工作者」。 Persona：純 JavaScript 編寫的開源代理人 UI 函式庫

簡而言之：AI 的「標準出入口」

將 WebMCP 比喻為網站安裝的「AI 專用出入口」再貼切不過了。 WebMCP 解讀：Google 與 Microsoft 的瀏覽器原生代理人協議 過去，AI 若想進入網站，往往無法通過正門，只能破窗而入（螢幕截圖方式）或是翻牆。但導入 WebMCP 的網站，當 AI 代理人提出「我想按這個按鈕」、「我想在這裡輸入文字」的需求時，網站會主動開啟出入口，禮貌地讓其執行功能。 WebMCP：將網頁轉化為 AI 代理人的工具

我們現在的進度：效率如何？

導入 WebMCP 的成效有數據為證。傳統基於截圖的方式，每次分析畫面都會消耗超過 2,000 個「Token」（AI 處理語言的單位）。使用 WebMCP 則僅需 20 到 100 個 Token，且 AI 的處理準確度大幅提升至約 98%。 WebMCP：Google 的新網頁代理人協議如何改變 AI…

未來展望：網站將如何改變？

在不久的將來，你所使用的幾乎每個網站都會擁有一個為 AI 代理人準備的「專屬對話視窗」。使用者無須再費力尋找複雜的選單，只需開口告知 AI 即可。代理人將透過以 Persona.js 等函式庫構建的 UI，代你順利完成網站上的各項操作。

此外，開發者無須再為了實現這些功能而費力打造龐大且複雜的機器人。只要熟悉標準 JavaScript，任何人都能將自己的網站轉變為「AI 代理人能高效工作的辦公室」，這樣的時代即將到來。 如何使用 WebMCP 讓你的網站做好代理人準備

參考資料

1. Persona: Open-source Agent UI Library in VanillaJS
2. GitHub - runtypelabs/persona
3. AI-native Web Interfaces With WebMCP
4. How to Make Your Website Agent-Ready With WebMCP
5. GitHub - hmsk/persona-js
6. WebMCP Explained: Google and Microsoft’s Browser-Native Agent Protocol
7. GitHub - jack-e-hobbs/webmcp-native-skill
8. Google’s WebMCP: Making the Web “AI-Agent-Ready”

9. [Persona AI Agent UI Framework with WebMCP Support

   LinkedIn](https://www.linkedin.com/posts/nathan-booker_persona-open-source-ai-ui-library-in-vanillajs-activity-7470559829275779072-BQvC)

10. 21st: Infrastructure and UI building blocks for the agentic internet
11. WebMCP: Google’s New Web Agent Protocol Changes How AI…

12. [Agentische Web-KI

    AI on Chrome

    Chrome for Developers](https://developer.chrome.com/docs/ai/agents?hl=de)

13. [JavaScript

    MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript)

14. WebMCP: Turning webpages into tools for AI agents

15. [webmcp-bridge: A stable local bridge that…

    AgentIndex - Top AI Tools](https://agentindex.app/tool/holon-run-webmcp-bridge/)

16. auto-webmcp v0.3.0: React support, richer schemas… - DEV Community
17. WebMCP: So machen Sie Ihre Website AI-Agent-Ready (Praxis-Guide…)