博客 / 詳情

返回

TinyVue 智能組件庫：基於 MCP 協議，實現 AI 代替人操作 Web 組件

本文由體驗技術團隊 Kagol 原創。

2025年6月21日，我在華為開發者大會2025（HDC2025）開源論壇做了一場主題分享，給開發者們介紹我們 OpenTiny 團隊基於 MCP 協議實現 AI 代替人操作 Web 組件的技術。

image.png

傳統的 Web 應用都是由人來操作的，用户需要學習幫助文檔，操作成本相對較高，如果能讓 AI 來幫我們操作，我們只需要在關鍵節點進行確認的動作即可，是不是就非常方便？

如果所有 Web 應用都能做智能化改造，讓 AI 能夠理解和操作，每個人都擁有一個虛擬的“個人智能助理”，我們只需要像微信聊天一樣跟個人智能助理“聊天”，用自然語言提出我們的需求，個人助理會自動幫我們操作 Web 應用，實現我們的需求，這將大大提升人們工作和生活的效率和體驗！

OpenTiny 團隊基於 MCP 協議實現了 AI 代替人操作 Web 應用這項技術，並應用到我們的 TinyVue 組件庫中，實現了 TinyVue 組件庫的智能化改造，使用 TinyVue 智能組件庫開發的應用，天然地支持被 AI 識別和操控。

我們還提供了一套各框架的 SDK，支持現有業務快速接入 AI、實現智能化，目前支持 Vue、React、Angular 等前端框架。

由於我們是基於標準的 MCP 協議實現的，具備通用性和廣泛的適用性，可以通過各種不同類型的 MCP Host 來控制 Web 應用，比如可以通過網頁上的 AI 對話框來控制 Web 應用，也可以通過 VSCode Copilot、Cursor 等 IDE 工具，或者通過 Dify、Coze 等智能體平台來操控，甚至可以通過手機App、微信小程序等方式遠程遙控你的 Web 應用，我們可以像微信聊天一樣與 AI 對話，讓 AI 幫我們操作各類 Web 應用，實現我們的需求。

以下是演講的正文。

大家下午好，很高興與大家分享我們 OpenTiny 團隊基於 MCP 協議實現 AI 代替人操作 Web 應用的技術。

這是一個相對新的領域，大家可能都知道通過 AI 智能體調用 MCP 工具，操作電腦上的文件，比如：創建新文件、寫入內容等；大家可能也用過操作數據庫的 MCP Server，比如：mcp\_server\_mysql，可以實現讓 AI 在數據庫中插入一條數據。

但大家可能沒聽過通過 AI 操作網頁上的組件，因為 MCP 官方並不支持這個特性，我們在 MCP 協議基礎上擴展了對 Web 應用的支持。

這也是我接下來要分享的內容。

我叫 Kagol，是華為的一名前端工程師，也是 OpenTiny 開源社區的負責人。

1 什麼是 MCP？

我們這項技術是基於標準的 MCP 協議實現的，因此在分享這項技術之前有必要先簡單介紹下 MCP 的概念。

MCP 全稱是模型上下文協議（Model Context Protocol），它定義了大語言模型與外部世界的交互方式，讓大模型能夠輕鬆地獲取外部數據或調用外部工具。

image.png

圖片來源於網絡

從上圖可以看出，MCP 是一個典型的客户端-服務器架構，主要有三個關鍵的組成部分：

  •  MCP Host 宿主：它是 MCP Client 的運行時環境，負責協調用户、大模型與外部資源之間的交互。它的存在形式可以很多樣，MCP Host 可以是 VSCode Copilot、Cursor 這樣的 IDE 工具，也可以是 Dify、Coze 這樣的智能體平台，也可以是 TinyRobot、Ant Design X、MateChat 這樣的網頁 AI 對話框，甚至可以是一個手機 App、微信小程序等
  •  MCP Client 客户端：Host 內部負責與 Server 交互的組件，Client 由 Host 創建，並與 Server 建立一對一的有狀態會話，會將 Host 的請求轉換為符合 MCP 標準的消息發送給 Server，再將 Server 的響應解析為 Host 可以理解的格式。
  •  MCP Server 服務端：負責定義外部能力的組件，這裏的外部能力可以是讀取本地磁盤的文件、寫入本地數據庫、調用雲服務的接口等。

