组合拳（WebMCP + WebSkills + WebAgent）是目前将传统前端应用升级为“智能体驱动”的最高效路径

组合拳WebMCP WebSkills WebAgent是目前将传统前端应用升级为“智能体驱动”的最高效路径。它本质上构建了一个**“前端自描述 AI 调度 跨端执行”**的闭环体系让 AI 能真正理解并操作你的业务界面而非仅仅进行问答。一、 角色定位与分工在落地实践中这三个技术概念并非并列关系而是基础设施、知识库、调度中枢的分层协作模块定位落地形态核心价值WebMCP能力底座前端 MCP Server将页面功能暴露为结构化工具Tools让 AI 能“调用”前端的函数实现精准操作如跳转、提交WebSkills业务大脑结构化文档RAG或 Prompt 工程让 AI 懂业务语义如“价保”是什么流程解决“懂但不会做”的问题WebAgent调度中枢运行在云端或本地的 Agent 推理引擎连接用户指令、Skills 知识和 MCP 工具负责任务规划与执行二、 最佳实践 SOP以 OpenTiny 方案为例基于 OpenTiny NEXT 等成熟方案企业级落地的标准化流程通常遵循以下五步1. 环境准备安装 SDK# 以 Vue 项目为例pnpmaddopentiny/next-sdk opentiny/next-remoter关键配置在入口文件如main.ts中注入路由导航器这是实现“页面级工具”自动跳转的前提。// main.tsimport{setNavigator}fromopentiny/next-sdk;importrouterfrom./router;// 关键告诉 SDK 如何跳转页面setNavigator((route)router.push(route));2. 定义工具将功能“AI 化”在mcp-servers/目录下将业务功能封装为 MCP Tool。最佳实践是区分“全局工具”与“页面工具”。全局工具在任何页面都能调用如查询用户信息。页面工具PageTool必须跳转到特定页面才能执行如“创建价保单”需先进入价保页面。// mcp-servers/price-protection/tools.tsimport{registerPageTool}fromopentiny/next-sdk;exportdefaultfunctionregisterPriceProtectionTools(){// 注册页面工具自动导航到 /price-protection 页面并执行逻辑registerPageTool({name:create_price_protection_application,description:为用户创建价保申请单,route:/price-protection,// 目标路由inputSchema:{type:object,properties:{username:{type:string},amount:{type:number},reason:{type:string}}},// 页面内执行逻辑通过 MessageChannel 通信implementation:async(args){// 调用页面组件的具体方法returnawaitwindow.pageBridge.createApplication(args);}});}3. 注入知识WebSkills 配置WebSkills 通常以 Markdown 文档形式存在需在 RemoterAI 对话面板侧加载。内容定义业务术语、操作 SOP、权限规则如“只有管理员才能审核”。作用大幅降低 AI 的幻觉率确保它按公司规范办事。4. 建立连接WebAgent 桥接通过useWebAgentServer将前端的 WebMCP Server 桥接到远端的 Agent 平台如 OpenTiny Cloud。本地开发通常使用createMessageChannelPairTransport建立本地通信。生产环境通过 WebSocket 连接云端 Agent实现跨设备遥控。5. 交互体验WebAgent 远程遥控这是该体系的杀手级功能。用户无需在桌面端操作桌面端页面展示二维码含sessionId。手机扫码连接桌面端页面自动注册工具。用户在手机端输入“帮我给王五创建 1000 元价保”WebAgent 解析后通过 WebMCP 调用桌面端工具完成操作。三、 三大技术栈适配策略框架接入策略关键注意点Vue原生支持直接使用TinyRemoterVue 组件接入成本最低。React混合模式推荐使用iframe嵌入 Vue 版本的 Remoter通过postMessage通信。Angular微应用桥接由于依赖差异主应用跑 Angular WebMCP另起一个 Vue 微应用跑 Remoter通过MessageChannel连接。四、 避坑指南与安全考量权限控制最重要WebMCP 工具运行在用户当前会话上下文中。切勿暴露超级管理员工具给普通用户。必须在工具实现层做二次权限校验if (!user.isAdmin) throw error。工具粒度不要写“万能工具”。工具应细粒度化如searchOrders和exportOrders分开避免 AI 误操作。降级处理确保 WebMCP 连接失败时页面基础功能不受影响Graceful Degradation。五、 资源与示例官方示例OpenTiny 提供了完整的 Vue / Angular 示例工程packages/doc-ai建议直接 Clone 调试。SDK 文档https://opentiny.design/next-sdk总结这套实践的核心是**“前端自我描述”**。你不再需要为 AI 单独写一套后端接口而是让前端自己告诉 AI“我现在有什么功能你可以这么用。” 这对于 B 端后台管理系统、ERP 等复杂表单场景的效率提升是颠覆性的。