【案例共创】基于华为开发者空间云开发环境（容器）探索前端智能化
最新案例动态，请查阅【案例共创】基于华为开发者空间云开发环境（容器）探索前端智能化。小伙伴们快来进行实操吧！
本案例由开发者：胡琦提供
一、概述
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. 连接”章节步骤。
完成连接之后的状态：
2. 领取tokens福利
登录华为开发者空间，参考案例《华为云MaaS平台商用大模型Tokens领取使用指导》中的“二、 领取MaaS平台商用大模型Tokens”章节内容，领取MaaS平台DeepSeek-R1商用大模型Tokens代金券，购买ModelArts Studio DeepSeek Tokens套餐包，开通商用模型服务，最后获取到模型的API地址、模型名称和API Key。
注意：记录API Key、API地址以及模型名称留作后面步骤使用。
3. GitCode拉取源码
源码基于RouYi-Vue改造，新增了MCP-Server并集成了MCP-Client，实现了AIChat可调用MCP来操控页面，是AI时代前端智能化的一次探索尝试。
在VS Code新建终端：
终端中输入以下命令，拉取源代码：
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接入进来，为我们的前端智能化改造提供核动力。
在RuoYi-Vue3/mcp-server目录下创建一个.env文件：
cd ./RuoYi-Vue3/mcp-server/ cp .env.example .env 
.env文件配置如下：
# Open AI Compatible Example url=your url apiKey=your apiKey model=your model systemPrompt=You are a helpful assistant with access to tools. # Ollama Example # url=http://localhost:11434/v1/chat/completions # apiKey= # model=qwen2.5:7b # systemPrompt=You are a helpful assistant with access to tools. 注意：
- your url替换为“二、基础环境与资源准备”章中的“2. 领取tokens福利”节最后获取到的API地址。
- your apiKey替换为“二、基础环境与资源准备”章中的“2. 领取tokens福利”节最后获取到的API Key。
- your model替换为“二、基础环境与资源准备”章中的“2. 领取tokens福利”节最后获取到的模型名称。
接着在命令行中执行命令，安装依赖并启动项目：
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：
我们再测试一下清空筛选条件功能，刷新当前页面，在搜索条件中随意输入：
点击AIChat图标，接着点击界面操作：
见证奇迹的时候到了：原先有值的筛选条件被一一清空了，我们从对话中也能看到MCP tools被调用了：
3. 代码浅析
mcp-server 的代码是参考 tiny-agent/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 ，势必能加速企业应用的智能化改造。
四、反馈改进建议
如您在案例实操过程中遇到问题或有改进建议，可以到论坛帖评论区反馈即可，我们会及时响应处理，谢谢！
