7.0
热点
AI SCORE
工具产品2026-06-03 15:11
webMCP 演示：网站构建的新生态蓝图
DEV Community · Sylwia Laskowska#MCP#前端#生态
Editor brief · 编辑速览
展示 Model Context Protocol 在网站开发中的应用前景，为 AI 工具生态的开发者提供参考。
Chrome 面向 AI Agent 推出的实验性协议
几年前，我们开始让网站适配移动设备。后来，我们又让网站适配无障碍访问。而现在，我们可能即将再次适配网站。这一次……是为了 AI Agent。
为了看看它在实际应用中会是什么样子，我构建了一个极其严肃、完全达到企业级标准的 AI CEO 模拟器。
稍后我们再回来看看这位高瞻远瞩的领导者。
顺便感谢大家在我上一篇文章下展开的精彩讨论。我们不知怎么就贡献了大约十亿条评论 🩷 其中许多评论可能比文章本身还要有见地。明智的做法应该是再写一篇文章，把所有观点总结一下。
但老实说，我需要暂时离开那个话题喘口气，否则我就要爆炸了。
有时我就是必须写点技术内容，不然会憋得喘不过气。好在没人付钱让我写这些文章，所以我想写什么就写什么 😁 至于 AI 在软件开发中的应用，我们以后再聊。
现在先来谈谈 webMCP。
Google 目前正在 Chrome 中试验对 webMCP 的支持。这种方案旨在让 AI Agent 更轻松地与网站交互。
它试图解决的问题其实非常简单。
如今，当 Agent 想要使用一个网站时，必须先检查页面，弄清楚哪些元素比较重要，然后不断点击、分析结果，再一遍遍重复整个过程。这种方式虽然可行，但速度慢、成本高，而且并不总是可靠。
webMCP 允许网站公开关于可用操作的结构化信息，让 Agent 无须没完没了地抓取页面并反复猜测，也能理解自己可以做什么。
让我们构建一个完全严肃、达到企业级标准的项目。
在我上一篇文章的评论区，@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 应用到生产环境之前，先来看一条小小的免责声明。
目前，这项技术仍处于实验阶段。它现在只能在 Chrome Canary、Chrome Beta，或者启用了相应实验性 flag 的 Chrome 中运行。
1. Open `chrome://flags`
2. Search for "MCP"
3. Enable the experimental MCP-related features
4. Restart Chrome
如果你不想折腾浏览器的实验性 flag，也没关系。看看下面的截图就可以了。
你也可以亲自在应用中四处点点，因为它作为一个普通网站仍然可以完美运行。
这正是这种方案最吸引我的地方之一。WebMCP 只是针对 Agent 的一层增强，就像无障碍功能是为依赖屏幕阅读器的用户提供的增强一样。它不会破坏任何东西，对普通用户而言也不会有任何变化。
应用只是变得更容易被另一类访问者理解了。
目前主要有两种通过 webMCP 公开信息的方式。
第一种方式是直接向 HTML 元素添加元数据：
<form
mcp-name="createSupportTicket"
mcp-description="Create a new customer support ticket">
这样，Agent 就能理解 UI 元素的用途，不必完全依赖视觉解析。
第二种方式是直接从应用代码中公开 MCP tools。
我的演示使用的就是这种方式：
registerTool({
name: 'hire_employee',
description: 'Hire a new employee'
});
registerTool({
name: 'fire_employee',
description: 'Fire an employee'
});
在我的应用中，这些 tools 与页面按钮提供的操作直接对应。
例如，我公开了下面这些 tools：
hireDevelopers()
fireDevelopers()
adoptAI()
rewriteInRust()
pivotToAgents()
fixProductionBugs()
换句话说：这就是完全正常的创业公司管理。
那么，当我们连接一个真正的 AI Agent 时，会发生什么？
我没有自己构建 Agent，而是使用了 WebMCP – Model Context Protocol Inspector 扩展。你可以连接 Gemini API key，然后立刻开始试验。它甚至还提供了一定的免费 token 额度。虽然不多，但依然足够你做出一些值得商榷的战略决策 😅
与大多数由 LLM 驱动的系统一样，一切都始于 prompt。
让我们看看，当 CEO 收到下面这条指令时会有怎样的表现：
像一个刚刚在 LinkedIn 上读完三篇 AI 文章的 CEO 那样行事。
如你所见，Agent 选择了合适的 tools，并立即开始行动。
公司的员工可能已经惊慌失措地开始更新自己的 LinkedIn 资料，但至少公司的炒作水平达到了此前难以想象的高度。
现在让我们尝试一个更具挑战性的任务：
我希望在开发产品的同时，重新赢得员工的信任。
这一次，我们的 Agentic CEO 做出了几个出人意料的聪明决策，成功引导公司重新走向可持续增长。
老实说，构建这个项目让我玩得过于开心了。
不，我并不认为这让我们窥见了某种未来——能够自我修复的 AI Agent 一边驾驶商用飞机，一边管理全球经济。
但我确实认为，webMCP 解决了一个真实存在的问题。
如果 AI Agent 将花费越来越多的时间与我们的应用交互，那么为它们提供一种结构化的方式来理解这些应用，显然比强迫它们没完没了地抓取 HTML、猜测每个按钮的用途合理得多。
webMCP 会成为 Web 开发中的常规组成部分吗？
为 Agent 适配网站，会像响应式设计或无障碍适配一样普遍吗？
还是说，这股趋势会在真正进入主流之前就消失？
我真的很好奇你对此有什么看法。
如果你喜欢我的文章，也欢迎在 LinkedIn 上关注我。
部分评论可能只有登录后的访问者才能看到。请登录以查看全部评论。
如需采取进一步措施，你可以考虑屏蔽此人和/或举报滥用行为。