As a frontend developer, I've always had a vision: to let large models no longer be just cold input boxes, but to appear as digital humans with embodied interaction intelligence on every webpage we browse, always accompanying us.

This idea actually comes from Iron Man's 'Jarvis.' I hope that when I use the browser, an AI assistant is always on the page with me, immediately reminding me when I write wrong code, and answering questions at any time. Fortunately, with the development of large models, this can now be easily achieved.

Today, I want to share a solution based on the Mofa Nebula SDK and Tampermonkey scripts to implement a basic version of a webpage AI assistant: Use the Mofa Nebula SDK combined with an LLM to create an AI embodied interaction companion with a 3D body, synchronized expressions and movements, and support for real-time interruption, then use a Tampermonkey script to make it appear on any webpage.

Effect Demonstration

First, let's look at the final effect of the script.

• Ubiquitous Companionship:

No matter what webpage you open or link you click, the virtual assistant appears directly. The images below show the effect on the TRAE official website and the Juejin trending list:

• Quick Start Experience

Based on the Tampermonkey script, after installing the script and configuring the Mofa Nebula SDK ID and Key, you can run it and experience it, with extremely low cost.

• Hot-Swap Avatars, Zero Configuration

After switching the virtual human's appearance, scene, and voice in the Mofa Nebula console, no code configuration changes are needed; the script takes effect in real time.

• Real-time Dialogue & Voice Interaction:

After sending a text message, the digital human broadcasts it in real-time voice, accompanied by natural expressions and body movements. The entire process responds in under 500ms and supports interruption at any time, providing a smooth experience.

Sending voice messages is also fine—based on third-party ASR speech recognition, voice is converted to text in real time, then handed over to the Nebula SDK for processing, achieving true voice dialogue.

• LLM Streaming Response Synchronization

The script supports connecting to any third-party large model. Taking DeepSeek as an example, while the LLM outputs in a stream, the 3D digital human can generate speech in real time based on the content already returned, without waiting for the entire text to be returned before starting to answer, greatly reducing the feeling of waiting.

The core experience can be summarized in one sentence: Supplement the missing embodied interaction intelligence for LLMs like DeepSeek, upgrading a pure text reasoning model into a visible, empathetic, and bidirectionally real-time interactive, domain-wide webpage companion agent.

Core Technology

The implementation of the entire Demo relies on two core technologies: the Mofa Nebula Embodied Driving SDK is responsible for the rendering and interaction of the 3D virtual human, and Tampermonkey is responsible for making it run on any webpage.

Mofa Nebula Embodied Driving SDK

Mofa Nebula is an 'AI Embodied Interaction Agent Open Platform' created by Mofa Technology, providing end-to-end capabilities such as AI avatar generation, multimodal perception, large model Agent cognition, real-time 3D embodied expression, and robot motion control.

With its Embodied Driving SDK, as long as the terminal supports a browser kernel, you can access 3D virtual humans with AI interaction capabilities. The platform adopts a fully self-developed parameter stream architecture + AI end-rendering and solving native technology, specifically providing standardized embodied interaction intelligence for various LLMs and Agents, completing the full chain of 3D avatar generation, emotion synchronization, real-time bidirectional interaction, and multi-terminal adaptation in one stop.

Technical Module	Description
Semantic Emotion Understanding	Real-time parsing of text semantics, emotions, and action intentions
TTS Voice Generation	High-naturalness speech synthesis, latency about 100-500ms
Expression and Action Generation	Real-time output of 3D micro-expressions, body movements, and gestures
AI End-Side Rendering	No traditional game engine needed, runs on hundred-yuan-level chips

Using the Nebula Embodied Driving SDK to implement a 3D virtual avatar has the following advantages:

• Low Latency: End-to-end response under 500ms, dialogue supports interruption at any time
• High Concurrency: Supports tens of millions of devices online simultaneously
• Low Cost: No expensive GPU needed, runs smoothly on ordinary devices
• Full Compatibility: Covers terminals such as mobile phones, PCs, large screens, and robots

Tampermonkey

Tampermonkey, also known as 'Oil Monkey,' is a veteran browser extension that allows developers to use a lightweight JS script to achieve functions comparable to native browser extensions.

Its working principle is simple: inject custom JavaScript when a webpage loads, thereby enhancing, modifying, or automating page behavior. Common application scenarios include ad blocking, page optimization, auto-filling forms, and feature enhancement.

If you haven't been exposed to Tampermonkey scripts before, you can refer to: 'Tampermonkey Script Practical Guide'

Quick Experience

1. Install the Tampermonkey Browser Extension

To experience the effects in the Demo, you first need to install the [Tampermonkey browser extension]

For the installation process, refer to: Installation and Management of Tampermonkey Scripts

After the extension is installed, there are two ways to install the script:

• Method 1: Install via Online Link

On the https://greasyfork.org official website, search for the script: 石小石Orz's Mofa Nebula Virtual Human, then click Install this script

• Method 2: Manual Copy and Install

Click the Tampermonkey icon in the browser menu bar, select 'Add a new script,' paste the following script content into the editor, and press Ctrl+S to save.

