基于华为云大模型服务MaaS和OpenTiny框架实现商城商品智能化管理

案例介绍

本案例选择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 命令克隆电商项目代码。

bash 复制代码

git clone https://gitcode.com/opentiny-next/shop.git

2. 更新npm版本

（1）进入 shop 目录：

bash 复制代码

cd shop

（2）查看nodejs的版本

复制代码

node -v

注：这里我们看到云开发环境预置的nodejs版本为v12.22.11,本案例需要v18及以上的版本才可以进行。下面我们先安装nodejs的新版本。

（3）删除旧版本

arduino 复制代码

sudo yum remove nodejs npm -y

（4）下载并安装nodejs 注：由于云开发环境为ARM64架构，对于ARM64架构，通过如下命令下载安装包：

bash 复制代码

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）创建符号链接

移动到合适位置

bash 复制代码

sudo mv node-v18.17.0-linux-arm64 /usr/local/nodejs

通过如下命令创建符号连接：

bash 复制代码

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）启动电商服务器依次执行如下命令，先启动电商服务器。

bash 复制代码

cd packages/shop-server

npm i

npm run dev

注：点击右下角的"Open in Browser",我们会发现访问并没有页面展示，那是因为我们只启动了服务器。接下来我们继续启动商城前后端管理页面。

（2）启动电商商城前端应用最上方菜单栏点击【Terminal】重新打开一个终端窗口，依次执行如下命令，启动电商前端应用。

bash 复制代码

cd shop/packages/shop

npm i

npm run dev

操作命令如下图所示：

页面自动跳转浏览器，或者点击右下角"Open in Browser"跳转浏览器访问前端管理页面。如下图所示：

（3）启动电商商城后台管理系统继续重新打开一个终端窗口，依次执行如下命令，启动电商后台管理系统。

bash 复制代码

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。

bash 复制代码

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 文件中加入以下代码：

js 复制代码

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

js 复制代码

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。

css 复制代码

npm i @opentiny/next-remoter

在 App.vue 中使用Remoter。具体步骤如下：在 shop->packages->shop-admin->/src/App.vue 文件中加入以下代码：

javascript 复制代码

import { TinyRemoter } from '@opentiny/next-remoter'
import '@opentiny/next-remoter/dist/style.css'

根据排版样式，我们建议将上述代码放在第7行后面，如下图所示：

在 shop->packages->shop-admin->/src/App.vue 文件中继续加入以下代码：

ini 复制代码

<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 文件中加入以下代码：

js 复制代码

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对话框，我们就对后台管理页面进行重启尝试，命令如下：

bash 复制代码

cd shop/packages/shop-admin

npm i

npm run dev

4. 智能化添加商品

点击【弹出AI对话框】，会弹出OpenTiny NEXT的智能输入框，在输入框内，我们通过自然语言描述完成商品智能添加，如：帮我上架10台Huawei pura 80手机，价格是5999。

前端页面也可以刷新出来上架的商品了。如下图所示：

注：由于是随机输入，智能助手会根据自己的判断进行上架商品。若是需要更加准确的上架信息，只需提供更加精准的上架信息即可。

5. 移动端智能化添加商品

点击弹出二维码，弹出二维码页面，通过手机扫描该二维码，则可以在移动端对商品进行管理。二维码如下图所示：

移动端操作页面如下图所示：

商城后台管理系统显示如下图所示：

商城前端页面显示如下图所示：

查看原文：devstation.connect.huaweicloud.com/space/devpo...

关于 OpenTiny

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～

OpenTiny 官网：opentiny.design

OpenTiny 代码仓库：github.com/opentiny

TinyVue 源码：github.com/opentiny/ti...

TinyEngine 源码：github.com/opentiny/ti...

OpenTiny NEXT 已正式发布，官网、文档、示例、Demo 一站配齐。未来已来，欢迎上车！

欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor~

如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~