AI Agent 時(shí)代，人們已經(jīng)不滿足只是與 AI 進(jìn)行問答交互，而是希望 AI 能直接幫人干活。

目前 AI 幫人干活的場(chǎng)景越來越豐富，最常見的就是 AI 幫人寫代碼、做視頻、做 PPT、做設(shè)計(jì)稿等。

你有沒有想過 AI 能幫人操作網(wǎng)頁？

這就是 OpenTiny NEXT-SDK 做的事情。

1 簡(jiǎn)介

OpenTiny NEXT?SDK 是一套面向前端智能應(yīng)用的開發(fā)工具包，核心是基于 MCP（Model Context Protocol） 協(xié)議，讓前端應(yīng)用快速接入 AI Agent，實(shí)現(xiàn)前端界面可被智能體直接操控的能力。

OpenTiny NEXT?SDK 可以幫助開發(fā)者：

• ? 把普通前端應(yīng)用快速改造為 MCP Server，對(duì)外暴露界面操作能力

• ? 讓 AI Agent（WebAgent）通過標(biāo)準(zhǔn) MCP 協(xié)議讀取界面、調(diào)用功能、執(zhí)行操作

• ? 快速集成 AI 對(duì)話組件（如 TinyRobot），構(gòu)建智能交互前端

NEXT?SDK 基于 MCP 協(xié)議實(shí)現(xiàn)，將 MCP 的能力擴(kuò)展到了 Web 端，讓 Web 應(yīng)用也能被 AI 操控，以下是項(xiàng)目?jī)?yōu)勢(shì)：

• ? 擴(kuò)大 MCP 工具范圍 ：為 Agent 智能體提供更多的 MCP 工具，實(shí)現(xiàn)當(dāng)前現(xiàn)有的本地/云服務(wù) MCP 工具所不具備的能力，即操控前端應(yīng)用的能力。這種能力比 RPA 方案（Browser Use / Computer Use）更快（可通過后面的演示視頻感受 AI 操作的效率）、更準(zhǔn)、更經(jīng)濟(jì)（消耗更少 Token）

• ? 完全兼容 MCP 生態(tài) ：所有的前端應(yīng)用都采用標(biāo)準(zhǔn)的 MCP 協(xié)議聲明 MCP Server，并且基于標(biāo)準(zhǔn)的 MCP 通訊方式進(jìn)行連接，比如 Streamable HTTP，意味著能完全融入現(xiàn)有的 MCP 生態(tài)，兼容現(xiàn)有乃至未來的 MCP Host 應(yīng)用

• ? 支持智能體交互范式 ：當(dāng)前的前端應(yīng)用主要還是人機(jī)交互，即人手動(dòng)操作前端界面上的 UI 組件。引入 OpenTiny NEXT-SDK 之后，Agent 智能體可以借助 MCP 工具讀取前端界面的信息、調(diào)用前端界面的功能，配合生成式 UI 實(shí)現(xiàn)新的智能體交互范式

• ? 多樣的前端智能化方案 ：不僅支持 Web 應(yīng)用的前端智能化改造，還全面覆蓋 AI 應(yīng)用（對(duì)話框）的多端部署場(chǎng)景——無論是瀏覽器擴(kuò)展、Web 頁面集成，還是各終端內(nèi)置的 AI 助手，均可直接或間接調(diào)用前端應(yīng)用中的 MCP 工具

我們一起來看一個(gè)演示視頻（視頻無剪輯、無加速，AI 操作頁面的真實(shí)速度），直觀感受下 NEXT-SDK 的能力吧！

接入 NEXT-SDK 的前端應(yīng)用，右下角會(huì)出現(xiàn)一個(gè)機(jī)器人圖標(biāo)，點(diǎn)擊這個(gè)圖標(biāo)會(huì)從側(cè)邊彈出 AI 對(duì)話框，我們可以使用自然語言與 AI 對(duì)話，讓 AI 幫我們操作前端應(yīng)用。

比如我們可以輸入以下內(nèi)容：

                                                           幫我創(chuàng)建以下用戶，用戶信息如下：
郵箱：zhangsan@sina.com
密碼：Abc123456
用戶名：zhangsan

這時(shí) AI 會(huì)調(diào)用頁面中定義的名為 add-user 的 MCP 工具，幫我們創(chuàng)建 zhangsan 這個(gè)用戶。

我們提供了一個(gè) Playground 代碼演練場(chǎng)，你可以在線體驗(yàn) NEXT-SDK 的能力。

NEXT-SDK Playground：https://playground.opentiny.design/next-sdk

4 快速接入

使用 OpenTiny NEXT-SDK，只需要以下四步，就可以把你的前端應(yīng)用變成智能應(yīng)用。

第一步：安裝依賴

                                                           
npm install @opentiny/next-sdk

