TRAE SOLO实战:实现一个桌面3D助手

0 阅读11分钟

引言

上一篇文章《星云 SDK + 油猴:给 LLM 塑造肉身,陪伴你在每个网页》中,我用油猴脚本 + 魔珐星云 SDK,让 3D 虚拟人出现在任意网页上,让AI拥有身体,感知世界,理解环境,自然表达。

这次尝试让我愈发确信:AI 的下一阶段,不只是更会思考,而是更会交互。这也正是魔珐星云"具身交互智能"的核心理念:让 AI 拥有身体、感知世界、理解环境,并通过语音、表情、动作和实时响应,自然地与人交流。

但油猴脚本终究跑在浏览器里,离开浏览器,虚拟人也就消失了。它寄生于一个标签页,而不是真正陪伴在你的桌面上。

所以这一次,我用 TRAE SOLO 打造了一个真正的桌面应用——让 3D 虚拟人走出浏览器,成为你桌面上随时陪伴的独立伙伴。

效果展示

先来看一下最终实现的效果。

独立桌面应用

整个程序只有一个 魔珐星云3D虚拟人.exe,绿色免安装,双击即可运行,无需配置任何环境。

获取方式:

程序百度网盘下载地址:pan.baidu.com/s/15RLrdH0O…

加我weixin shc1139874527,备注"星云",私发给你

极速上手体验

双击 魔珐星云3D虚拟人.exe,填入魔珐星云 SDK 的 APP_IDAPP_SECRET,即可启动体验,零门槛。

获取密钥只需 4 步:

  1. 前往 [魔珐星云平台] 注册账号,填写邀请码 JM2A7C9LSW,获赠 1000 积分
  2. 注册成功后进入「控制台」,点击「具身驱动」创建应用
  3. 选择你喜欢的数字人形象、场景及音色,点击「创建并进入调试」
  4. 点击页面右上角「接入 SDK」,获取 APP_ID APP_SECRET,填入程序即可

💡 使用邀请码注册可获得1000积分,否则获得100积分,积分类似大模型的token。

流畅的3D交互

3D数字人实时渲染,支持语音播报、实时打断, 表情动作同步,响应延迟低于500ms。

智能对话能力

对接任意LLM大模型,支持流式响应,数字人边听边说,体验自然流畅。

核心技术架构

整个项目依赖三个核心技术组件:

技术组件作用说明
TRAE SOLO开发工具TRAE IDE 的一种开发模式,通过自然语言对话,直接生成完整的桌面应用代码,从想法到成品一步到位
魔珐星云SDK3D渲染与交互AI 终端时代的平台级能力,让所有终端里的 AI,以具身的形态服务人、陪伴人、娱乐人。
Electron桌面容器将网页应用打包为跨平台桌面应用

魔珐星云具身驱动SDK

魔珐星云 SDK 是整个项目的核心,负责3D数字人的渲染与交互。它不是单纯的数字人工具,也不是 Agent 套壳工具,而是具身交互智能开放平台

它补齐的是大模型和 Agent 在真实终端落地时缺少的"交互层":

  • 大模型负责理解和生成——解决AI的"大脑";
  • Agent负责任务执行和流程调度;
  • 星云负责让AI拥有身体、表达能力和实时交互体验——补齐AI的"身体、表达和交互";
  • 最终让AI从聊天框进入屏幕、网页、APP、机器人、大屏、AR/VR等终端。

简单来说,大模型解决 AI 的“大脑”,魔珐星云补齐 AI 的“身体、表达和交互”。

TRAE SOLO:独立开发者的利器

在传统开发流程中,从需求分析到代码实现,再到测试部署,往往需要团队协作。但对于独立开发者来说,TRAE SOLO 提供了一种全新的开发模式——一个人,一个工具,完成全流程开发

TRAE SOLO 的核心优势:

  1. 智能代码生成:基于大模型的代码生成能力,只需描述需求,即可快速生成高质量代码
  2. 实时调试:边写边调,代码改动即时生效,大幅提升开发效率
  3. 全栈支持:前端、后端、桌面应用,一套工具搞定所有场景
  4. 知识沉淀:开发过程中的经验自动沉淀为知识库,下次开发更快

Electron:跨平台桌面容器

