2.1 MCP 官方 SDKs

左上角是 MCP 官方多语言 SDKs，包括 TypeScript、C#、Python 等。我们的方案是让开发人员使用官方 SDKs 在自己的前端应用中创建 MCP Server。例如，在 Web 应用中使用 TypeScript SDK 在页面中创建；在桌面应用中可使用 C#、Python 等 SDKs；在移动应用中可使用 Swift、Kotlin 等。需要说明的是，演示视频中的桌面应用基于 Electron 构建，移动应用基于 uni-app 构建，两者都借助 WebView 将静态 Web 页面封装为具有原生体验的应用。

我们将这些嵌入 MCP Server 的前端应用称为 "受控端"。为使 Agent 智能体能够调用受控端中的 MCP Server，开发人员还需调用 OpenTiny NEXT 提供的 SDKs（目前仅提供 TypeScript，后续将提供与 MCP 官方对应的多语言版本），使受控端能够连接我们的 WebAgent 服务。

2.2 MCP 连接的技术细节

开发人员创建 MCP Server 后，还需同时创建 MCP Client，并使用我们提供的 connect 方法将 MCP Client 连接到 WebAgent 服务。connect 方法包含一个 url 参数，其值为 WebAgent 的服务地址。连接方式支持 MCP 官方的 Streamable HTTP 和 SSE，同时也支持 WebSocket 等基于 MCP 官方 Transport 扩展的通讯方式。

2.3 WebMCP 工具

connect 方法连接成功后，将返回 sessionId 和 transport 对象。同时，WebAgent 服务会创建与该 MCP Client 对应的孪生 Client 对象，并以 sessionId 为键存储到 MCP 工具库中。当在 WebAgent 服务中调用孪生 Client 的 callTool 方法时，请求会通过已建立的 Streamable HTTP 等通道转发到前端应用的 MCP Client，等效于在前端执行 callTool。这样，连接 WebAgent 的智能体就可以调用前端应用中的 MCP 工具，我们将这些工具称为 WebMCP 工具。

2.4 按需使用的 WebMCP 工具

WebMCP 工具不同于本地系统搭建的 MCP 工具或部署在互联网上的 MCP 云服务，不能放在传统的 MCP 市场。因为后者通常是固定、静态的，而 WebMCP 工具是临时的、动态的，只有在用户打开应用时才存在，关闭后就会消失。例如，Web 页面中的 MCP Server 脚本仅在页面打开时运行，关闭后即失效。因此，WebMCP 工具类似于小程序，按需使用，用完即弃。

2.5 MCP 工具的 sessionId

前面提到 connect 方法返回的 sessionId 用于区分不同前端应用。例如，在同一浏览器中打开多个相同 Web 应用的标签页时，需通过 sessionId 确定调用哪个标签页里的 MCP Server。在演示视频中，AI 应用扫描二维码是为了获取带 sessionId 的 WebAgent 服务地址。智能体调用 WebMCP 工具时会附带 sessionId，WebAgent 根据 sessionId 到 MCP 工具库里查找对应的工具，若找不到则说明应用已关闭或断开。WebAgent 服务会监听连接断开事件，主动从工具库中删除已失效的 WebMCP 工具。

2.6 切换路由的 MCP Server

除应用关闭或断开导致 MCP Server 无法访问外，另一种情况是 SPA 类的 Web 应用，这类应用在切换页面路由时，会加载不同的子应用，而每个子应用可以定义不同的 MCP Server。因此，在 SPA 应用的 MCP Client 调用工具前，通常先调用 listTools 查询当前可用工具，以避免因路由切换导致原有的 MCP Server 不可访问。我们可以将 "切换页面路由" 封装为一个 MCP 工具，智能体可先自动切换到相关子应用，再调用该子应用的 MCP Server。

2.7 自动打开 Web 页面

由于 WebMCP 工具需用户打开前端应用才能被调用，若完成一项任务需打开多个应用，能否实现自动化？针对企业 Web 应用，我们提供模拟浏览器的 UI 组件。比如，用户登录企业门户后，智能体可通过 MCP 工具调用该 UI 组件，此时 UI 组件会根据 MCP 工具调用的网址参数，自动打开企业内部多个 Web 应用。

2.8 二维码的授权方式

演示视频中，扫码是用户授权智能体的一种方式。除二维码外，我们还提供识别码（六位字母和数字组合）和 URL 共三种方式。用户打开应用后，可自行扫码授权智能体，也可将二维码、识别码或 URL 发送给可以信任的人代为操作（如订机票、酒店等）。这种授权方式与企业的权限管理系统完全解耦，是轻量且高效的解决方案。

2.9 完全兼容现有 MCP 生态

我们支持在各类 AI 应用中接入 WebMCP 工具：在智能体开发平台（如 n8n、Dify、Coze）的工作流节点中定义 MCP Server（输入带 sessionId 的 URL）；也支持在 Cursor、Claude、VSCode Copilot 等 IDE 中添加 MCP Server，实现在 IDE 的 AI 对话框中以自然语言的方式调用 WebMCP 工具。现有各类 MCP Host 我们是无法改动的，所以我们的设计方案完全遵循 MCP 标准协议，避免使用私有协议，因而能完全兼容现有的 MCP 生态。