在 Web 應(yīng)用的主入口（比如：Vue 項(xiàng)目的 App.vue 文件）定義 WebMcpClient。

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

 onMounted(async () => {
  // 創(chuàng)建通信通道
  const [serverTransport, clientTransport] = createMessageChannelPairTransport()
  provide('serverTransport', serverTransport)

   // 創(chuàng)建 MCP Client
  const client = new WebMcpClient()
  await client.connect(clientTransport)
  // 這個(gè) sessionId 是 Web 應(yīng)用與 WebAgent 服務(wù)建立連接后，由 WebAgent 服務(wù)生成的，用來唯一標(biāo)識(shí)被操控的 Web 應(yīng)用（被控端）
  const { sessionId } = await client.connect({
    agent: true,
    url: 'https://agent.opentiny.design/api/v1/webmcp-trial/mcp'
  })
})

在 Web 應(yīng)用的子頁面（比如：views/page1.vue）中定義 WebMcpServer，每個(gè)頁面可以定義自己的 WebMcpServer，頁面切換時(shí)，MCP Client 會(huì)與當(dāng)前頁面的 MCP Server 建立連接，并丟棄與之前頁面的連接。

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

 onMounted(async () => {
  const serverTransport = inject('serverTransport')
  // 創(chuàng)建 MCP Server
  const server = new WebMcpServer({
    name: 'mcp-server-page1',
    version: '1.0.0'
  })

   // 定義 MCP 工具
  server.registerTool(
    'demo-tool',
    {
      title: '演示工具',
      description: '一個(gè)簡(jiǎn)單工具',
      inputSchema: { foo: z.string() }
    },
    async (params) => {
      console.log('params:', params)
      return { content: [{ type: 'text', text: `收到: ${params.foo}` }] }
    }
  )

   await server.connect(serverTransport)
})

完成！現(xiàn)在你的前端應(yīng)用已經(jīng)變成智能應(yīng)用，可以被 AI 操控了，你可以通過各類 MCP Host 來操控智能應(yīng)用。

第四步：添加 AI 遙控器

我們提供了一個(gè)開箱即用的 AI 對(duì)話框組件，支持 PC 端和移動(dòng)端，就像一個(gè)遙控器，可以通過對(duì)話方式操控你的前端應(yīng)用。

安裝遙控器組件：

                                                           
npm install @opentiny/next-remoter

在 Vue 項(xiàng)目中使用：

                                                           
import { TinyRemoter } from '@opentiny/next-remoter'
import '@opentiny/next-remoter/dist/style.css'

 // 使用第二步獲取的 sessionId
const sessionId = 'your-session-id'
 
 script>

 
      :session-id="sessionId" 
    title="我的智能助手"
  />
 
 template>

遙控器會(huì)在你的應(yīng)用右下角顯示一個(gè)圖標(biāo)，懸浮后可以選擇：

• ? 彈出 AI 對(duì)話框：在應(yīng)用側(cè)邊打開 AI 對(duì)話界面

• ? 顯示二維碼：手機(jī)掃碼后打開移動(dòng)端遙控器

不管是 PC 端還是移動(dòng)端，都可以通過自然語言對(duì)話的方式讓 AI 幫你操作應(yīng)用，極大提升工作效率！

如果你想了解更多 NEXT-SDK 的用法，請(qǐng)參考 NEXT-SDK 官網(wǎng)文檔：https://docs.opentiny.design/next-sdk

5 立即行動(dòng)

在 AI 技術(shù)快速迭代的今天，前端智能化不再是“高端需求”，而是提升產(chǎn)品競(jìng)爭(zhēng)力、提升操作效率的核心能力和必選項(xiàng)。

OpenTiny NEXT-SDK 讓前端 AI 集成，從“復(fù)雜踩坑”到“5分鐘上手”，讓你的應(yīng)用瞬間擁有 AI 能力，領(lǐng)跑行業(yè)智能化創(chuàng)新！

立即行動(dòng)，解鎖前端智能化新可能：

• ? 執(zhí)行 npm install @opentiny/next-sdk 安裝 OpenTiny NEXT-SDK，5分鐘上手實(shí)操，快速體驗(yàn) AI 操控效果

• ? 前往 OpenTiny NEXT-SDK 官網(wǎng)：https://opentiny.design/next-sdk，查看詳細(xì)的項(xiàng)目介紹、API 文檔和進(jìn)階用法

• ? 訪問 OpenTiny NEXT-SDK 代碼演練場(chǎng)：https://playground.opentiny.design/next-sdk，在線體驗(yàn) AI 自動(dòng)操作前端應(yīng)用

• ? 添加 OpenTiny 微信小助手： opentiny-official ，加入 OpenTiny 技術(shù)交流群，獲取一對(duì)一集成指導(dǎo)，解決實(shí)操難題，與同行交流 AI 前端集成經(jīng)驗(yàn)

如果你有任何問題，歡迎在評(píng)論區(qū)留言交流！