基于华为开发者空间云开发环境（容器）探索前端智能化
案例介绍
本项目是基于华为开发者空间云上开发环境部署的 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. 案例流程
说明：
- 注册登录华为开发者空间，进入云开发环境（容器）平台，web端实现容器的创建与开机操作；
- PC本地通过VS Code安装Huawei Developer Space插件，远程连接操作云开发环境（容器）的；
- 领取百万token代金券福利，登录MaaS平台，开通商用模型服务，获取模型调用参数API Key；
- GitCode拉取 RouYi-Vue + TinyAgent 改造代码，安装依赖，修改配置参数API Key，运行 MCP Server 端；
- 启动程序，在浏览器端测试验证，通过 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 ，势必能加速企业应用的智能化改造。
