本文由体验技术团队kagol原创。
前言
AI Agent 时代，人们已经不满足只是与 AI 进行问答交互，而是希望 AI 能直接帮人干活。
目前 AI 帮人干活的场景越来越丰富，最常见的就是 AI 帮人写代码、做视频、做 PPT、做设计稿。
你有没有想过 AI 能帮人操作网页？
这就是 OpenTiny NEXT-SDK 做的事情。
1 简介
OpenTiny NEXT‑SDK 是一套面向前端智能应用的开发工具包，核心是基于 MCP（Model Context Protocol） 协议，让前端应用快速接入 AI Agent，实现前端界面可被智能体直接操控的能力。
OpenTiny NEXT‑SDK 可以帮助开发者：
- 把普通前端应用快速改造为 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 组件。引入 OpenTiny 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 工具，帮我们创建 zhangsan 这个用户。
我们提供了一个 Playground 代码演练场，你可以在线体验 NEXT-SDK 的能力。
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)
// 创建 MCP Client
const client = new WebMcpClient()
await client.connect(clientTransport)
// 这个 sessionId 是 Web 应用与 WebAgent 服务建立连接后，由 WebAgent 服务生成的，用来唯一标识被操控的 Web 应用（被控端）
const { sessionId } = await client.connect({
agent: true,
url: 'https://agent.opentiny.design/api/v1/webmcp-trial/mcp'
})
})
第三步：创建 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')
// 创建 MCP Server
const server = new WebMcpServer({
name: 'mcp-server-page1',
version: '1.0.0'
})
// 定义 MCP 工具
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'
// 使用第二步获取的 sessionId
const sessionId = 'your-session-id'
</script>
<template>
<tiny-remoter
:session-id="sessionId"
title="我的智能助手"
/>
</template>
遥控器会在你的应用右下角显示一个图标，悬浮后可以选择：
- 弹出 AI 对话框：在应用侧边打开 AI 对话界面
- 显示二维码：手机扫码后打开移动端遥控器
不管是 PC 端还是移动端，都可以通过自然语言对话的方式让 AI 帮你操作应用，极大提升工作效率！
如果你想了解更多 NEXT-SDK 的用法，请参考 NEXT-SDK 官网文档：https://docs.opentiny.design/next-sdk
5 立即行动
在 AI 技术快速迭代的今天，前端智能化不再是"高端需求"，而是提升产品竞争力、提升操作效率的核心能力和必选项。
OpenTiny NEXT-SDK 让前端 AI 集成，从"复杂踩坑"到"5分钟上手"，让你的应用瞬间拥有 AI 能力，领跑行业智能化创新！
立即行动，解锁前端智能化新可能：
- 执行
npm install @opentiny/next-sdk 安装 OpenTiny NEXT-SDK，5分钟上手实操，快速体验 AI 操控效果
- 前往 OpenTiny NEXT-SDK 官网：https://opentiny.design/next-sdk，查看详细的项目介绍、API 文档和进阶用法
- 访问 OpenTiny NEXT-SDK 代码演练场：https://playground.opentiny.design/next-sdk，在线体验 AI 自动操作前端应用
- 外部添加 OpenTiny 微信小助手：
opentiny-official，加入 OpenTiny 技术交流群，获取一对一集成指导，解决实操难题，与同行交流 AI 前端集成经验
- 支持项目：https://github.com/opentiny/next-sdk （欢迎点个star）
如果你有任何问题，欢迎在评论区留言交流！