https://gitee.com/sxshi/tampermonkey-nebula/blob/master/dist/xinyun3d.user.js

After installation, refresh any page, and you will see the operation panel in the lower right corner of the webpage:

If you find the Tampermonkey installation and configuration too troublesome, you can also directly visit the following URL to experience the minimalist version of the Demo

Online Address: https://www.axureshow.com/project/HDZcuEZb/

2. Obtain the Nebula SDK Key

Go to the Mofa Nebula Platform to register an account, fill in the invitation code JM2A7C9LSW, and get 1000 points.

1. After successful registration, enter the 'Console'
2. Click 'Embodied Driving' to create an application
3. Choose your preferred digital human avatar, scene, and voice, then click 'Create and Enter Debugging'
4. Click the 'Access SDK' button in the upper right corner of the page to get APP_ID and APP_SECRET

💡 Using the invitation code JM2A7C9LSW to register gives you 1000 points; otherwise, you get 100 points. Points are similar to tokens for large models.

After successfully obtaining APP_ID and APP_SECRET, click the settings button on the script panel to configure the key

If the key is correct, click the 'Save and Connect' button, and the script will start creating a connection and loading the virtual human.

3. Configure LLM API (Optional)

The script has the DeepSeek model built-in as the default option, ready to use out of the box without additional configuration.

If you want to use your own DeepSeek API Key, go to the [DeepSeek API Platform] to get the Key, and fill it in the settings panel.

Now, you can explore the script to your heart's content.

Script Core Code Analysis

The access method for the Embodied Driving SDK is very simple. The overall process can be divided into three steps: Introduce the SDK, Initialize the Instance, Call the Broadcast Method.

First, introduce the SDK in the page:

<script src="https://media.xingyun3d.com/xingyun3d/general/litesdk/[email protected]"></script>

Then create an SDK instance and complete initialization. Here, you need to replace appId and appSecret with the content copied from the Mofa Nebula console just now:

const sdk = new XmovAvatar({
  containerId: "#sdk", // Required: Digital human mount container
  appId: "your_appid", // Required: Application AppID
  appSecret: "your_appsecret", // Required: Application AppSecret
  gatewayServer: "https://nebula-agent.xingyun3d.com/user/v1/ttsa/session", // Required: Service interface address

  // SDK event callback, convenient for debugging
  onMessage(message) {
    console.log("SDK message:", message);
  },
});

// Initialize the SDK, load digital human resources
await sdk.init({
  onDownloadProgress(progress) {
    console.log(`Resource loading progress: ${progress}%`);
  },
});

After initialization is complete, call the speak method to make the digital human speak:

sdk.speak("Hello, Shixiaoshi, I am your AI companion~", true, true);

If you are just broadcasting a complete sentence, the last two parameters are usually both passed as true

After the sdk is instantiated, it has the following core methods:

Method	Description	Parameters
init(config)	Initialize the instance, connect to the service and load resources	config.onDownloadProgress: Optional, listen to loading progress
destroy()	Close the connection, release resources	None
offlineMode()	Enter offline mode, loop cached video (does not consume points)	None
onlineMode()	Switch from offline mode back to online mode	None
idle()	Switch to idle state	None
interactiveIdle()	Interactive idle state, can be interrupted by other states	None
listen()	Listening state, the digital human is receiving user voice input	None
think()	Thinking state, the transition after a user asks a question and before the AI replies	None
speak(ssml, isStart, isEnd)	Drive the digital human to speak, supports streaming segmented calls	ssml: Text/SSML; isStart/isEnd: Mark whether it is the start/end segment of the stream

The SDK's capability stops at 'making the digital human speak.' As for what to say and how to say it, we need to connect to a large model ourselves. This is actually no different from ordinary AI dialogue development; the core is to broadcast the AI's output through sdk.speak().

The core of the text dialogue function is to call the LLM to get a reply and pass the result into sdk.speak(). Combined with streaming output, speak() can be called in segments, passing different isStart/isEnd markers for each segment to achieve broadcasting while generating.

Voice dialogue requires the help of a third-party ASR speech recognition service to convert user voice into text in real time, send it to the AI for processing, and then feed the result to sdk.speak(). The entire chain is: Voice → ASR → Text → LLM → Reply → SDK Broadcast.

Summary

This article shared a solution for embedding a 3D virtual digital human into any webpage: Use the Mofa Nebula Embodied Driving SDK to achieve low-latency, high-expressiveness digital human rendering and interaction, and then use the injection capability of Tampermonkey scripts to make it appear on any webpage.

The amount of code for the entire solution is not large, and the tech stack is very simple: the SDK is responsible for 'appearance + expression,' Tampermonkey is responsible for 'ubiquity,' and the LLM is responsible for the 'brain.' The combination of the three turns an AI that could originally only reply with text in a dialog box into a digital companion with an appearance, that can speak, and is available on call.

If you are also working on large model applications, you might as well try this direction—let AI no longer be just an input box, but a companion that truly 'stands' in front of the user.