【案例共创】基于华为开发者空间云开发环境（容器）探索前端智能化

优质文章学习记录

— 10 min read
【案例共创】基于华为开发者空间云开发环境（容器）探索前端智能化

最新案例动态，请查阅【案例共创】基于华为开发者空间云开发环境（容器）探索前端智能化。小伙伴们快来进行实操吧！

本案例由开发者：胡琦提供

一、概述

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. 连接”章节步骤。

完成连接之后的状态：

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 ，势必能加速企业应用的智能化改造。

四、反馈改进建议

如您在案例实操过程中遇到问题或有改进建议，可以到论坛帖评论区反馈即可，我们会及时响应处理，谢谢！

Read more

vscode用户必看：opencode插件安装与AI补全启用教程

vscode用户必看：opencode插件安装与AI补全启用教程 1. 引言 随着AI编程助手的快速发展，开发者对高效、安全、可定制化工具的需求日益增长。OpenCode作为2024年开源的AI编程框架，凭借其“终端优先、多模型支持、隐私安全”的设计理念，迅速在开发者社区中获得广泛关注。它不仅支持主流云端大模型如GPT、Claude、Gemini，还允许接入本地运行的模型（如通过Ollama部署的Qwen3-4B-Instruct-2507），真正实现离线可用、代码不外泄。 本文将重点介绍如何在VS Code中安装并配置OpenCode插件，并结合vLLM部署本地推理服务，启用基于Qwen3-4B-Instruct-2507的智能代码补全功能。无论你是追求极致隐私保护的独立开发者，还是希望构建企业级AI编码环境的技术负责人，本教程都能为你提供完整落地路径。 2. OpenCode 核心特性解析 2.1 架构设计：客户端/服务器模式 OpenCode采用典型的C/S架构，核心Agent运行于本地或远程服务器，VS Code等IDE通过插件与其通信。这种设计带来三大优势：
人工智能：深度学习模型的优化策略与实战调参

人工智能：深度学习模型的优化策略与实战调参

人工智能：深度学习模型的优化策略与实战调参 💡 学习目标：掌握深度学习模型的核心优化方法，理解调参的底层逻辑，能够独立完成模型从欠拟合到高性能的调优过程。 💡 学习重点：正则化技术的应用、优化器的选择与参数调整、批量大小与学习率的匹配策略。 48.1 模型优化的核心目标与常见问题 在深度学习项目中，我们训练的模型往往会出现欠拟合或过拟合两种问题。优化的核心目标就是让模型在训练集和测试集上都能达到理想的性能，实现泛化能力的最大化。 ⚠️ 注意：模型优化不是一次性操作，而是一个“诊断-调整-验证”的循环过程，需要结合数据特性和任务需求逐步迭代。 48.1.1 欠拟合的识别与特征 欠拟合是指模型无法捕捉数据中的潜在规律，表现为训练集和测试集的准确率都偏低。 出现欠拟合的常见原因有以下3点： 1. 模型结构过于简单，无法拟合复杂的数据分布。 2. 训练数据量不足，或者数据特征维度太低。 3. 训练轮次不够，模型还未充分学习到数据的特征。 48.1.2 过拟合的识别与特征 过拟合是指模型在训练集上表现极好，但在测试集上性能大幅下降。 出现过拟合的常见原因有以下3点：

我和 AI 聊了一晚上，第二天它说“你好，请问有什么可以帮你？“凌晨我的 AI 尽然悄悄把记忆清空了!——OpenClaw Session 完全生存指南：重置、压缩、剪枝、记忆一网打尽

凌晨4点，我的 AI 悄悄把记忆清空了——OpenClaw Session 避坑指南 摘要：用 OpenClaw 搭了个 AI 助手，聊得好的，第二天一早它就"失忆"了？本文从一个真实踩坑出发，系统拆解 OpenClaw 的 Session 机制——重置（Reset）、压缩（Compaction）、剪枝（Pruning）、记忆（Memory）、会话控制（Session Tool）——帮你彻底搞懂"对话为什么会消失"以及"怎么让 AI 记住你"。 🤯 踩坑现场 事情是这样的： 我用 OpenClaw

【GitHub项目推荐--Planning with Files：基于Manus AI工作流的智能任务管理革命】⭐⭐⭐⭐⭐

简介 Planning with Files 是一个开源、跨平台的智能任务管理技能系统，由开发者OthmanAdi创建和维护。自2026年2月发布v2.15.0版本以来，这个项目以其独特的设计理念和强大的生产力提升能力，在AI辅助工作流领域引起了广泛关注。项目的核心灵感来源于Manus AI——这家在短短8个月内实现1亿美元以上收入，最终被Meta以20亿美元收购的AI代理公司。Planning with Files精准复现了Manus AI成功的核心秘诀：上下文工程（Context Engineering）。 核心价值： * 持久化工作记忆：将易失的AI上下文转化为持久的文件系统存储 * 目标防漂移机制：通过系统化检查点确保任务方向始终正确 * 错误学习循环：记录所有失败尝试，避免重复犯错 * 跨平台一致性：在14个不同IDE中提供统一的工作体验 项目定位：Planning with Files填补了AI代理的瞬时记忆与人类工作持久性之间的空白。它既不是另一个待办事项应用，也不是简单的笔记工具，而是一个完整的工作方法论实现。通过将Manus AI价值20亿美元的工作模