星云SDK + 油猴：给LLM塑造肉身，陪伴你在每个网页

作为一名前端开发者，我一直有一个愿景：让大模型不再只是冰冷的输入框，而是能以具身交互智能数字人形象，出现在我们浏览的每一个网页上，一直陪伴我们。

这个想法其实来自钢铁侠的"贾维斯"，我希望在我使用浏览器的时候，AI助手一直在页面上陪伴我，写错了代码了立刻提醒，有疑问随时解答。幸运的是，随着大模型的发展，这些已经可以轻松实现。

今天，我想分享一个基于 魔珐星云SDK 和 油猴脚本 的方案，实现一个基础版的网页AI助手：用魔珐星云SDK结合LLM，打造拥有 3D 躯体、同步神态动作、支持实时打断的网页随身 AI 具身交互智能伙伴，再通过油猴脚本让它出现在任意网页上。

效果展示

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

• 无处不在的陪伴：

不管打开什么网页，点击链接，虚拟助手直接出现。下图分别是在 TRAE 官网和掘金热榜上的效果：

• 极速上手体验

基于油猴脚本，安装脚本后，配置好魔珐星云 SDK 的 ID和Key 就能跑起来体验，成本极低。

• 热切换形象，零配置

在魔珐星云控制台切换虚拟人的形象、场景、音色后，不需要改任何代码配置，脚本实时生效。

• 实时对话&语音交互：

发送文字消息后，数字人会实时语音播报，同时配合自然的表情和肢体动作，整个过程响应低于 500ms，并支持全程随时打断，体验流畅。

发送语音消息也没问题------基于第三方 ASR 语音识别，语音实时转文本，再交给星云 SDK 处理，实现真正的语音对话。

• LLM流式响应同步

脚本支持接入任意第三方大模型。以 DeepSeek 为例，LLM 流式输出的同时，3D 数字人就能基于已返回的内容实时生成语音，不用等整段文字全部返回才开始回答，大幅减少了等待感。

核心体验一句话概括：为 DeepSeek 等 LLM 补齐缺失的具身交互智能，让纯文本推理模型升级为看得见、能共情、可双向实时互动的全域网页陪伴智能体。

核心技术

整个 Demo 的实现依赖两个核心技术：魔珐星云具身驱动 SDK 负责 3D 虚拟人的渲染与交互，Tampermonkey（油猴脚本） 负责让它在任意网页上跑起来。

魔珐星云具身驱动SDK

魔珐星云是魔珐科技打造的「AI 具身交互智能体开放平台」，提供 AI 形象生成、多模态感知、大模型 Agent 认知、实时 3D 具象表达、机器人运控等端到端能力。

借助它的具身驱动 SDK，只要终端支持浏览器内核，就可以接入具备 AI 交互能力的 3D 虚拟人。平台采用完整自研参数流架构 + AI 端渲和解算原生技术，专门为各类 LLM、Agent 提供标准化具身交互智能，一站式完成 3D 形象生成、情绪同步、实时双向交互、多终端适配全链路能力。

技术模块	说明
语义情感理解	实时解析文本语义、情绪、动作意图
TTS语音生成	高自然度语音合成，延迟约100-500ms
表情动作生成	实时输出3D微表情、肢体动作、手势
AI端侧渲染	无需传统游戏引擎，百元级芯片即可运行

使用星云具身驱动SDK实现3D虚拟形象，具备以下优势：

• 低延时：端到端响应低于500ms，对话支持随时打断
• 高并发：支撑千万级设备同时在线
• 低成本：无需昂贵GPU，普通设备即可流畅运行
• 全兼容：覆盖手机、PC、大屏、机器人等终端

Tampermonkey篡改猴

Tampermonkey篡改猴又称为"油猴，"是一款老牌浏览器插件，它允许开发者以一段轻量的 JS 脚本，实现媲美原生浏览器扩展的功能。

它的工作原理很简单：在网页加载时注入自定义 JavaScript，从而增强、修改或自动化页面行为。常见的应用场景包括广告屏蔽、页面优化、自动填表、功能增强等。

如果你之前没接触过油猴脚本，可以参考：『油猴脚本实战指南 』

极速体验

1. 安装Tampermonkey浏览器插件

