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 -S4.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 CryptoJSfrom"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 標籤，一起參與開源貢獻\~
