星雲 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（油猴）瀏覽器外掛]
安裝過程可參考：油猴腳本的安裝與管理
外掛裝好後，有兩種方式安裝腳本：
- 方式一：線上連結安裝
在greasyfork.org 官網，搜尋腳本：石小石Orz的魔珐星雲虛擬人，然後點擊安裝此腳本
- 方式二：手動複製安裝
點擊瀏覽器選單列的油猴圖示，選擇「新增新腳本」，將以下腳本內容貼到編輯器中，Ctrl+S 儲存即可。
安裝完成後，重新整理任意頁面，就能在網頁右下角看到操作面板：
如果你覺得油猴安裝配置太麻煩，也可以直接造訪以下網址，體驗極簡版 Demo
線上地址： https://www.axureshow.com/project/HDZcuEZb/
2. 取得星雲 SDK 秘鑰
前往 魔珐星雲平台 註冊帳號，填寫邀請碼 JM2A7C9LSW，獲得 1000 積分。
- 註冊成功後進入「控制台」
- 點擊「具身驅動」建立應用
- 選擇你喜歡的數位人形象、場景及音色，然後點擊「建立並進入調試」
- 點擊頁面右上角「接入 SDK」按鈕取得
APP_ID和APP_SECRET
💡 使用邀請碼
JM2A7C9LSW註冊可獲得 1000 積分，否則獲得 100 積分，積分類似大模型的 token。
APP_ID 和 APP_SECRET 取得成功後，點擊腳本面板的設定按鈕，設定秘鑰
如果秘鑰正確，點擊「儲存並連線」按鈕，腳本就會開始建立連線，載入虛擬人。
3. 設定 LLM API（可選）
腳本已內建 DeepSeek 模型作為預設選項，開箱即用，無需額外設定。
如果你想用自己的 DeepSeek API Key，前往 [DeepSeek API 平台] 取得 Key，在設定面板中填入即可。
現在，你就可以盡情探索腳本了。
腳本核心程式碼解析
具身驅動 SDK 的接入方式非常簡單，整體流程可以分為三步：引入 SDK、初始化實例、呼叫播報方法。
首先，在頁面中引入 SDK：
js 代碼解讀複製代碼<script src="https://media.xingyun3d.com/xingyun3d/general/litesdk/[email protected]"></script>然後建立 SDK 實例，並完成初始化。這裡需要將 appId 和 appSecret 替換為剛才在魔珐星雲控制台中複製的內容：
js 代碼解讀複製代碼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 方法即可讓數位人開口說話：
js 代碼解讀複製代碼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 不再只是一個輸入框，而是真正「站在」使用者面前的陪伴者。
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