Electron 允许我们用 HTML、CSS、JavaScript 构建跨平台桌面应用。其核心优势:

  • 一次开发,多平台运行:Windows、macOS、Linux 全覆盖
  • 丰富的系统API:窗口管理、文件系统、系统托盘等
  • Web技术栈:使用熟悉的前端技术栈,学习成本低

实战教程:从零到一打造桌面虚拟人

第一步:安装 nebula-avatar-demo 技能

在开始开发之前,先给 TRAE SOLO 安装一个关键技能:nebula-avatar-demo

nebula-avatar-demo技能参考文章:juejin.cn/post/766490…

Skills 是 TRAE SOLO 的扩展能力包,相当于给 AI 装上了"专家记忆"。安装某个技能后,TRAE SOLO 在生成代码时就会自动参考该技能中的最佳实践和代码规范,输出质量更高、风格更统一。

nebula-avatar-demo 技能封装了魔珐星云 SDK 的基础调用示例和代码样式,安装后 TRAE SOLO 就知道如何正确调用星云 SDK 的 API,避免生成错误的接口调用。

安装方式: 在 TRAE SOLO 的对话窗口中输入:

帮我安装 nebula-avatar-demo 技能,技能地址:https://gitee.com/sxshi/nebula-avatar-demo

TRAE SOLO 会自动搜索并安装该技能,安装完成后即可在后续开发中使用。

第二步:启动 TRAE SOLO,初始化项目

打开 TRAE SOLO,创建一个名为 xinyun 的新项目。接下来,让 TRAE SOLO 帮我们完成项目初始化。

如果你对整体技术方案有疑问,或者对需求边界不够清晰,可以先用 /openspecopsx:/explore 命令来探索实现路径、梳理任务清单。我们也可以结合 superpowers 等技能,让 TRAE SOLO 在生成代码时参考更多最佳实践,输出质量更高。

第三步:用自然语言描述需求

这是整个开发过程最核心的一步——不需要手写代码,只需要用自然语言告诉 TRAE SOLO 你要做什么。

首先,将 IDE 切换至 SOLO 模式:

然后,在对话窗口中依次提出需求:

  • ① 项目初始化
帮我创建一个 Electron + Vue 3 + TypeScript 项目,使用 Vite 构建,安装 element-plus 和 less 依赖

TRAE SOLO 自动完成了项目结构搭建、依赖安装、配置文件生成

  • ② 集成星云 SDK
帮我封装星云 SDK 的调用逻辑,参考 nebula-avatar-demo 技能的代码风格,
包括:创建 SDK 实例、连接与断开、3D 模型加载进度回调、
语音播放方法,封装为 Vue 组合式函数 useAvatar

RAE SOLO 参考 nebula-avatar-demo 技能的代码样式,自动生成了完整的 SDK 集成代码:

// src/composables/useAvatar.ts
export function useAvatar(containerId: string = "#td-person") {
  const { sdkConfig } = useGlobalData();
  const sdk = shallowRef<any>(null);

  const connectInfo = ref({
    status: "disconnected",
    statusText: "未连接",
    progress: 0,
    isConnected: false,
  });

  async function connect() {
    connectInfo.value.statusText = "3D 模型加载中...";
    await sdk.value.init({
      onDownloadProgress: (p: number) => {
        connectInfo.value.statusText = `3D 模型加载中... ${p.toFixed(2)}%`;
      },
    });
    connectInfo.value.isConnected = true;
    speak("宿主你好,我是你的虚拟助手~");
  }

  function speak(text: string, isStart = true, isEnd = true) {
    sdk.value?.speak(text, isStart, isEnd);
  }

  return { connect, disconnect, connectInfo, speak };
}

③ 集成 DeepSeek 对话

帮我实现一个 DeepSeek 流式对话的组合式函数 useDeepSeekChat,
支持 SSE 流式接收、消息历史管理,每收到一段文字就触发 onSpeakChunk 回调,驱动虚拟人说话

④ 构建主界面

帮我创建主界面 App.vue,包含:无边框窗口(自定义标题栏、最小化/关闭按钮)、
左侧 3D 虚拟人渲染区域、右侧功能面板(连接面板/对话面板/设置面板切换)

⑤ 打包为桌面应用

