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

前端开源星球
0 阅读5分钟

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）更快（可通过后面的演示视频感受 AI 操作的效率）、更准、更经济（消耗更少 Token）

  • 完全兼容 MCP 生态：所有的前端应用都采用标准的 MCP 协议声明 MCP Server，并且基于标准的 MCP 通讯方式进行连接，比如 Streamable HTTP，意味着能完全融入现有的 MCP 生态，兼容现有乃至未来的 MCP Host 应用

  • 支持智能体交互范式：当前的前端应用主要还是人机交互，即人手动操作前端界面上的 UI 组件。引入 OpenTiny NEXT-SDK 之后，Agent 智能体可以借助 MCP 工具读取前端界面的信息、调用前端界面的功能，配合生成式 UI 实现新的智能体交互范式

  • 多样的前端智能化方案：不仅支持 Web 应用的前端智能化改造，还全面覆盖 AI 应用（对话框）的多端部署场景——无论是浏览器扩展、Web 页面集成，还是各终端内置的 AI 助手，均可直接或间接调用前端应用中的 MCP 工具

3 演示动画

我们一起来看一个演示动画（无剪辑、无加速，AI 操作页面的真实速度），直观感受下 NEXT-SDK 的能力吧！

AI创建用户.gif

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

比如我们可以输入以下内容：

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

这时 AI 会调用页面中定义的名为 add-user 的 MCP 工具，帮我们创建 zhangsan 这个用户。

我们提供了一个 Playground 代码演练场，你可以在线体验 NEXT-SDK 的能力。

NEXT-SDK Playground：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 官网文档：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 官网：opentiny.design/next-sdk，查看详细的项目介绍、API 文档和进阶用法

  • 访问 OpenTiny NEXT-SDK 代码演练场：playground.opentiny.design/next-sdk，在线体验 AI 自动操作前端应用

  • 添加 OpenTiny 微信小助手：opentiny-official，加入 OpenTiny 技术交流群，获取一对一集成指导，解决实操难题，与同行交流 AI 前端集成经验

如果你有任何问题，欢迎在评论区留言交流！

avatar
文章
阅读
粉丝