簡單來説，MCP 就是大模型的“萬能轉接頭”，讓大模型調用外部工具的流程標準化，不需要針對每個大模型都編寫複雜的提示詞。

瞭解 MCP 的這些概念，對於理解我今天要分享的技術很關鍵。

2 我們為什麼要實現 AI 代替人操作 Web 應用？

接下來給大家聊聊為什麼我們要實現 AI 代替人操作 Web 應用這項技術？

傳統的 Web 應用都是由人來操作的，比如我們要在購買一台華為雲的 ECS 服務器，需要進入華為雲 ECS 服務器的頁面，點擊購買按鈕，選擇CPU規格、操作系統鏡像等一大堆配置項，整個過程還是比較繁瑣的。

如果能讓 AI 幫我們操作，我們只需要用自然語言跟 AI 説：

請幫我購買一台 ECS 服務器，價格在 5000 元/年左右？

這時 AI 會去操作 Web 頁面，幫我們完成所有步驟，並在最後付款的步驟讓我確認下就行，是不是就非常方便？

如果所有 Web 應用都能被 AI 操控，每個人都擁有一個虛擬的個人智能助理，我們只需要像微信聊天一樣跟個人智能助理“聊天”，用自然語言提出我們的需求，個人助理會自動幫我們操作 Web 應用，完成我們需要的操作。

這也是我們做這件事的初衷：提升人們工作和生活的效率和用户體驗，推動 Web 應用向着智能化方向邁進！

3 TinyVue 智能組件庫介紹

目前這項技術已經應用到我們的 TinyVue 組件庫中，實現了 TinyVue 組件庫的智能化改造。

我們在 TinyVue 組件庫之上封裝了一套 MCP 工具，把常用的組件功能都做成了 MCP 工具，比如：在表格中插入數據、選中表格行、打開和選擇下拉框數據等，讓 AI 能夠調用這些工具實現對組件的控制。

另外我們還實現了一套各框架的 SDK，方便業務快速接入 AI，實現智能化，目前支持 Vue、React、Angular 等前端框架，一個現有的 Web 應用只需要編寫 10 多行代碼就能接入 AI，被 AI 操控。

我們的技術方案是基於標準的 MCP 協議實現的，具備通用性和廣泛適用性，可以通過各種不同類型的 MCP Host 來控制 Web 應用，既可以通過網頁上的 AI 對話框來控制 Web 應用，也可以通過 VSCode Copilot、Cursor 等 IDE 工具來控制，還可以通過 Dify、Coze 等智能體平台來控制你的 Web 應用。

4 效果演示

我們錄了幾個視頻，給大家直觀地看看做出來的效果。

先看第一個視頻：通過網頁上的 AI 對話框控制 Web 應用。

演示視頻地址：https://www.bilibili.com/video/BV1cXKnzFE6F/

image.png

左邊是我們 TinyVue 官網的表格組件，中間是一個公司列表，表格中的每一行是一家公司的信息，包括公司名稱、員工數等，右側有一個 AI 對話框，我們可以在裏面輸入：幫我選中員工數最多的公司，這時 AI 會自動在表格中找到員工數最多的公司，並選中它。

第二個視頻演示如何在 VSCode Copilot 中通過文字對話的方式操控 Web 應用。

演示視頻地址：https://www.bilibili.com/video/BV1foKnzxEwm/

image.png

視頻左邊是一個 ECS 服務器購買頁面，可以選擇服務器的 CPU 規格、操作系統鏡像等，右邊是一個 VSCode Copilot 界面，我們同樣可以輸入：幫我選中最貴的 CPU 規格，這時 AI 會在 CPU 規格表格中找到價格最高的 CPU 規格，並選中它。

