TinyVue 智能组件库：基于 MCP 协议，实现 AI 代替人操作 Web 组件

你好，我是 Kagol，个人公众号：前端开源星球。

2025年6月21日，我在华为开发者大会2025（HDC2025）开源论坛做了一场主题分享，给开发者们介绍我们 OpenTiny 团队基于 MCP 协议实现 AI 代替人操作 Web 应用的技术。

传统的 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），它定义了大语言模型与外部世界的交互方式，让大模型能够轻松地获取外部数据或调用外部工具。

从上图可以看出，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/

左边是我们 TinyVue 官网的表格组件，中间是一个公司列表，表格中的每一行是一家公司的信息，包括公司名称、员工数等，右侧有一个 AI 对话框，我们可以在里面输入：帮我选中员工数最多的公司，这时 AI 会自动在表格中找到员工数最多的公司，并选中它。

第二个视频演示如何在 VSCode Copilot 中通过文字对话的方式操控 Web 应用。

演示视频地址：https://www.bilibili.com/video/BV1foKnzxEwm/

视频左边是一个 ECS 服务器购买页面，可以选择服务器的 CPU 规格、操作系统镜像等，右边是一个 VSCode Copilot 界面，我们同样可以输入：帮我选中最贵的 CPU 规格，这时 AI 会在 CPU 规格表格中找到价格最高的 CPU 规格，并选中它。

第三个视频和第二个很类似，差别在于第三个视频是在 VSCode Copilot 中通过语音的方式操控 Web 应用。

演示视频地址：https://www.bilibili.com/video/BV1zoKnz4Eyu/

VSCode Copilot 目前是支持语音录入的，可以看到 Copilot 的对话框左下角有一个麦克风的图标，点击这个图标就可以语音对话了。

这有什么使用场景呢？

比如：我正在 VSCode 中写代码，写完之后想要提交 PR，这时可以不用打开 GitHub 网站，而是在 VSCode Copilot 中说一句话：帮我提交 PR，AI 会自动在 GitHub 网站中帮我们提交 PR，是不是就非常方便？

第四个视频演示在 Dify 搭建的 AI 应用中控制 Web 应用。

演示视频地址：https://www.bilibili.com/video/BV1JoKnz4E5w/

前面提到，MCP Host 的存在方式很广泛，除了上面几种之外，还可以是一个手机 App、微信小程序等，我们可以像微信聊天一样与 AI 对话，让 AI 帮我们操作各类 Web 应用，实现我们的需求。

这个世界上很多应用都是以 Web 的方式存在的，AI 操作 Web 应用拥有非常广泛的应用场景，大家可以大胆发挥想象！

5 实现原理

看完演示效果，接下来给大家分享我们是如何实现这项技术的。

5.1 整体架构

先来看下整体架构图。

底层是 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 时序图

看完整体架构，我们再来看下开发视角的时序图。

先是用户在 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。

联系我们

GitHub：https://github.com/opentiny/tiny-vue（欢迎 Star ）

官网：https://opentiny.design/tiny-vue

个人博客：https://kagol.github.io/blogs

小助手微信：opentiny-official

公众号：OpenTiny