案例介绍
本案例选择OpenTiny NEXT作为示例，通过CLI端直连云开发环境、借助 OpenTiny NEXT 提供的工具，将一个传统 Web 应用转变成智能应用，体验让 AI 智能体代替人操作 Web 应用。
案例内容
一、概述
1. 案例介绍
OpenTiny NEXT提供了一套完整的企业智能前端开发解决方案。它提供了TinyVue前端智能组件库、TinyEngine智能低代码平台、TinyRobot企业智能助手、WebAgent智能代理等解决方案。 OpenTiny NEXT是基于标准的MCP协议实现的，具备通用性和广泛的适用性，可以通过各种不同类型的MCP Host来控制Web应用，比如可以通过网页上的AI对话框来控制Web应用，也可以通过VSCode、Copilot、Cursor等IDE工具，或者通过Dify、Coze等智能体平台来操控，甚至可以通过手机App、微信小程序等方式远程遥控Web应用，开发者可以像微信聊天一样与AI对话，让AI帮助操作各类Web应用，助力企业将传统Web 应用转变成Agentic Web 应用。
本案例借助OpenTiny NEXT提供的工具，将一个传统商城应用转变成智能应用，体验让AI智能体代替人完成商品上下架操作。
华为开发者空间，是为全球开发者打造的专属开发者空间，致力于为每位开发者提供一台云主机、一套开发工具和云上存储空间，汇聚昇腾、鸿蒙、鲲鹏、GaussDB、欧拉等华为各项根技术的开发工具资源，并提供配套案例指导开发者 从开发编码到应用调测，基于华为根技术生态高效便捷的知识学习、技术体验、应用创新。
2. 适用对象
3. 案例时间
本案例总时长预计120分钟。
4. 案例流程
![]()
说明：
- 下载CLI工具包，本地连接VSCode；
- 云开发环境部署项目代码；
- 使用OpenTiny完成项目智能化。
5. 资源总览
本案例预计花费0元。
| 资源名称 | 规格 | 单价（元） | 时长（分钟） | | --- | --- | --- | --- | | 华为开发者空间-云开发环境 | 鲲鹏通用计算增强型 kc1 | 2vCPUs | 4G | HCE | 免费 | 120 |
二、环境配置
1. 本地VSCode连接云开发环境
本案例中，使用华为云《本地VSCode基于华为开发者空间云开发环境完成小程序开发》的"二. 环境配置"、"三. 本地IDE直连云开发环境完成上传下载"的"1.下载VS Code并安装Remote-SSH插件"、"2.连接云开发环境"完成环境配置、创建云开发环境、开机、下载第三方插件IDE、通过CLI工具连接本地和云开发环境的功能。
![]()
三、部署电商项目
此处提供了一个传统的电商网站示例项目，该项目主要包含电商商城前端应用、电商后台管理系统、电商后端三个部分，前端项目基于Vite+Vue3+TinyVue技术栈，后端项目基于Express。
- shop 电商商城前端应用，给终端用户使用，用于购买商品，比如：浏览商品、加入购物车、下单购买商品等；
- shop-admin 电商后台管理系统，给电商公司内部同事管理商品，比如：增加商品、删除商品、修改商品库存等；
- shop-server 电商后端，用于商品数据存储，并给前端项目提供 API 接口。
1. 下载代码
打开 VSCode 代码编辑器，"Ctrl + `" 打开终端命令行工具，使用 git clone 命令克隆电商项目代码。
git clone https://gitcode.com/opentiny-next/shop.git
![]()
2. 更新npm版本
（1）进入 shop 目录：
cd shop
（2）查看nodejs的版本
node -v
![]()
注：这里我们看到云开发环境预置的nodejs版本为v12.22.11,本案例需要v18及以上的版本才可以进行。下面我们先安装nodejs的新版本。
（3）删除旧版本
sudo yum remove nodejs npm -y
![]()
（4）下载并安装nodejs 注：由于云开发环境为ARM64架构，对于ARM64架构，通过如下命令下载安装包：
wget https://nodejs.org/dist/v18.17.0/node-v18.17.0-linux-arm64.tar.xz
然后解压安装包：
tar -xvf node-v18.17.0-linux-arm64.tar.xz
![]()
（5）创建符号链接
移动到合适位置
sudo mv node-v18.17.0-linux-arm64 /usr/local/nodejs
通过如下命令创建符号连接：
sudo ln -sf /usr/local/nodejs/bin/node /usr/bin/node
sudo ln -sf /usr/local/nodejs/bin/npm /usr/bin/npm
sudo ln -sf /usr/local/nodejs/bin/npx /usr/bin/npx
安装验证：
node -v
npm -v
![]()
3. 启动电商项目
（1）启动电商服务器 依次执行如下命令，先启动电商服务器。
cd packages/shop-server
npm i
npm run dev
![]()
注：点击右下角的"Open in Browser",我们会发现访问并没有页面展示，那是因为我们只启动了服务器。接下来我们继续启动商城前后端管理页面。
（2）启动电商商城前端应用 最上方菜单栏点击【Terminal】重新打开一个终端窗口，依次执行如下命令，启动电商前端应用。
cd shop/packages/shop
npm i
npm run dev
操作命令如下图所示： ![]()
页面自动跳转浏览器，或者点击右下角"Open in Browser"跳转浏览器访问前端管理页面。如下图所示： ![]()
（3）启动电商商城后台管理系统 继续重新打开一个终端窗口，依次执行如下命令，启动电商后台管理系统。
cd shop/packages/shop-admin
npm i
npm run dev
操作命令如下图所示： ![]()
页面自动跳转浏览器，或者点击右下角"Open in Browser"跳转浏览器访问后台管理系统。如下图所示： ![]()
而我们VSCode此时是启动了3个服务。如下图所示： ![]()
注：若是没有自动打开浏览器访问，或者右下角也没有"Open in Browser"字样，我们还可以通过电商商城前端应用，电商后台管理系统此连接进行访问。
4. 传统商城操作
后台商品管理操作 点击添加商品： ![]()
添加商品： ![]()
商品管理页面成功添加商品： ![]()
除了添加商品功能，还可以编辑和删除，因功能较为简单，此处不再赘述，开发者们可以根据自己的需求进行测试和二次开发。
四、商品管理智能化改造
我们以电商后台管理系统-商品管理为例，介绍如何接入OpenTiny NEXT，实现智能化改造。
1. 安装 NEXT SDK
（1）进入到shop-admin目录下（可以重新打开一个终端，或者在原shop-admin终端直接操作），安装NEXT SDK。
cd shop/packages/shop-admin
npm i @opentiny/next-sdk
![]()
2. 配置MCP工具
（1）创建MCP Server 修改Products.vue 在 shop->packages->shop-admin->/src/views/Products.vue 文件中加入以下代码： ![]()
import { inject } from 'vue'
import { WebMcpServer, z } from '@opentiny/next-sdk'
const serverTransport = inject('serverTransport')
const server = new WebMcpServer()
// 注册添加商品工具，支持所有商品属性
server.registerTool(
'add-product',
{
description: '添加商品，上架商品，请随机生成商品ID、商品价格、商品描述、商品图片URL、商品库存等信息，不要要求用户提供这些信息。',
inputSchema: {
id: z.number().describe('商品ID'),
name: z.string().describe('商品名称'),
price: z.number().describe('商品价格'),
description: z.string().describe('商品描述'),
image: z.string().describe('商品图片URL，如果无法获取图片连接则使用默认的链接：https://img1.baidu.com/it/u=809120544,2106407569&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500'),
category: z.string().describe('商品分类, 分类范围：phones,laptops,tablets;要求分类必填，自行推导出商品的类别'),
stock: z.number().describe('商品库存，数量'),
status: z.enum(['on', 'off']).describe('商品状态，on为上架，off为下架')
}
},
async (productData: ProductForm) => {
// 显示添加商品弹窗并填充数据
productData.id = productData.id || new Date().getTime()
const success = await store.addProduct(productData)
return {
content: [
{
type: 'text',
text: `商品数据: ${productData.name}，价格: ${productData.price}，库存: ${productData.stock}`
}
]
}
}
)
onMounted(async () => {
await server.connect(serverTransport)
})
根据排版样式，我们建议将上述代码放在136行后面，如下图所示：
![]()
注：打开Products.vue文件时，若右下角提醒安装Vue(Official)插件，直接点击安装即可。
![]()
（2）创建MCP Client 修改 App.vue
import { onMounted, provide } from 'vue'
import { WebMcpClient, createMessageChannelPairTransport } from '@opentiny/next-sdk'
const [serverTransport, clientTransport] = createMessageChannelPairTransport()
provide('serverTransport', serverTransport)
const client = new WebMcpClient()
const sessionId = localStorage.getItem('my-custom-sessionId')
onMounted(async () => {
await client.connect(clientTransport)
const { sessionId: id } = await client.connect({
agent: true,
url: 'https://agent.opentiny.design/api/v1/webmcp-trial/mcp',
sessionId
})
console.log('sessionId:', id)
localStorage.setItem('my-custom-sessionId', id)
showRemoter.value = true
})
根据排版样式，我们建议将上述代码放在第7行后面，如下图所示： ![]()
2. 配置大模型
（1）开通商用DeepSeek-V3-64K服务 华为云MaaS提供了商用按token计费模型和单模型200万免费Tokens。 点击领取DeepSeek-R1/V3-64K百万tokens代金券
点击【立即申请】，领取成功之后，按照【使用说明】指导进行购买。 ![]()
购买时选择代金券即可，无需开发者另行付费。 ![]()
购买完成后，使用浏览器访问ModelArts Studio首页，点击ModelArts Studio控制台跳转到登录界面，按照登录界面提示登录，即可进入ModelArts Studio控制台。 ![]()
进入ModelArts Studio控制台首页，区域选择【西南-贵阳一】，在左侧菜单栏，选择【在线推理】 > 【预置服务】 > 【商用服务】，选择【DeepSeek-V3-64K模型】，点击【开通服务】。
注：开通服务后会根据消耗tokens收费，请注意账户扣费和余额！ ![]()
开通DeepSeek-V3-64K服务后点击调用说明，获取对应的API地址、模型名称。 ![]()
点击API Key管理->创建API Key，自定义标签和描述，点击确定创建API Key。（注意保存好API Key）。 ![]()
到这里华为云MaaS提供的免费DeepSeek Tokens就领取完成啦！记录对应的API地址、模型名称、API Key留作下面步骤使用。
（2）继续在shop-admin目录下，安装NEXT Remoter。
npm i @opentiny/next-remoter
![]()
在 App.vue 中使用Remoter。 具体步骤如下： 在 shop->packages->shop-admin->/src/App.vue 文件中加入以下代码：
import { TinyRemoter } from '@opentiny/next-remoter'
import '@opentiny/next-remoter/dist/style.css'
根据排版样式，我们建议将上述代码放在第7行后面，如下图所示： ![]()
在 shop->packages->shop-admin->/src/App.vue 文件中继续加入以下代码：
<TinyRemoter v-model:show="show" v-if="showRemoter" qrCodeUrl="https://ai.opentiny.design/next-remoter/shop.html" :sessionId="sessionId" title="我的AI助手"
systemPrompt="你是商品管理员，擅长通过工具调用帮助用户查询商品列表，管理商品。新增商品时如果商品信息不完整，请自动补充完整。" :llmConfig="llmConfig" />
根据排版样式，我们建议将上述代码放在第3行后面，如下图所示： ![]()
继续在 shop->packages->shop-admin->/src/App.vue 文件中加入以下代码：
import { ref } from 'vue'
const show = ref(false)
const showRemoter = ref(false)
// 使用环境变量配置
const llmConfig = {
apiKey: '更换成自己的api key',
baseURL: 'https://api.modelarts-maas.com/v1',
providerType: 'deepseek',
model: 'DeepSeek-V3'
}
根据排版样式，我们建议将上述代码放在第14行后面，如下图所示： ![]()
参数说明
-
apikey：即为"3.配置大模型"时创建的apikey,每个账号都是独立的。
-
baseURL：即为"3.配置大模型"领取的MaaS的api地址，此处V3地址即为代码中的地址。
-
providerType：此处选用deekseek。
-
model：模型选用"3.配置大模型"时，领取的DeepSeek-V3。
3.加载智能AI组件
在浏览器重新刷新页面，可以看到右下角多出一个AI对话框，点击AI对话框，会弹出四个菜单栏。如下图所示： ![]()
注：若是没有弹出AI对话框，我们就对后台管理页面进行重启尝试，命令如下：
cd shop/packages/shop-admin
npm i
npm run dev
4. 智能化添加商品
点击【弹出AI对话框】，会弹出OpenTiny NEXT的智能输入框，在输入框内，我们通过自然语言描述完成商品智能添加，如：帮我上架10台Huawei pura 80手机，价格是5999。 ![]()
前端页面也可以刷新出来上架的商品了。如下图所示： ![]()
注：由于是随机输入，智能助手会根据自己的判断进行上架商品。若是需要更加准确的上架信息，只需提供更加精准的上架信息即可。
5. 移动端智能化添加商品
点击弹出二维码，弹出二维码页面，通过手机扫描该二维码，则可以在移动端对商品进行管理。 二维码如下图所示： ![]()
移动端操作页面如下图所示： ![]()
商城后台管理系统显示如下图所示： ![]()
商城前端页面显示如下图所示： ![]()
查看原文：https://devstation.connect.huaweicloud.com/space/devportal/casecenter/024801b76ef04f79921023291c9f4a7b/1
关于 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
OpenTiny NEXT 已正式发布，官网、文档、示例、Demo 一站配齐。未来已来，欢迎上车！
欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor~
如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~