第三個視頻和第二個很類似，差別在於第三個視頻是在 VSCode Copilot 中通過語音的方式操控 Web 應用。

演示視頻地址：https://www.bilibili.com/video/BV1zoKnz4Eyu/

image.png

VSCode Copilot 目前是支持語音錄入的，可以看到 Copilot 的對話框左下角有一個麥克風的圖標，點擊這個圖標就可以語音對話了。

這有什麼使用場景呢？

比如：我正在 VSCode 中寫代碼，寫完之後想要提交 PR，這時可以不用打開 GitHub 網站，而是在 VSCode Copilot 中説一句話：幫我提交 PR，AI 會自動在 GitHub 網站中幫我們提交 PR，是不是就非常方便？

第四個視頻演示在 Dify 搭建的 AI 應用中控制 Web 應用。

演示視頻地址：https://www.bilibili.com/video/BV1JoKnz4E5w/

image.png

前面提到，MCP Host 的存在方式很廣泛，除了上面幾種之外，還可以是一個手機 App、微信小程序等，我們可以像微信聊天一樣與 AI 對話，讓 AI 幫我們操作各類 Web 應用，實現我們的需求。

這個世界上很多應用都是以 Web 的方式存在的，AI 操作 Web 應用擁有非常廣泛的應用場景，大家可以大膽發揮想象！

5 實現原理

看完演示效果，接下來給大家分享我們是如何實現這項技術的。

5.1 整體架構

先來看下整體架構圖。

image.png

底層是 OpenTiny NEXT 提供的 createTransportPair 工具，這是實現純前端 AI 操控 Web 應用的關鍵。

在 Web 應用層，我們提供 Vue 版本的 NEXT SDK：@opentiny/next-vue，讓 Web 應用只需要寫不到 10 行代碼就能輕鬆定義 MCP Client 和 MCP Server。

為了方便 AI 做操作 TinyVue 組件，我們給 TinyVue 組件庫封裝一系列 MCP 工具：@opentiny/tiny-vue-mcp。

我們還提供 Agent 服務端，實現 AI 和 Web 應用之間的 SSE / Streamable 連接和通信。

5.2 時序圖

看完整體架構，我們再來看下開發視角的時序圖。

image.png

先是用户在 MCP Host 的 AI 對話框中，通過自然語言描述需求，比如：幫我選擇最便宜的 CPU 規格。

AI 大模型調用我們提供的 MCP 工具，這個 MCP 工具是由業務傳入的業務邏輯和組件的 MCP 工具組合而成的，是帶有業務屬性的，可以精確操作 Web 應用，實現業務功能。

next-sdk 提供定義 MCP 工具的方法 defineTool，tiny-vue-mcp 調用該方法定義組件的 MCP 工具，比如選中表格數據（set\_selected），這個 MCP 工具內部調用表格組件的 setSelected 方法實現表格選中操作。

定義組件 MCP 工具的部分代碼：

tools: {
getTableData: {
    paramsSchema: z.boolean().optional().describe(t('ai.grid.getTableData')),
    cb: (instance) => {
      const tableData = instance.getData()
      return { type: 'text', text: JSON.stringify(tableData) }
    }
  },
setSelection: {
    paramsSchema: z.number().optional().describe(t('ai.grid.setSelection')),
    cb: (instance, value) => {
      const tableData = instance.getData()
      const targetRow = tableData[value]
      if (targetRow) {
        instance.setSelection(targetRow, true)
        return { type: 'text', text: 'success' }
      }
    }
  },
insertRow: {
    paramsSchema: z.record(z.any()).optional().describe(t('ai.grid.insertRow')),
    cb: (instance, value) => {
      instance.insert(value)
      return { type: 'text', text: 'success' }
    }
  },
  ...
}

6 如何接入 TinyVue 智能組件庫

現有的 Web 應用都是設計成給人操作的，要讓 AI 能夠識別和操控，就需要做適當的改造，這是必須要做的，藉助我們 OpenTiny 提供的智能化解決方案，你只需要少量代碼就可以接入 AI。

