请帮我购买一台 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。

如果你对我们的技术感兴趣，欢迎评论区留言交流🤝