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

目前 AI 幫人干活的場景越來越豐富，最常見的就是 AI 幫人寫代碼、做視頻、做 PPT、做設計稿等。

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

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

1 簡介

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

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

• ? 把普通前端應用快速改造為 MCP Server，對外暴露界面操作能力

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

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

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

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

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

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

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

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

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

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

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

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

我們提供了一個 Playground 代碼演練場，你可以在線體驗 NEXT-SDK 的能力。

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

4 快速接入

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

第一步：安裝依賴

                                                           
npm install @opentiny/next-sdk

在 Web 應用的主入口（比如：Vue 項目的 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)
  // 這個 sessionId 是 Web 應用與 WebAgent 服務建立連接后，由 WebAgent 服務生成的，用來唯一標識被操控的 Web 應用（被控端）
  const { sessionId } = await client.connect({
    agent: true,
    url: 'https://agent.opentiny.design/api/v1/webmcp-trial/mcp'
  })
})

在 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')
  // 創(chuàng)建 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)
})

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

第四步：添加 AI 遙控器

我們提供了一個開箱即用的 AI 對話框組件，支持 PC 端和移動端，就像一個遙控器，可以通過對話方式操控你的前端應用。

安裝遙控器組件：

                                                           
npm install @opentiny/next-remoter

在 Vue 項目中使用：

                                                           
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>

遙控器會在你的應用右下角顯示一個圖標，懸浮后可以選擇：

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

• ? 顯示二維碼：手機掃碼后打開移動端遙控器

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

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

5 立即行動

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

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

立即行動，解鎖前端智能化新可能：

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

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

• ? 訪問 OpenTiny NEXT-SDK 代碼演練場：https://playground.opentiny.design/next-sdk，在線體驗 AI 自動操作前端應用

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

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