在AI技术普及的今天，我们早已习惯与ChatGPT聊方案、用MidJourney画海报，但这些交互始终停留在“平面”，无法像真人一样通过表情、动作传递情绪。直到接触魔珐星云，我才发现：原来3D数字人开发可以如此简单，甚至能让普通开发者在1小时内，搭建出“会说话、会动、会思考”的智能数字人应用。
魔珐星云是魔珐科技推出的具身智能3D数字人开放平台，核心是让AI拥有“身体”与“多模态交互能力”。先从最基础的“注册-体验”流程说起，新手也能轻松跟上。
打开魔珐星云官网，点击右上角“登录”，支持手机号、微信、企业邮箱等方式注册。完成注册后，系统自动赠送100积分（输入邀请码还能额外获得1000积分），积分可用于体验中心的功能测试、SDK调用等，足够完成入门级开发。
登录后进入控制台，界面分为三大核心模块：
如果对“具身智能”没概念，建议先去体验中心实操：
我测试了“具身驱动”功能：输入“今天天气不错，要不要一起去公园？”，数字人不仅用自然的语气回应，还配合了“摊手”的手势和“微笑”的表情，连眼神都跟着说话节奏转动，完全没有传统数字人的“机械感”。
选择场景，配置脚本，就可以生成视频：
上传自己的文档，自动制作ppt
传统3D数字人开发有个“不可能三角”：高质量（自然）、低延时（实时）、低投入（成本），三者无法同时满足。而魔珐星云通过六大技术优势，把“不可能”变成了“常态化”。
接下来以“智能数字人客服”为例，详细讲解从“创建应用”到“本地运行”的全流程，新手也能跟着做。
2. 应用创建完成后，点击“查看详情”，复制SDK App Id和秘钥（后续开发需要用到）；
选择场景、音色、表演等
虚拟人 SDK 配置
在我们体验自己的3D数字人界面可以看到虚拟人的SDK配置
语音识别配置
本文选择腾讯云的ASR示范，复制连接参数ASR App ID、ASR Secret ID、ASR Secret Key
大语言模型配置
选择火山方舟系的大模型，可以从火山方舟获取参数
再创建一个API key
项目是一个基于Vue 3 + TypeScript + Vite构建的智能虚拟人交互演示应用，集成了语音识别、大语言模型和虚拟人SDK，提供完整的交互体验。下面从核心模块和关键代码实现进行详细说明。
创建项目
# 创建项目（pnpm为例，npm/yarn同理）
npm create vite vue-xingyun-ai-customer-service --template vue-ts
# 进入项目目录
cd vue-xingyun-ai-customer-service
# 安装基础依赖
npm install
项目结构
魔珐星云AI客服/
vue-xingyun-ai-customer-service/
├── .gitignore # Git忽略文件配置
├── index.html # 入口HTML文件
├── package.json # 项目依赖配置
├── package-lock.json # 依赖版本锁定文件
├── README.md # 项目说明文档
├── README.en.md # 英文说明文档
├── vite.config.js # Vite配置文件
├── src/
│ ├── main.ts # 应用入口文件
│ ├── App.vue # 根组件
│ ├── styles/
│ │ └── main.css # 全局样式
│ ├── services/ # 服务层
│ │ ├── llm.service.js # 豆包大模型服务封装
│ │ └── xingyun.service.js # 魔珐星云SDK服务封装
│ ├── components/ # 业务组件
│ │ └── CustomerService.vue # 客服主组件
│ ├── config/ # 配置文件
│ └── utils/ # 工具函数
└── dist/ # 构建输出目录(执行build后生成)
引入魔珐星云SDK
在 index.html 中引入SDK脚本，这是最关键的一步：
SDK通过CDN方式引入，@latest是自动获取最新版本
必须在 <body> 标签内引入，确保DOM已加载
SDK引入后会在全局注册 XmovAvatar 类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 设置视口，确保在不同设备上正确显示 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 页面标题 -->
<title>魔珐星云AI客服</title>
<!-- 引入魔珐星云SDK（必须） -->
<script src="https://media.xingyun3d.com/xingyun3d/general/litesdk/xmovAvatar@latest.js"></script>
</head>
<body>
<!-- Vue应用的挂载点，id必须与main.js中的选择器一致 -->
<div id="app"></div>
<!-- 由Vite构建工具自动注入模块化脚本 -->
<script type="module" src="/src/main.ts"></script>
</body>
</html>
魔珐星云SDK服务封装（src/services/xingyun.service.js）
/**
* 魔珐星云SDK服务封装
* 用于初始化3D数字人、控制数字人动作和语音
* 参考官方文档：https://xingyun3d.com/developers/52-183
*/
class XingYunService {
constructor() {
this.sdkInstance = null; // 星云SDK实例
this.isInitialized = false; // SDK初始化状态标记
this.containerId = 'avatar-container'; // 数字人渲染容器ID
}
/**
* 初始化星云SDK
* @param {Object} config - 配置参数对象
* @param {string} config.appId - 应用ID（从魔珐平台获取）
* @param {string} config.appSecret - 应用密钥（从魔珐平台获取）
* @param {Function} config.onStateChange - 状态变化回调
* @param {Function} config.onSubtitle - 字幕显示回调
* @returns {boolean} 初始化是否成功
*/
async initSDK(config) {
try {
// 检查SDK是否已加载，未加载则动态加载
if (!window.XmovAvatar) {
await this.loadSDKScript();
}
// 创建SDK实例
this.sdkInstance = new window.XmovAvatar({
containerId: `#${this.containerId}`, // 数字人渲染容器
appId: config.appId, // 应用ID
appSecret: config.appSecret, // 应用密钥
gatewayServer: 'https://nebula-agent.xingyun3d.com/user/v1/ttsa/session', // 网关服务器地址
// 数字人状态变化回调
onStateChange: (state) => {
console.log('数字人状态变化:', state);
if (config.onStateChange) config.onStateChange(state);
},
// 语音状态变化回调
onVoiceStateChange: (status) => {
console.log('语音状态:', status);
if (config.onVoiceStateChange) config.onVoiceStateChange(status);
},
// 字幕显示事件回调
onWidgetEvent: (data) => {
console.log('[SDK Widget事件]', data);
// 当有字幕显示时触发
if (data.type === 'subtitle_on' && config.onSubtitle) {
config.onSubtitle(data.text);
}
// 当字幕结束时触发
else if (data.type === 'subtitle_off' && config.onSubtitleEnd) {
config.onSubtitleEnd();
}
},
// 开发环境启用日志
enableLogger: process.env.NODE_ENV === 'development'
});
// 初始化连接，加载数字人资源
await this.sdkInstance.init({
// 资源加载进度回调
onDownloadProgress: (progress) => {
console.log('资源加载进度:', progress + '%');
if (config.onProgress) config.onProgress(progress);
},
// 错误回调
onError: (error) => {
console.error('初始化错误:', error);
if (config.onError) config.onError(error);
},
// 连接关闭回调
onClose: () => {
console.log('连接已关闭');
if (config.onClose) config.onClose();
}
});
this.isInitialized = true;
console.log('魔珐星云SDK初始化成功');
return true;
} catch (error) {
console.error('初始化SDK失败:', error);
throw error; // 抛出错误供调用者处理
}
}
/**
* 动态加载SDK脚本
* 从官方CDN加载最新版本的魔珐星云SDK
* @returns {Promise} 加载成功/失败的Promise
*/
loadSDKScript() {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = 'https://media.xingyun3d.com/xingyun3d/general/litesdk/xmovAvatar@latest.js';
script.onload = resolve; // 加载成功回调
script.onerror = reject; // 加载失败回调
document.head.appendChild(script); // 添加到页面
});
}
/**
* 让数字人说话
* @param {string} text - 要说的文本内容（支持SSML格式）
* @param {boolean} isStart - 是否为一段新的语音开始
* @param {boolean} isEnd - 是否为一段语音的结束
*/
speak(text, isStart = true, isEnd = true) {
// 检查SDK是否已初始化
if (!this.isInitialized || !this.sdkInstance) {
throw new Error('SDK未初始化，请先调用initSDK方法');
}
// 调用SDK的speak方法
this.sdkInstance.speak(text, isStart, isEnd);
}
/**
* 让数字人说话并执行指定动作
* 使用SSML格式控制数字人动作和语音
* @param {string} text - 说话内容
* @param {string} action - 动作类型（如Hello、Agree等）
*/
speakWithAction(text, action = 'Hello') {
// 构建包含动作指令的SSML
const ssml = `
<speak>
<ue4event>
<type>ka</type>
<data>
<action_semantic>${action}</action_semantic> <!-- 动作指令 -->
</data>
</ue4event>
${text} <!-- 说话内容 -->
</speak>`;
// 调用speak方法发送SSML
this.speak(ssml, true, true);
}
/**
* 断开数字人连接并销毁实例
*/
disconnect() {
if (this.sdkInstance) {
this.sdkInstance.stop(); // 停止数字人
this.sdkInstance.destroy(); // 销毁实例
this.sdkInstance = null;
this.isInitialized = false;
}
}
/**
* 获取数字人支持的动作列表
* 实际应用中可通过星云平台API获取更多动作
* @returns {Array} 动作列表
*/
getSupportedActions() {
return ['Hello', 'Goodbye', 'Agree', 'Disagree', 'Think', 'Explain'];
}
}
// 导出单例实例
export default new XingYunService();
AI对话服务（src/services/llm.service.js）
import { OpenAI } from 'openai'; // 导入OpenAI SDK
// 初始化OpenAI客户端
const openai = new OpenAI({
apiKey: import.meta.env.VITE_OPENAI_API_KEY, // 从环境变量获取API密钥
baseURL: import.meta.env.VITE_OPENAI_BASE_URL, // 可选：自定义API地址
timeout: 60000, // 超时时间设置为60秒
});
/**
* 发送消息并获取流式响应
* 用于实现AI客服的实时对话功能
* @param {string} userMessage - 用户输入的消息
* @param {string} systemPrompt - 系统提示词，用于定义AI角色
* @returns {AsyncGenerator} 异步生成器，逐块返回AI响应
*/
async function* sendMessageStream(userMessage, systemPrompt = '你是一个专业的AI客服助手。') {
// 构建对话消息数组
const messages = [
{ role: 'system', content: systemPrompt }, // 系统提示
{ role: 'user', content: userMessage } // 用户消息
];
try {
// 调用OpenAI API获取流式响应
const stream = await openai.chat.completions.create({
model: 'doubao-1-5-pro-32k-250115', // 使用的模型名称
messages: messages, // 对话历史
stream: true, // 启用流式响应
});
// 遍历流式响应的每个chunk
for await (const chunk of stream) {
// 提取当前chunk的内容（处理可能的空内容）
const content = chunk.choices[0]?.delta?.content || '';
if (content) {
yield content; // 产出当前内容块
}
}
} catch (error) {
console.error('AI请求失败:', error);
throw error; // 抛出错误供调用者处理
}
}
// 导出服务方法
export default {
sendMessageStream
};
客服交互组件（src/components/CustomerService.vue 核心脚本部分）
<script setup>
import { ref, onMounted, nextTick } from 'vue';
import XingYunService from '../services/xingyun.service';
import LLMService from '../services/llm.service';
// 状态管理
const chatHistory = ref([]); // 聊天历史记录
const userInput = ref(''); // 用户输入内容
const selectedAction = ref(''); // 选中的数字人动作
const isLoading = ref(false); // 加载状态
const progress = ref(0); // 数字人加载进度
const chatContainer = ref(null); // 聊天容器DOM引用
const currentSubtitle = ref(''); // 当前显示的字幕
// 数字人支持的动作列表
const actions = ref([
{ value: '', label: '无动作' },
...XingYunService.getSupportedActions().map(action => ({
value: action,
label: getActionLabel(action)
}))
]);
// 快速回复选项
const quickReplies = [
'你能帮我做什么？',
'如何修改个人信息？',
'订单查询流程是怎样的？',
'退换货政策是什么？'
];
/**
* 组件挂载时初始化数字人服务
*/
onMounted(async () => {
try {
// 初始化数字人，传入配置参数
await XingYunService.initSDK({
appId: import.meta.env.VITE_XINGYUN_APPID, // 从环境变量获取appId
appSecret: import.meta.env.VITE_XINGYUN_SECRET, // 从环境变量获取appSecret
onProgress: (val) => { progress.value = val; }, // 进度更新
onStateChange: (state) => {
if (state === 'ready') {
addMessage('system', '数字人已准备就绪，有什么可以帮助您的吗？');
}
},
onSubtitle: (text) => { currentSubtitle.value = text; }, // 显示字幕
onSubtitleEnd: () => { currentSubtitle.value = ''; } // 清除字幕
});
} catch (error) {
console.error('初始化失败:', error);
addMessage('system', '初始化数字人服务失败，请刷新页面重试。');
}
});
/**
* 发送消息处理函数
*/
const sendMessage = async () => {
// 验证输入不为空
if (!userInput.value.trim()) return;
const text = userInput.value;
// 添加用户消息到历史记录
addMessage('user', text);
isLoading.value = true;
try {
// 获取AI流式响应
const aiStream = LLMService.sendMessageStream(text);
let aiReply = '';
// 逐块处理AI响应
for await (const chunk of aiStream) {
aiReply += chunk;
// 实时更新AI回复（这里简化处理，实际可优化为增量更新）
}
// 发送完成后添加AI回复到历史记录
addMessage('ai', aiReply);
// 根据选择的动作类型让数字人说话
if (selectedAction.value) {
XingYunService.speakWithAction(aiReply, selectedAction.value);
} else {
XingYunService.speak(aiReply, true, true);
}
} catch (error) {
addMessage('system', '获取回复失败，请重试');
console.error('消息处理失败:', error);
} finally {
// 重置输入状态
userInput.value = '';
selectedAction.value = '';
isLoading.value = false;
}
};
/**
* 发送快速回复消息
* @param {string} text - 快速回复的内容
*/
const sendQuickMessage = (text) => {
userInput.value = text;
sendMessage();
};
/**
* 添加消息到聊天历史
* @param {string} type - 消息类型（user/ai/system）
* @param {string} content - 消息内容
*/
const addMessage = (type, content) => {
const now = new Date();
// 格式化时间为HH:MM
const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
// 添加消息到历史记录
chatHistory.value.push({
type,
content,
time
});
// 确保DOM更新后滚动到底部
nextTick(() => {
if (chatContainer.value) {
chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
}
});
};
/**
* 获取动作的中文标签
* @param {string} action - 动作英文标识
* @returns {string} 中文标签
*/
const getActionLabel = (action) => {
const labels = {
'Hello': '招手问候',
'Goodbye': '挥手告别',
'Agree': '点头赞同',
'Disagree': '摇头否定',
'Think': '思考动作',
'Explain': '解释说明'
};
return labels[action] || action;
};
</script>
配置密钥：
在 CustomerService.vue 中替换：
const config = {
appId: 'YOUR_APP_ID', // 替换为你的App ID
appSecret: 'YOUR_APP_SECRET', // 替换为你的App Secret
// ...
}
这些代码文件构成了项目的核心功能：
整个项目代码地址：https://gitee.com/nickygitee/vue-xingyun-ai-customer-service
npm run dev，启动本地服务；localhost:5173，进入数字人助手界面；我测试了文字输入的，输入“你好呀”，3D数字人客服会回答，说话时有手势配合的动作，就像真人在面对面推荐。
魔珐星云的应用场景覆盖千行百业，无论是个人开发者还是企业用户，都能找到适配的方向。我整理了 4 个典型落地案例，带大家感受具身智能的价值：
依托魔珐星云的低门槛优势，个人开发者可快速搭建轻量级应用：
AI 陪伴助手：接入情感分析 API，数字人能根据用户语气调整回应方式，比如用户说 “今天工作好累”，数字人会 “温柔安慰 + 推荐放松方法”，配合 “轻拍肩膀” 的动作，传递情绪价值；
英语陪练助手：数字人可模拟外教对话，实时纠正发音错误，还会用 “手势演示” 辅助讲解语法，比如用 “比划时态时间轴” 的方式解释 “过去时与现在完成时的区别”。
智能客服：部署在企业官网或 APP 中，数字人可解答售前咨询（如 “产品价格”“售后政策”），支持 “7×24 小时服务”，企业客服成本降低 60%，用户响应时间缩短至 1 秒；
AI 面试官：模拟真实面试场景，数字人会根据岗位需求提问（如产品经理岗位会问 “如何设计一款社交 APP”），实时记录回答要点，面试后自动生成评估报告，企业招聘筛选效率提升 40%。
医院导诊员：部署在医院大厅大屏，患者可语音咨询 “内科门诊位置”“医保报销流程”，数字人会用 “手势指向方向” 配合讲解，还会演示 “线上挂号步骤”，老年人也能轻松理解；
车站咨询员：实时解答 “车次查询”“退票政策” 等问题，高峰时段可同时服务上千名旅客，避免人工窗口排队拥堵。
虚拟偶像互动：为静态 IP 角色（如动漫角色、游戏皮肤）注入交互能力，粉丝可与虚拟偶像实时聊天、合拍视频，还能观看偶像 “即兴表演”，提升 IP 商业价值；
智能游戏 NPC：传统游戏 NPC 仅能按固定脚本回应，而魔珐星云驱动的 NPC 能 “自主思考”，比如玩家问 “这个副本怎么打”，NPC 会根据玩家等级推荐策略，还会用 “拔剑演示” 的方式讲解技巧，游戏沉浸感大幅提升。
魔珐星云的核心价值，是把“专业级3D数字人开发”变成了“人人可及的工具”——无需昂贵硬件、不用专业技能，普通开发者也能在1小时内，搭建出“会说话、会动、会思考”的数字人应用。
如果你也想体验“给AI安上身体”的乐趣，不妨从魔珐星云的体验中心开始，说不定下一个改变行业的数字人应用，就出自你手中！
魔珐星云体验页面：【点击进入】
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。