基于华为开发者空间云开发环境（容器）探索前端智能化

案例介绍

本项目是基于华为开发者空间云上开发环境部署的 RuoYi-Vue + TinyAgent + MCP + MaaS 技术实践案例。该应用在 RuoYi-Vue 中深度集成华为云MaaS（ModelArts as a Service）平台提供的DeepSeek大语言模型，并使用 TinyAgent 对接 MCP 服务，充分利用平台提供的百万级商用 Token 处理能力以及 Agent 技术，探索传统前端项目的智能化改造。

案例内容

一、概述

1. 案例介绍

本项目通过结合 RuoYi-Vue 的前端框架、华为云 MaaS 提供的大语言模型服务、TinyAgent 的智能代理能力以及 MCP 服务，实现了一个高效的智能化系统。该系统可以快速部署在开发环境中，提供高性能的智能对话服务，并通过智能代理进行业务自动化处理。

应用中，RuoYi-Vue 作为前端框架提供了灵活的界面设计和快速开发的能力，配合 DeepSeek 模型的强大语言处理能力，使得本应用能够支持自然语言理解、对话管理和语义分析等多种功能。TinyAgent 通过接入 MCP 服务，进一步增强了系统的智能化水平，使得应用在面对复杂场景时，能够更好地处理多轮对话和长文本分析任务。

该项目不仅为企业和个人开发者提供了一个智能化改造的范例，也为高校学生提供了实践机会，让他们能够深入了解前端开发、智能对话系统、Agent 技术以及云平台应用的结合。

2. 适用对象

• 企业
• 个人开发者
• 高校学生

## 3. 案例时间

本案例总时长预计60分钟。

## 4. 案例流程

说明：

1. 注册登录华为开发者空间，进入云开发环境（容器）平台，web端实现容器的创建与开机操作；
2. PC本地通过VS Code安装Huawei Developer Space插件，远程连接操作云开发环境（容器）的；
3. 领取百万token代金券福利，登录MaaS平台，开通商用模型服务，获取模型调用参数API Key；
4. GitCode拉取 RouYi-Vue + TinyAgent 改造代码，安装依赖，修改配置参数API Key，运行 MCP Server 端；
5. 启动程序，在浏览器端测试验证，通过 AIChat 操作页面功能。

5. 资源总览

本案例预计花费0元。

资源名称	规格	单价（元）	时长（分钟）
华为开发者空间开发平台 - 云开发环境（容器）	鲲鹏通用计算增强型 kc1 | 2vCPUs | 4G | HCE	免费	60

二、基础环境与资源准备

1. VS Code远程连接云开发环境容器

参考案例《华为开发者空间 - 云开发环境（容器）IDE插件远程连接操作指导》中的"二、云开发环境IDE插件远程连接操作指导"的内容，完成"1. 安装插件" ~ "4. 连接"章节步骤。我这里选择的 All in One 环境，也就是包括了 NodeJS、Java、Python、Go 的环境。

完成连接之后的状态：

2. 领取百万免费token福利

参考案例《Versatile Agent中自定义接入大模型配置华为云Maas指导》中的"一、 领取"章节内容，领取华为开发者空间百万token代金券福利，本案例中选用DeepSeek-R1，则在此处点DeepSeek-R1 轻量体验包（¥7.00）。若其他案例中选用DeepSeek-V3 则购买ModelArts Studio DeepSeek-V3 轻量体验包（¥3.50）。开通商用模型服务，最后获取API地址、API Key的参数值。

3.从 GitCode 拉取源码

源码基于 RouYi-Vue 改造，新增了 MCP-Server 并集成了 MCP-Client，实现了 AIChat 可调用 MCP 来操控页面，是 AI 时代前端智能化的一次探索尝试。

在 VSCode 新建终端：

输入命令拉取代码：

git clone  https://gitcode.com/huqi-dev/RuoYi-Vue3 

三、前端智能化改造

1. OpenTiny 助力 MCP-Server 开发

@OpenTiny/tiny-agent 基于MCP协议使AI理解与操作用户界面，完成用户任务。它的特性包括但不限于：

• 支持MCP协议 支持MCP客户端 + FunctionCall/ReAct模式的大模型
• 任务调度指令 支持模拟人机交互，让AI操作用户界面，可人为干预
• 可扩展操作哭 丰富的人机交互模拟，支持组件模块API专有扩展
• 开发工具套件 轻松标记编排，生成AI能理解的网站使用说明书

首先我们需要配置一下环境，主要是把 MaaS 提供的 DeepSeek R1 接入进来，为我们的前端智能化改造提供核动力。

复制 mcp-server/.env-example 内容到 mcp-server/.env 中，填写自己的api key、api url 等。如：

url=https://api.modelarts-maas.com/v1/chat/completions

apiKey= 此处请替换为您的 api key

model=DeepSeek-R1

systemPrompt=You are a helpful assistant with access to tools.

接着在命令行中执行命令，安装依赖并启动项目：

