AI 直接操控网站？'Persona.js' 开启代理人时代

想象一下：早上醒来，你对手机或电脑里的 AI 助手说：“把今天下午 3 点会议的资料上传到网站上，并通知相关人员。”以前的 AI 就像在用人眼看屏幕一样，需要通过“截图”来分析网站，速度慢且笨拙。但现在，一个新时代正在开启，AI 可以直接理解网站的“内部结构”并将其当作工具来使用。

最近在开发者中备受关注的 Persona.js 和 WebMCP，正是这场变革的核心。

为什么这项技术很重要？

到目前为止，想要代用户处理事务的“AI 代理人”在网站上操作时，必须经历非常低效的过程。由于 AI 需要拍摄网站截图来分析按钮和输入框的位置，这就像是一个蒙着眼睛的人，在黑暗中摸索着键盘操作一样。

Persona.js 和 WebMCP 技术让 AI 不仅仅是“肉眼”观察屏幕，而是能够直接阅读网站的“蓝图”并进行精确操作。这意味着 AI 助手不再仅仅是一个聊天工具，而是真正成为能够代你处理工作的“办事员”。Persona: Open-source Agent UI Library in VanillaJS

简单来说：AI 的“标准出入口”

WebMCP 可以比作网站上安装的“AI 专用出入口”。WebMCP Explained: Google and Microsoft’s Browser-Native Agent Protocol 过去，AI 想进入网站处理事务，由于无法通过正门，不得不采取“破窗”进入（截图方式）或翻墙。但引入 WebMCP 的网站，当 AI 代理人发出“我想点这个按钮”、“我想在这里输入文字”的请求时，网站会礼貌地打开大门，让其立即执行功能。WebMCP: Turning webpages into tools for AI agents

我们所处的位置：效率如何？

WebMCP 的引入效果有明确的数据支撑。传统的截图方式每次分析屏幕都会消耗 2000 个以上的 Token（AI 处理语言的单位）。而使用 WebMCP，仅需 20 到 100 个 Token 即可完成，且 AI 的任务处理准确度大幅提升至约 98%。WebMCP: Google’s New Web Agent Protocol Changes How AI…

未来展望：网站将如何改变？

在不久的将来，你所使用的几乎所有网站都将配备 AI 代理人的“专用聊天框”。用户无需再费力寻找复杂的菜单，只需告诉 AI 代理人即可。代理人将通过 Persona.js 等库构建的 UI，代你高效完成网站上的操作。

此外，开发者无需为了实现这些功能而构建复杂、笨重的机器人。只要掌握标准 JavaScript，任何人都能将自己的网站改造成“AI 代理人工作的高效办公室”。How to Make Your Website Agent-Ready With 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…)