2.10 扩展生态，改变架构

我们基于 MCP 官方的 Transport 接口实现桥接，即连接 AI 应用中的 MCP Client 与前端应用中的 MCP Server。Agent 一词兼具智能体与代理两层含义，我们的 WebAgent 服务就是网络智能体代理服务。我们完全支持 MCP 协议中所有特性（包括 Tools、Resources、Prompts、Sampling 等），与那些仅将 MCP Tool 当作 Function Call 的方案不同。整体设计图的右半部分完全可以由开发者自行实现，我们只是在 MCP 工具库中新增动态的 WebMCP 工具，以轻量化的 NEXT-SDK 扩展当前 MCP 生态，改变现有 AI 应用的架构。

三、如何实现前端应用智能化

以下示意图详细说明开发者如何借助 OpenTiny NEXT 实现前端应用智能化：

3.1 人机交互流程

用户通过鼠标键盘操作，输入账号密码登录系统，在出差申请页面填写出发地、目的地、日期等信息，点击 "立即申请" 按钮触发 submit 脚本，该脚本获取页面数据并向后端 API 提交 POST 请求。这是传统的人机交互流程。

3.2 智能体交互流程

开发者在出差申请页面中添加脚本，通过 mcpServer.registerTool 定义 MCP 工具（参数包括出发地、目的地、出发日期、离开日期），工具的回调函数也调用相同的后端 API，与 submit 方法类似。用户在 AI 应用中以自然语言提出需求，智能体理解意图后通过 mcpClient.callTool 调用该工具，参数由智能体解析自然语言获得。这是智能体的交互流程。

3.3 低成本的智能化改造

智能体交互与人机交互都调用同一个后端 API，因此该方案无需修改后端代码，只在前端添加脚本，不会影响现有业务。若将后端 API 全面 MCP 化再由智能体调用，则改造成本显著提高。这是因为企业级 API 通常结构复杂，直接转换容易导致数据量过大、参数深度依赖等问题，让大模型无法直接调用。并且改造后还需维护两套生产环境，成本更高。

3.4 前端 MCP 工具的数量

我们认为，前端 MCP Server 应避免操作 UI 组件，而应调用后端 API。MCP Server 定义的数量应小于或等于后端 API 数量，因为部分后端 API（如下拉框选项）已在页面加载时调用。我们不需要关注前端界面组件，原有前端界面的 UI 交互已转移到采用生成式 UI 技术的 AI 应用。若智能体执行过程中需要用户确认一些信息，AI 应用可通过生成式 UI 技术动态渲染交互内容。例如查询机票时若无直达航班，智能体会提示用户选择其他方案，而非直接返回任务失败。

3.5 MCP 工具的权限控制

用户登录后，前端界面仅显示用户权限范围内的数据，并且用户也不能操作其权限范围外的数据。由于 MCP 工具是该应用的开发者定义的，智能体相当于以用户的身份读取和操作数据，因而整个过程安全透明。当用户在多个应用同时登录，假设用户在各应用中的权限都不相同，因为 MCP 工具都是在用户登录这些应用之后定义的，即便用户权限不同，也不会导致智能体产生越权问题。倘若智能体直接调用已经 MCP 化的后端 API，则需考虑设定智能体读取和操作数据的权限，确保智能体不会在多个应用中越权操作。

3.6 Web 应用智能化案例

以 HTML 页面智能化为例，开发者需编写以下代码：

1. 首先在页面头部引入 webmcp.js，获取 OpenTiny NEXT 提供的 API；

2. 创建基于 Message Channel 实现的 Transport，用于前端 MCP Server 与 MCP Client 通信；

3. 创建 MCP Server，注册工具、资源和提示（代码与 MCP 官网示例一致）；

4. 创建 MCP Client，按规范调用 callTool、readResource、getPrompt 等方法；

5. 调用 connect 方法连接 WebAgent（参数为服务地址），返回 sessionId 和 Transport 对象。

实操演示：https://live.csdn.net/v/494057

运行结果如上所示，浏览器控制台展示 MCP Client 调用 MCP Server 的结果。我们将 URL 复制到 MCP Inspector 网站，可以看到 MCP Inspector 能远程调用页面中的 MCP 工具。由于 MCP Inspector 是 MCP 官方的测试验证平台，而我们支持 MCP Inspector 所有的测试验证功能，因此证明我们完全支持 MCP 的标准协议，能与现有 MCP 生态完全兼容。

总结

OpenTiny NEXT 支持将海量的企业前端应用转变为 MCP 工具，实现智能化改造，这将极大丰富 MCP 的生态。我们提供低成本、轻量化的企业应用智能化改造方案，通过运用逆向思维将 MCP Server 放在前端运行，解决了 GUI 方案存在的性能等问题。我们不仅支持 Web 应用，还通过 WebView 支持桌面应用、移动应用甚至鸿蒙应用。除 TypeScript 外，我们将陆续推出 MCP 官方支持的其他语言版本，助力企业应用低本高效智能化转型。