cd RuoYi-Vue3/mcp-server/
npm install
npm run dev

这时候会监听到 3001 端口已经有服务在运行了。我们通过浏览器访问 http://localhost:3001/mcp 能够看到服务正常运行：

2. OpenTiny 助力 MCP-Client 开发

@OpenTiny/tiny-agent 同样也适用于 MCP-Client 的开发，我们在源码目录的 /workspace/RuoYi-Vue3/src/components/AIChat 下实现了 AIChat 组件和它能调用的 MCP tools。

继续新建终端，执行命令安装依赖并运行前端：

cd RuoYi-Vue3/
npm install
npm run dev

此时浏览器会自动打开 rouyi 的前端页面：

登录完成之后，我们去到 系统管理-日志管理-操作日志 ，可以看到右下角多了一 AIChat 的入口：

我们点击 AIChat 的图标可以打开一个对话框：

接着点击 列出目前系统中可用的工具 ，AIChat 会调用 MCP-Server 获取我们定义在客户端的 MCP tools：

接着我们再测试一下清空筛选条件功能：刷新页面在搜索条件中随意输入，接着点击 界面操作：

见证奇迹的时候到了：原先有值的筛选条件被一一清空了，我们从对话中也能看到 MCP tools 被调用了：

3. 代码浅析

mcp-server 的代码是参考 tiny-agent/demo-server : https://github.com/opentiny/tiny-agent/tree/main/demo-server 实现：

• demo-server/
  • .env.example --- 示例环境变量，说明必须的配置项
  • package.json --- 依赖与运行/构建脚本
  • tsconfig.json --- TypeScript 编译配置（生产）
  • tsconfig.dev.json --- 开发用的 TypeScript 配置覆盖
  • src/
    • index.ts --- 应用入口，配置加载与模块初始化
    • proxy-server.ts --- HTTP / WebSocket 代理与路由层（主服务）
    • chat.ts --- 聊天 / 会话逻辑（业务处理、上游适配）
    • connector.ts --- 上游连接适配器（HTTP/WebSocket 客户端封装）

tiny-agent/demo‑server 是一个演示（demo）服务器模块，用于快速搭建后端服务，以便前端或其它客户端能够通过 Web 接口调用 tiny‑agent 的能力。通过它，我们可以看到一个完整的"Agent 服务端"如何接收请求、调用 Agent 模型、返回结果。整体流程为：客户端发送请求，服务端执行 Agent 推理，可能调用工具，然后将结果返回给客户端。

前端AIChat 的实现代码主要都在 src/components/AIChat ，包含了 UI 层和 mcp tools 相关的实现，核心代码为：

import { EndpointTransport, WebSocketClientEndpoint } from '@opentiny/tiny-agent-mcp-connector';

import { McpValidator } from '@opentiny/tiny-agent-mcp-service';

import { setupMcpService } from '@opentiny/tiny-agent-mcp-service-vue';

import { McpToolParser } from '@opentiny/tiny-agent-task-mcp';

import { useTaskScheduler } from './scheduler';

import mcpToolJson from './mcp-tool.json';

import mcpToolRegistry from '@/utils/mcpToolRegistry';

  

export function initMcp() {

// Connector

const wsEndpoint = new WebSocketClientEndpoint({ url: import.meta.env.VITE_CONNECTOR_ENDPOINT_URL });

const endpointTransport = new EndpointTransport(wsEndpoint);

  

// MCP Service

const mcpService = setupMcpService();

mcpService.mcpServer.connect(endpointTransport);

  

// MCP Validatorß

const mcpValidator = new McpValidator();

mcpService.setValidator(mcpValidator);

  

// Task Scheduler

const { taskScheduler, actionManager } = useTaskScheduler();

const doTask = async (task, opt) => taskScheduler.pushTask(task, opt);

  

// MCP Tool Parser & mcp-tool.json

const mcpToolParser = new McpToolParser(doTask);

mcpToolParser.extractAllTools(mcpToolJson).forEach((tool) => {

mcpService.mcpServer.registerTool(tool.name, tool.config, tool.cb);

});

  

// 设置全局MCP工具注册管理器

mcpToolRegistry.setMcpService(mcpService);

console.log('[MCP] MCP服务初始化完成，工具注册管理器已设置');

  

return {

wsEndpoint,

endpointTransport,

mcpService,

mcpValidator,

taskScheduler,

actionManager,

mcpToolParser,

};

}

实例化：

import { initMcp } from './mcp';

  

const { endpointTransport, mcpValidator } = initMcp();

完整代码请参考：https://gitcode.com/huqi-dev/RuoYi-Vue3

至此，我们完成了基于华为开发者空间云开发环境（容器）探索前端智能化，后续待 OpenTiny 开源 WebAgent 实现，我们再分享基于 OpenTiny Next 的企业智能前端解决方案，我们相信以生成式 UI 和 WebMCP 两大自主核心技术为基础的OpenTiny Next ，势必能加速企业应用的智能化改造。