OpenTiny NEXT-SDK 重磅发布：四步把你的前端应用变成智能应用

来源：互联网时间：2026-06-11 08:30:23

实事求是地说，AI Agent 时代，大家已经不满足于跟 AI 一问一答了。真正想要的，是 AI 能直接替人动手干活。

现在 AI 干活儿的场景确实越来越多，写代码、做视频、做 PPT、出设计稿……但可能很少有人想过：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）