OpenTiny训练营实操体验|轻松解锁TinyVue智能组件开发Web应用

1.背景描述

TinyVue 是一套企业级的 Vue 框架下的组件库，它具有跨端、跨框架的特性，同时支持 Vue2 和 Vue3，支持 PC 端和移动端浏览器。

本次实验是通过改造一个使用 TinyVue 组件的常规 Web 应用，秒变为一个能够对接大语言模型的智能应用。这个应用可以让用户通过自然语言与网页进行对话，直接"精准"操作网页上的组件。

2.实验简介

首先，我们提供了一个用 Vue3 搭建的商品列表管理的单页面应用，它使用 TinyVue 组件库中的 Select、Grid 等组件。该商品管理应用默认会显示商品管理的表格，并且已经实现了条件查询商品，添加、删除商品和保存商品等功能。但此应用目前不支持 AI 大模型的操作，比如打开智能助手，发送的信息不会正确执行。

对接 TinyVue Next 智能框架的相关包，给 Select、Grid 等组件添加业务描述后，让智能助手等功能可以遥控操作网页。

3.基本要求

• 熟练使用 VSCode 或其他代码编辑器
• 具有 Chrome、Edge 等浏览器的调试能力
• 熟悉 Vue 开发，以及具有 TinyVue 或其它组件库的开发经验

4.代码实战

4.1 启动电商平台 demo 页面，熟悉功能

解压桌面上的工程压缩文件 agent-app-demo （可能位置与名称有调整，有疑问可咨询）

解压完成后用 VSCode 软件打开指定的工程目录，打开终端，执行以下命令安装依赖：

npm install 

安装完成后执行以下命令，启动电商平台 demo 页面。

npm run dev 

启动成功后，查看商品列表并简单的进行增删改查的操作。

但此时测试 AI 智能助手，则是无响应的。下一步就来对应用进行简单改造。

4.2 引用 vue-next 等智能包进行应用改造

将上面的普通应用，秒变为智能应用，需要以下 4 步， 需要按顺序完成。

4.2.1 引入智能包

在终端中执行以下命令，安装相关智能包。

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

4.2.2 全局注册 TinyVue MCP 的工具

在main.ts 文件中，引入@opentiny/tiny-vue-mcp，注册 TinyVue MCP 的工具。

import { createMcpTools, getTinyVueMcpConfig } from "@opentiny/tiny-vue-mcp"; import { registerMcpConfig } from "@opentiny/vue-common"; // 1、 将 TinyVue MCP的工具注入到 vue-common 层中，之后应用可以TinyVue MCP的功能 registerMcpConfig(getTinyVueMcpConfig(), createMcpTools); 

4.2.3 创建 MCP Client 的远端会话

在App.vue文件中，引入@opentiny/next-vue， 创建 MCP Client 的远端会话。

注意：代码中连接需要自行提供 目前 agent 代理服务器代码未开源，如想进一步了解可以在 github 中提 issue 单 提交 issue 连接：https://github.com/opentiny/tiny-vue/issues

import { useNextClient } from "@opentiny/next-vue"; import { globalConversation } from "./composable/utils"; // 2、创建 sessionId ， 一个 ref<string> 的值， 并保存起来，智能助手会访问该变量进行通讯 const { sessionId } = useNextClient({ clientInfo: { name: "my-project", version: "1.0.0" }, // url为工具调用方，token为对应的凭证 proxyOptions: { url: "https://xxx/sse", token: "" }, }); globalConversation.sessionId = sessionId; 

4.2.4 在应用页面，创建 MCP Server， 并给组件声明"业务属性"

在views/productManager/index.vue中，创建 MCP Server

import { useNextServer } from "@opentiny/next-vue"; // 3、创建web应用所需的 McpServer 变量， 用于注册页面中的组件到系统中。 const { server } = useNextServer({ serverInfo: { name: "company-list", version: "1.0.0" }, }); // 4、 模板中，在AI智能助手要操作的组件上，去绑定 server 和 组件的 "业务描述"。 这样 AI就能关联mcp，并识别每个组件的业务定义了。 

在views/productManager/index.vue文件中， 可以改造 TinyVue 的组件，它们支持属性 tiny_mcp_config， 传入 server 和组件的业务描述，例如：

