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

本案例选择OpenTiny NEXT作为示例，通过CLI端直连云开发环境、借助 OpenTiny NEXT 提供的工具，将一个传统 Web 应用转变成智能应用，体验让 AI 智能体代替人操作 Web 应用。提供了一套完整的企业智能前端开发解决方案。它提供了TinyVue前端智能组件库、TinyEngine智能低代码平台、TinyRobot企业智能助手、WebAgent智能代理等解决方案。

asdfgddaasaca

413人浏览 · 2025-09-27 17:38:48

asdfgddaasaca · 2025-09-27 17:38:48 发布

案例介绍

本案例选择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

配置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行后面，如下图所示：

北京朝阳AI社区

更多推荐

Python FastMCP实现MCP实践全解析

FastMCP 是 Python 中用于解决最小成本路径（Minimum Cost Path, MCP）问题的算法实现，常用于图像处理、地理信息系统（GIS）和网格导航等领域。它基于 Dijkstra 算法或 A* 算法的变体，通过计算从起点到终点的最小累积成本路径。成本矩阵是一个二维数组，表示每个网格点的通行成本。])