要体验Demo 中的效果，首先需要安装 [Tampermonkey（油猴）浏览器插件：gitee.com/sxshi/oil-m...

安装过程可参考：油猴脚本的安装与管理

插件装好后，有两种方式安装脚本：

• 方式一：在线链接安装

点击以下链接，Tampermonkey会自动唤起安装界面。

脚本安装地址：石小石Orz的魔珐星云虚拟人：greasyfork.org/zh-CN/scrip...

备用地址：gitee：www.tampermonkey.net/script_inst...

• 方式二：手动复制安装

点击浏览器菜单栏的油猴图标，选择「添加新脚本」，将以下脚本内容粘贴到编辑器中，Ctrl+S 保存即可。

gitee.com/sxshi/tampe...

安装完成后，刷新任意页面，就能在网页右下角看到操作面板：

如果你觉得油猴安装配置太麻烦，也可以直接访问以下网址，体验极简版 Demo

在线地址： https://www.axureshow.com/project/HDZcuEZb/

2. 获取星云SDK秘钥

前往 魔珐星云平台 注册账号，填写邀请码JM2A7C9LSW，获得1000积分。

1. 注册成功后进入「控制台」
2. 点击「具身驱动」创建应用
3. 选择你喜欢的数字人形象、场景及音色，然后点击「创建并进入调试」
4. 点击页面右上角「接入SDK」按钮获取 APP_ID 和 APP_SECRET

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

APP_ID 和 APP_SECRET获取成功后，点击脚本面板的设置按钮，配置秘钥

如果秘钥正确，点击「保存并连接」按钮，脚本就会开始创建连接，加载虚拟人。

3. 配置LLM API（可选）

脚本已内置 DeepSeek 模型作为默认选项，开箱即用，无需额外配置。

如果你想用自己的 DeepSeek API Key，前往 [DeepSeek API 平台](https://link.juejin.cn?target=https%3A%2F%2Fplatform.deepseek.com%2F "https://platform.deepseek.com/") 获取 Key，在设置面板中填入即可。

现在，你就可以尽情的探索脚本了。

脚本核心代码解析

具身驱动 SDK 的接入方式非常简单，整体流程可以分为三步：引入 SDK、初始化实例、调用播报方法。

首先，在页面中引入 SDK：

<script src="https://media.xingyun3d.com/xingyun3d/general/litesdk/xmovAvatar@latest.js"></script>

然后创建 SDK 实例，并完成初始化。这里需要将 appId 和 appSecret 替换为刚才在魔珐星云控制台中复制的内容：

const sdk = new XmovAvatar({
  containerId: "#sdk", // 必填：数字人挂载容器
  appId: "your_appid", // 必填：应用 AppID
  appSecret: "your_appsecret", // 必填：应用 AppSecret
  gatewayServer: "https://nebula-agent.xingyun3d.com/user/v1/ttsa/session", // 必填：服务接口地址

  // SDK 事件回调，方便调试
  onMessage(message) {
    console.log("SDK message:", message);
  },
});

// 初始化 SDK，加载数字人资源
await sdk.init({
  onDownloadProgress(progress) {
    console.log(`资源加载进度：${progress}%`);
  },
});

初始化完成后，调用 speak 方法即可让数字人开口说话：

sdk.speak("你好，石小石，我是你的 AI 伴侣~", true, true);

如果只是播报一句完整的话，后两个参数通常都传 true

sdk实例化后，拥有以下核心方法：

方法	说明	参数
init(config)	初始化实例，连接服务并加载资源	config.onDownloadProgress：可选，监听加载进度
destroy()	关闭连接，释放资源	无
offlineMode()	进入离线模式，循环播放缓存视频（不消耗积分）	无
onlineMode()	从离线模式切回在线模式	无
idle()	切换到待机状态	无
interactiveIdle()	互动待机状态，可被其他状态打断	无
listen()	倾听状态，数字人正在接收用户语音输入	无
think()	思考状态，用户提问后、AI 尚未回复时的过渡	无
speak(ssml, isStart, isEnd)	驱动数字人说话，支持流式分段调用	ssml：文本/SSML；isStart/isEnd：标记是否为流式的起止片段

SDK 的能力到"让数字人说话"为止，至于说什么、怎么说，需要我们自己对接大模型。这其实和普通的 AI 对话开发没什么区别，核心就是把 AI 的输出通过 sdk.speak() 播报出来。

文字对话功能的核心是调用 LLM 获取回复，将结果传入 sdk.speak() 即可。配合流式输出，可以分段调用 speak()，每段传不同的 isStart/isEnd 标记，实现边生成边播报。

语音对话需要借助第三方 ASR 语音识别服务，将用户语音实时转为文本，送给 AI 处理后，再将结果喂给 sdk.speak()。整个链路就是：语音 → ASR → 文本 → LLM → 回复 → SDK 播报。

总结

本文分享了一个将 3D 虚拟数字人嵌入任意网页的方案：通过魔珐星云具身驱动 SDK 实现低延迟、高表现力的数字人渲染与交互，再借助油猴脚本的注入能力，让它出现在任意网页上。

整个方案的代码量并不大，技术栈也很简单：SDK 负责"形象 + 表达"，油猴负责"无处不在"，LLM 负责"大脑"。三者组合起来，就把一个原本只能在对话框里回复文字的 AI，变成了一个有形象、能说话、随叫随到的数字伙伴。

如果你也在做大模型应用，不妨试试这个方向------让 AI 不再只是一个输入框，而是真正"站在"用户面前的陪伴者。