<tiny-base-select v-model="statusFilter" :options="statusOptions" placeholder="商品状态" clearable :tiny_mcp_config="{ server, business: { id: 'category-status', description: '商品状态的下拉框', }, }" > </tiny-base-select> 

其中 business.id 是组件在页面上的唯一 id。 business.description 是描述组件的业务含义， 这样与大模型对话时，大模型可以"精准"的知道页面上有什么可以操纵。

接下来，给商品状态的 Select， 商品列表的表格，按钮等等，都可以添加上 :tiny_mcp_config 属性了。

给分类下拉框添加 tiny_mcp_config

<tiny-base-select v-model="categoryFilter" :options="categoryOptions" placeholder="商品分类" clearable :tiny_mcp_config="{ server, business: { id: 'category-select', description: '商品分类的下拉框', }, }" > </tiny-base-select> 

给商品列表表格添加

<tiny-grid auto-resize ref="gridRef" :data="displayProducts" :height="520" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }" :tiny_mcp_config="{ server, business: { id: 'category-list', description: '商品列表', }, }" > <!--省略部分代码--> </tiny-grid> 

4.3 通过页面的 AI 智能助手进行网页的智能操作

经过 4.2 节， 我们已经将普通的应用秒变为智能应用。此时就可以通过"AI 智能体"工具跟网页对话了

对下拉框，你可以尝试提问： 在商品分类下拉框中，弹出下拉面板选中手机分类。

对于表格， 你可以问：帮我在商品列表中删除最贵的且分类为手机的商品。

这里就可以发挥想像力，对网页进行各种提问，看看大模型能否正确判断行为，并调用正确的 MCP 方法。

如果"AI 智能体"工具不能执行成功，可以打开浏览器控制台，参考以下内容进行排查：

控制台有无报错

打开"网络" 面板，查看 chat-messages 接口是否异常

查看控制台打印的： SSE data: xxxx 信息。可以跟踪大模型的执行过程，查看调用 MCP 工具的中间过程等。

4.4 页面添加可识别二维码，通过手机远程操作

通过文字去操作页面有点麻烦，如果能通过语音就是远程遥控网页是不是就好了。

在"App.vue"的顶部增加 的二维码组件:

<div class="qr-code"> <span> 页面识别二维码， 请用手机扫码后，在浏览器中打开。 微信的浏览器可能没有语音功能，需要使用手机内置的浏览器访问。 </span> <tiny-qr-code :value="sessionUrl" :size="100" color="#1677ff"></tiny-qr-code> </div> 

二维码的 value= sessionUrl ，它是通过 sessionId 计算出来的一个 url。在App.vue添加以下 js 代码：

注意：代码中连接需要自行实现并部署远程操控服务 如对此有疑问或者有兴趣交流，欢迎提交 issue： https://github.com/opentiny/tiny-vue/issues

import CryptoJS from "crypto-js"; import { computed } from "vue"; const sessionUrl = computed(() => { // 未创建session时 if (!sessionId.value) return "no session"; // 创建好 sessionId后，加密后拼接成 sessionUrl ， 这样手机扫码后会连接这个Url页面 const encryptedId = CryptoJS.AES.encrypt( sessionId.value, "secret-session-id" ).toString(); return "https://xxx?id=" + encodeURIComponent(encryptedId); }); 

这样，我们的应用顶部会有一个二维码，用手机扫描后，使用手机上的浏览器打开，就可以选择"语音控制器"，跟它对话了，通过手机远程指挥网页。

因为上述流程中 proxyOptions.url 与 语音远程操控页面需要自行部署服务，因此提供了临时的线上体验连接：https://opentiny.design/tiny-vue/zh-CN/os-theme/comprehensive

5.实验总结

通过本次实验，我们不仅掌握了将普通 Web 应用转化为智能 Web 应用的关键技能，还学会了利用智能助手或远程手机对网页进行精准操控。

该实验引导用户深入思考网页未来可能呈现的形态与无限可能，让每一位用户都能深切体验到人工智能为 Web 开发领域所带来的震撼，感受技术进步如何重塑我们的网页世界。

关于 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 标签，一起参与开源贡献~