如果你的 Web 應用是使用 TinyVue 智能組件庫搭建的，就天然包含了一系列方便 AI 操作頁面的 MCP 工具，你只需要引入我們提供的 TinyVueMCP 軟件包和 SDK 工具，連接我們提供的 Agent 服務，給你的 Web 應用補充必要的業務信息，就能被 AI 識別和操控啦。

如果你的 Web 應用沒有使用我們的 TinyVue 智能組件庫，就需要自己實現一套 MCP 工具，其他步驟都是相同的。

6.1 安裝依賴

npm install @opentiny/tiny-vue-mcp @opentiny/next-vue @opentiny/vue-common @opentiny/vue

6.2 引入 TinyVue 組件

<script setup lang="ts">
// 引入 TinyVue 的表格組件
import { TinyGrid } from '@opentiny/vue'
</script>

<template>
  <tiny-grid
    :data="tableData"
  >
    <!-- 表格內容 -->
  </tiny-grid>
</template>

6.3 註冊組件的 MCP 工具

在應用入口文件（如 main.ts）中初始化 MCP 配置：

import { registerMcpConfig } from '@opentiny/vue-common'
import { createMcpTools, getTinyVueMcpConfig } from '@opentiny/tiny-vue-mcp'

// 註冊 TinyVue 組件 MCP 配置
registerMcpConfig(getTinyVueMcpConfig(), createMcpTools)

6.4 創建 NextClient 代理客户端

在 App.vue 中創建 NextClient 代理客户端，用於建立實時通信：

<script setup lang="ts">
  import { useNextClient } from'@opentiny/next-vue'

const { sessionId } = useNextClient({
    clientInfo: {
      name: 'your-app-name', // 應用名稱
      version: '1.0.0', // 應用版本
      sessionId: 'your-session-id'// 可選，不傳由後台自動生成。調試時可使用 crypto.randomUUID() 生成固定值
    },
    proxyOptions: {
      url: 'your-sse-url', // SSE 服務地址，目前 Agent 代理服務器暫未開放，如想進一步瞭解可以在 GitHub 中提 issue 單
      token: 'your-token'// 認證 token
    }
  })
</script>

<template>
  <div>
    <h1>NextClient 代理客户端</h1>
    <p>會話 ID: {{ sessionId }}</p>
  </div>
</template>

6.5 給組件配置業務邏輯

在子頁面中使用 Grid 等支持 MCP 的組件時，添加 MCP 配置：

<script setup lang="ts">
  import { useNextServer } from '@opentiny/next-vue'

  const { server } = useNextServer({
    serverInfo: { name: 'your-server-name', version: '1.0.0' }
  })
</script>

<template>
  <tiny-grid
    :tiny_mcp_config="{
      server,
      business: {
        id: 'your-business-id',
        description: '業務描述'
      }
    }"
  >
    <!-- 表格內容 -->
  </tiny-grid>
</template>

詳細步驟請參考我們的官網文檔：TinyVue 智能組件接入指南

如果你覺得我們的 TinyVue 智能組件庫還不錯，請給我們點個 Star 支持！

如果你在接入過程中遇到了問題，請給我們提交 Issue 或者添加我們的小助手微信：opentiny-official。

關於 OpenTiny

歡迎加入 OpenTiny 開源社區。添加微信小助手：opentiny-official 一起參與交流前端技術～

OpenTiny 官網：https://opentiny.design
OpenTiny 代碼倉庫：https://github.com/opentiny
TinyVue 源碼：https://github.com/opentiny/tiny-vue
TinyEngine 源碼： https://github.com/opentiny/tiny-engine
歡迎進入代碼倉庫 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor~
如果你也想要共建，可以進入代碼倉庫，找到 good first issue標籤，一起參與開源貢獻~

vue.js , 組件庫 , 前端
user avatar xuriliang 頭像 clearlove07 頭像
2 位用戶收藏了這個故事！

發佈 評論

Some HTML is okay.