# WebMCP：网页给 Agent 的工具说明书

<div class="grid grid-cols-2 gap-8 mt-8">

<div class="card-blue">
<div class="font-semibold mb-3">一个工具通常描述什么？</div>
<div class="space-y-2 text-sm">

- 名字：工具叫什么
- 描述：什么时候应该调用
- 参数：需要哪些输入
- 执行：调用后做什么业务逻辑
- 返回：成功、失败和结果信息

</div>
</div>

<div class="card-green">
<div class="font-semibold mb-3">它改变了什么？</div>
<div class="space-y-2 text-sm">

- UI 改版不等于能力失效
- Agent 不再猜按钮位置
- 业务边界由开发者定义
- 权限、确认、审计可以前置设计

</div>
</div>

</div>

<div class="mt-8 text-2xl font-bold">
从“AI 操作页面”升级为“页面向 AI 暴露能力”。
</div>

<!--
这一页解释 WebMCP 的核心概念。

最简单的理解方式是：WebMCP 是网页给 AI Agent 的工具说明书。过去网页把最终渲染出来的 UI 给用户看，Agent 如果要操作，只能从这个 UI 反推背后的意图。WebMCP 的方向则是反过来：网页主动告诉 Agent，我有哪些可调用能力，每个能力叫什么，适合什么时候用，需要什么参数，执行后会返回什么结果。

举几个例子会更好理解。一个电商页面可以暴露 add_to_cart 工具，参数是商品 ID、尺码和数量；一个后台系统可以暴露 create_menu 工具，参数是菜单名称、父级菜单、路由和权限标识；一个文档应用可以暴露 summarize_selection 工具，参数是当前选区和摘要长度。Agent 不需要猜按钮在哪里，它只需要判断用户意图和哪个工具匹配。

这对前端开发者很重要。因为以前我们经常担心 AI 乱点页面：点错按钮、误删数据、跳过校验。但如果能力是我们主动暴露出去的，业务边界就能回到开发者手里。哪些动作可以给 Agent 调，哪些动作必须用户确认，哪些动作需要审计，哪些工具只在特定页面或特定权限下出现，这些都可以在设计阶段明确。

所以 WebMCP 不是“让 AI 更会点按钮”。它真正代表的是一个更大的变化：网页从 UI 自动化，走向能力自动化。Agent 不再只是模仿人点页面，而是通过结构化工具参与业务流程。

下一页我们看它大概怎么接入：一种偏声明式，一种偏命令式。
-->