一、概述

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. 案例流程

说明：

1. 下载 CLI 工具包，本地连接 VSCode；
2. 云开发环境部署项目代码；
3. 使用 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 组件