帮我配置 electron-builder,支持打包为 Windows 安装程序

第四步:运行调试,遇到问题直接对话修复

代码生成完毕后,运行 npm run dev 启动开发模式。应用跑起来了,但很快发现了一个问题——窗口无法拖拽移动。

这是因为使用了无边框窗口,默认的拖拽区域没有设置。在 TRAE SOLO 中,我只需要说一句话:

窗口不能拖拽移动,帮我修复一下"

TRAE SOLO 立刻定位到问题,自动在标题栏区域添加了 -webkit-app-region: drag 样式,同时确保按钮区域不受拖拽影响。重新运行,窗口即可正常拖拽。

类似地,开发过程中还遇到了几个小问题,都是通过与 TRAE SOLO 对话解决的:

遇到的问题我的描述TRAE SOLO 的修复
窗口无法拖拽"窗口不能拖拽移动"自动添加 -webkit-app-region: drag
3D 模型加载卡住"SDK 连接后模型一直加载中"检查 gatewayServer 配置,修正接口地址
打包后白屏"打包成 exe 后打开是白屏"修改 loadFile 路径,修正 __dirname引用

第五步:打包发布

所有功能调试通过后,执行打包:

Bash

npm run dist    # 打包为 .exe 安装程序

生成的安装包只有一个 exe 文件,绿色免安装,双击即可运行。

开发感受

整个过程,我没有手动写过一行代码。从项目初始化到最终打包,所有代码都由 TRAE SOLO 根据自然语言需求自动生成——Electron 主进程配置、星云 SDK 集成、DeepSeek 对话对接、UI 界面搭建、打包配置,甚至问题修复,全部对话完成。

nebula-avatar-demo 技能在其中起到了关键作用——它让 TRAE SOLO 在生成 SDK 调用代码时,直接参考了官方的最佳实践,避免了反复试错。

我要做的只有三件事:描述清楚需求、遇到问题说一句话、提供星云 SDK 的密钥。

开发者视角:真实体验与思考

为什么选择魔珐星云

在开始这个项目之前,我其实尝试过其他数字人方案,踩了不少坑。

传统视频流方案需要依赖服务器端渲染,每一帧画面都要从云端推流到客户端——延迟高、带宽消耗大,而且根本无法实现真正的实时交互,用户说一句话要等好几秒才能看到回应。

参数流方案虽然更轻量,但需要自己搭建完整的渲染管线:骨骼动画、表情驱动、口型同步……开发成本极高,普通开发者很难在短时间内跑通。

魔珐星云的出现,真正解决了这个痛点——一套 SDK 一站式接入,底层用参数流技术实现端侧渲染,端到端约 500ms 响应延迟,让普通开发者也能快速构建高质量的具身交互应用。我不需要关心渲染引擎怎么跑、模型怎么加载,只需要调用几个 API,3D 虚拟人就能在屏幕上开口说话、做出表情。

可拓展的场景

这个 Demo 虽然只是一个桌面应用,但魔珐星云的能力远不止于此。基于同样的 SDK 和交互逻辑,可以轻松拓展到更多真实场景:

  • 网页嵌入:在官网、电商平台嵌入3D客服
  • 展厅讲解:在博物馆、科技馆实现智能讲解员
  • 教育陪练:为在线教育提供虚拟助教
  • 人形机器人:将同样的交互逻辑迁移到实体机器人上

总结

大模型让AI学会了思考,但如果AI要真正进入终端场景,还需要"身体"、"表达"和"交互"。魔珐星云作为具身交互智能开放平台,补齐了这最后一块拼图。

通过 TRAE SOLO,我成功将网页版的3D虚拟人升级为独立桌面应用。整个开发过程高效流畅,主要得益于以下几点:

  1. 魔珐星云SDK的强大能力:提供了成熟的3D数字人渲染与交互方案,让AI从聊天框走向真实终端
  2. TRAE SOLO的智能开发能力:大幅减少了重复劳动,让我专注于核心逻辑
  3. Electron的跨平台能力:轻松将网页应用打包为桌面应用

如果你也想体验具身交互智能的魅力,不妨试试魔珐星云 SDK——注册时使用邀请码 JM2A7C9LSW 可以获得 1000 积分,几行代码就能让你的第一个数字人 Demo 跑起来。