OpenTiny NEXT-SDK深度测评：四步打造智能前端应用

2026-06-11阅读 0热度 0

现实来说，AI Agent 浪潮下，用户早已不满足于单纯的问答交互。核心诉求是让 AI 真正替你执行任务、完成操作。

如今，AI 执行任务的场景快速扩展：编写代码、生成视频、制作演示文稿、输出设计稿……但一个关键问题常被忽略：AI 能否直接操控浏览器页面？

我们团队推出的 OpenTiny NEXT‑SDK，正是为了解决这一难题。

1 概述

OpenTiny NEXT‑SDK 是一套专为前端智能应用打造的工具集，基于 MCP（Model Context Protocol）协议，使前端应用能快速集成 AI Agent，从而实现智能体直接操控用户界面的能力。

具体来说，该工具集帮助开发者完成三大任务：

将普通前端应用快速改造成 MCP Server，从而暴露界面操作能力
让 AI Agent（WebAgent）通过标准 MCP 协议读取页面、调用功能、执行操作
快速集成 AI 对话组件（如 TinyRobot），构建智能交互前端

2 核心优势

NEXT‑SDK 基于 MCP 协议实现，将 MCP 能力扩展到 Web 端，使 Web 应用也能被 AI 操纵。具体优势体现在以下方面：

拓展 MCP 工具范围：为 Agent 智能体提供更多 MCP 工具，实现本地/云服务 MCP 工具无法完成的功能——直接操控前端应用。相比 RPA 方案（Browser Use / Computer Use）更快速、更精准、成本更低
全面兼容 MCP 生态：所有前端应用均采用标准 MCP 协议声明 MCP Server，并通过标准 MCP 通信方式（如 Streamable HTTP）连接，无缝融入现有 MCP 生态，兼容当前及未来各类 MCP Host 应用
支持智能体交互范式：传统前端以人机交互为主——用户手动操作 UI 组件。引入 NEXT-SDK 后，Agent 智能体借助 MCP 工具读取界面信息、调用功能，结合生成式 UI 实现全新智能体交互模式
丰富的前端智能化方案：不仅支持 Web 应用前端智能化改造，还覆盖 AI 应用（对话框）的多端部署场景——浏览器扩展、Web 页面集成、终端内置 AI 助手均可直接或间接调用前端应用的 MCP 工具

3 演示动画

通过一个演示动画，你能更直观地了解 NEXT-SDK 的实际效果。

接入 NEXT-SDK 的前端应用，右下角会显示一个机器人图标。点击后，侧边弹出 AI 对话框，你可以用自然语言与 AI 对话，让 AI 直接帮你操作前端应用。

例如，输入：

帮我创建以下用户，用户信息如下：
邮箱：zhangsan@sina.com
密码：Abc123456
用户名：zhangsan

AI 将调用页面中名为 add-user 的 MCP 工具，自动完成用户创建。

我们还提供了一个 Playground 代码演练场，供你在线体验：
NEXT‑SDK Playground：https://playground.opentiny.design/next-sdk

4 快速集成

使用 OpenTiny NEXT-SDK，仅需四个步骤即可将前端应用转变为智能应用。

第一步：安装依赖

npm install @opentiny/next-sdk

第二步：创建 MCP Client

在 Web 应用的主入口（如 Vue 项目的 App.vue 文件）中定义 WebMcpClient。

import { onMounted, provide } from 'vue'
import { WebMcpClient, createMessageChannelPairTransport } from '@opentiny/next-sdk'

onMounted(async () => {
  const [serverTransport, clientTransport] = createMessageChannelPairTransport()
  provide('serverTransport', serverTransport)

  const client = new WebMcpClient()
  await client.connect(clientTransport)
  const { sessionId } = await client.connect({
    agent: true,
    url: 'https://agent.opentiny.design/api/v1/webmcp-trial/mcp'
  })
})

注意：sessionId 由 WebAgent 服务生成，用于唯一标识被操控的 Web 应用（被控端）。

第三步：创建 MCP Server

在 Web 应用的子页面（如 views/page1.vue）中定义 WebMcpServer。每个页面可定义自己的 WebMcpServer，页面切换时 MCP Client 自动连接当前页面的 MCP Server，并断开与前一页面的连接。

import { onMounted, inject } from 'vue'
import { WebMcpServer, z } from '@opentiny/next-sdk'

onMounted(async () => {
  const serverTransport = inject('serverTransport')
  const server = new WebMcpServer({
    name: 'mcp-server-page1',
    version: '1.0.0'
  })

  server.registerTool(
    'demo-tool',
    {
      title: '演示工具',
      description: '一个简单工具',
      inputSchema: { foo: z.string() }
    },
    async (params) => {
      console.log('params:', params)
      return { content: [{ type: 'text', text: `收到: ${params.foo}` }] }
    }
  )

  await server.connect(serverTransport)
})

至此，你的前端应用已具备被 AI 操控的能力。各类 MCP Host 均可直接使用。

第四步：添加 AI 遥控器

我们提供了开箱即用的 AI 对话框组件，支持 PC 端和移动端，像遥控器一样通过对话操控前端应用。

安装遥控器组件：

npm install @opentiny/next-remoter

在 Vue 项目中引入：

<script setup lang="ts">
import { TinyRemoter } from '@opentiny/next-remoter'
import '@opentiny/next-remoter/dist/style.css'

const sessionId = 'your-session-id'
</script>

遥控器在应用右下角显示图标，悬浮后可选择：

弹出 AI 对话框：在应用侧边打开 AI 对话界面
显示二维码：手机扫码后打开移动端遥控器

无论是 PC 端还是移动端，都能通过自然语言对话让 AI 帮你操作应用，显著提升效率。

更多用法参见 NEXT‑SDK 官网文档：https://docs.opentiny.design/next-sdk

5 立即行动

在 AI 技术持续迭代的当下，前端智能化已从“高端需求”进化为提升产品竞争力、操作效率的核心要素。

OpenTiny NEXT-SDK 将前端 AI 集成从“复杂踩坑”变为“5 分钟上手”。你的应用可迅速获得 AI 能力，领跑行业智能化创新。

执行 npm install @opentiny/next-sdk，5 分钟上手实操，快速体验 AI 操控效果
访问 OpenTiny NEXT-SDK 官网：https://opentiny.design/next-sdk，查看项目介绍、API 文档及进阶用法
访问 OpenTiny NEXT-SDK 代码演练场：https://playground.opentiny.design/next-sdk，在线体验 AI 自动操作前端应用
支持项目：https://github.com/opentiny/next-sdk（欢迎点个 star）