sandai-react

<!DOCTYPE html><html class="default" lang="en" data-base="."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>sandai-react - v2.1.8</title><meta name="description" content="Documentation for sandai-react"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script defer src="assets/main.js"></script><script async src="assets/icons.js" id="tsd-icons-script"></script><script async src="assets/search.js" id="tsd-search-script"></script><script async src="assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">sandai-react - v2.1.8</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><h1>sandai-react - v2.1.8</h1></div><div class="tsd-panel tsd-typography"><a id="sandai-react" class="tsd-anchor"></a><h1 class="tsd-anchor-link">sandai-react<a href="#sandai-react" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h1>The React way to embed a conversational 3D AI avatar; on-device, privacy-first, one component. See what it's able to do in a <a href="https://sustainabilitymap-mit-horst.diekavallerie.de/">custom implementation from DIE KAVALLERIE 🐴</a> Live playground: <a href="https://sandai.org/api_playground">sandai.org</a> <code>sandai-react</code> is the React SDK for dropping a fully interactive 3D AI avatar into any React or Next.js app. Mount a single <code><AI3DCharacter /></code> component and you get a real-time AI avatar. A browser-based digital human, mascot, animal, you name it, that can speak, listen, think, and emote. Under the hood it renders the same heavily optimized runtime as <a href="https://gitlab.com/DavidCks1/sandai-core"><code>sandai-core</code></a>, so you get a complete conversational AI avatar: on-device text-to-speech, speech recognition, an on-device LLM, emotion inference, and lip-sync, with no backend to run and nothing to install. By default, everything runs locally in the browser via WebAssembly and WebGL/WebGPU. No API keys, no per-message costs, and no user audio ever leaves the device. <code>sandai-react</code> re-exports all of <code>sandai-core</code> and wraps it in idiomatic React: a declarative component that builds the embed URL from props and hands you a typed <code>SandaiClient</code> in <code>onLoad</code>. It builds on the same stack: <a href="https://gitlab.com/DavidCks1/sandai-core"><code>sandai-core</code></a> → <a href="https://gitlab.com/DavidCks1/ai-vrm-chat"><code>ai-vrm-chat</code></a> → <a href="https://gitlab.com/DavidCks1/ai-character"><code>ai-character</code></a> → <a href="https://gitlab.com/DavidCks1/r3f-vrm"><code>@davidcks/r3f-vrm</code></a> (Three.js / React Three Fiber). <a id="features" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Features<a href="#features" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><ul> <li>One component, zero boilerplate: render <code><AI3DCharacter /></code>, get a typed <code>SandaiClient</code> in <code>onLoad</code>. No iframe wiring, no <code>postMessage</code> plumbing, no 3D engine, no game engine, no local GPU server, no API gateway.</li> <li>3D VRM avatars: load any <code>.vrm</code> model and get a fully animated talking avatar with auto-blink, gaze, idle motion, and camera focus. Bring your own character, use a bundled one, or pick from over 100,000 models at <a href="https://sandai.org/dashboard#API-Playground">sandai.org</a>.</li> <li>On-device LLM: a local LLM (Gemma, Qwen, and others via transformers.js / ONNX and MediaPipe LiteRT-LM) generates replies in-browser. Or plug in your own and just stream text in.</li> <li>Text-to-speech, 100+ voices, 30+ languages: built-in multilingual TTS powered by Piper, selectable per character with the typed <code>voiceName</code> prop.</li> <li>Real-time lip-sync: accurate lip-sync driven from phonemes or directly from the audio waveform, with coarticulation so the mouth never looks robotic.</li> <li>Speech recognition (ASR) + VAD: the avatar can listen and reply on its own via on-device Whisper / Moonshine speech-to-text with Silero voice-activity detection.</li> <li>Emotion inference & expression: text is mapped to 28 GoEmotions-style emotions that automatically drive facial expressions and graded body animations.</li> <li>Fully typed: props, voices (<code>VoiceNames</code>), environments (<code>Environments</code>), and the entire <code>SandaiClient</code> RPC surface ship with TypeScript types and autocomplete.</li> <li>WebGL & WebGPU rendering, with an optional experimental GPU path-tracer (<code>raytrace</code>) for cinematic, ray-traced scenes.</li> <li>Built-in dev tooling: <code>AI3DCharacterDocs</code> renders interactive, runnable documentation for every method the character exposes — a live playground inside your own app.</li> <li>Privacy-first, no backend: conversation, voice, and inference happen on the user's device. Great for GDPR-sensitive products, offline-capable apps, and keeping inference costs at zero.</li> </ul> <a id="use-cases" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Use cases<a href="#use-cases" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2>AI agents and website assistants, customer support and onboarding, AI companions and VTubers, interactive characters for games and education, AI mascots and brand mascots and virtual presenters, and any React product that benefits from a face you can talk to. <a id="table-of-contents" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Table of Contents<a href="#table-of-contents" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><ul> <li><a href="#sandai-react">sandai-react</a> <ul> <li><a href="#features">Features</a></li> <li><a href="#use-cases">Use cases</a></li> <li><a href="#table-of-contents">Table of Contents</a></li> <li><a href="#installation">Installation</a></li> <li><a href="#quick-start">Quick Start</a></li> <li><a href="#components">Components</a> <ul> <li><a href="#ai3dcharacter"><code>AI3DCharacter</code></a></li> <li><a href="#ai3dcharacterdocs"><code>AI3DCharacterDocs</code></a></li> <li><a href="#functiontester"><code>FunctionTester</code></a></li> </ul> </li> <li><a href="#driving-the-character">Driving the character</a></li> <li><a href="#re-exports-from-sandai-core">Re-exports from sandai-core</a></li> <li><a href="#contributing">Contributing</a></li> <li><a href="#license">License</a></li> </ul> </li> </ul> <a id="installation" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Installation<a href="#installation" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><pre><code class="sh">npm install sandai-react </code><button type="button">Copy</button></pre> Peer dependencies (React 19): <pre><code class="sh">npm install react react-dom </code><button type="button">Copy</button></pre> <a id="quick-start" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Quick Start<a href="#quick-start" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2>Mount the component, size its container, and grab the client in <code>onLoad</code>: <pre><code class="tsx">import { AI3DCharacter, SandaiClient } from "sandai-react"; import { useState } from "react"; export default function App() { const [client, setClient] = useState<SandaiClient>(); return ( <div style={{ width: "100%", height: "600px" }}> <AI3DCharacter url="https://sandai.org/chat" vrmUrl="https://cdn.example/ada.vrm" voiceName="ruri" environment="tokyo" // userId & apiKey are optional. Without them you may see a watermark. // Grab yours in the dashboard: https://sandai.org/dashboard onLoad={async (c) => { setClient(c); // Speak some text (emotion + lip-sync inferred automatically): const { speechEndPromise } = await c.interactionManager.say("Hi there!"); await speechEndPromise; // Or have the on-device LLM reply: await c.interactionManager.respond("What's your name?"); }} /> </div> ); } </code><button type="button">Copy</button></pre> <blockquote> The component renders an <code>iframe</code> at <code>width: 100%; height: 100%</code>, so give its parent an explicit size. Audio can't play until the user has interacted with the page (browser autoplay policy). If the character won't speak, that's almost always why — the underlying <code>LoadManager</code> tracks interaction state for you. </blockquote> <a id="components" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Components<a href="#components" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><a id="ai3dcharacter" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>AI3DCharacter</code><a href="#ai3dcharacter" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>The one component you mount. It builds the Sandai embed URL from its props, renders the avatar in an <code>iframe</code>, constructs a <a href="https://gitlab.com/DavidCks1/sandai-core"><code>SandaiClient</code></a>, and hands it to you via <code>onLoad</code> once it's ready. <pre><code class="tsx">import { AI3DCharacter } from "sandai-react"; </code><button type="button">Copy</button></pre> <a id="props" class="tsd-anchor"></a><h4 class="tsd-anchor-link">Props<a href="#props" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><table> <thead> <tr> <th>Prop</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>url</code></td> <td><code>string</code></td> <td>Required. Base URL of the Sandai chat interface (e.g. <code>https://sandai.org/chat</code>).</td> </tr> <tr> <td><code>onLoad</code></td> <td><code>(client: SandaiClient) => void</code></td> <td>Required. Fired once the <code>SandaiClient</code> is initialized and ready to drive.</td> </tr> <tr> <td><code>vrmUrl</code></td> <td><code>string</code></td> <td>URL of the <code>.vrm</code> model to load as the character.</td> </tr> <tr> <td><code>voiceName</code></td> <td><code>VoiceNames</code></td> <td>TTS voice key (100+ multilingual Piper voices).</td> </tr> <tr> <td><code>environment</code></td> <td><code>Environments</code></td> <td>Environment preset (e.g. <code>transparent</code>, <code>tokyo</code>, <code>sky</code>, <code>candyshop</code>, ...).</td> </tr> <tr> <td><code>showControls</code></td> <td><code>boolean</code></td> <td>Show the debug overlay: chat input, emotion sliders, and built-in voices. Handy for previewing how the 5 VRM blendshapes combine into Sandai's 27 emotions.</td> </tr> <tr> <td><code>lowPerformanceMode</code></td> <td><code>boolean</code></td> <td>Lighter render path (drops bloom/depth-of-field) for older or low-end devices.</td> </tr> <tr> <td><code>cameraType</code></td> <td><code>"default" | "orthographic"</code></td> <td>Camera projection. <code>default</code> is perspective.</td> </tr> <tr> <td><code>initialFocus</code></td> <td><code>FocusProps</code></td> <td>Initial camera focus (<code>focusIntensity</code>, <code>cameraOffset</code>, <code>lookAtOffset</code>, <code>trackCharacterLookAt</code>, <code>focusMode</code>).</td> </tr> <tr> <td><code>raytrace</code></td> <td><code>boolean</code></td> <td>Enable the experimental GPU path-tracer.</td> </tr> <tr> <td><code>headAnimationSmoothing</code></td> <td><code>number</code></td> <td>Dampen head motion, <code>0..1</code> (0 = raw, 1 = frozen).</td> </tr> <tr> <td><code>bodyAnimationSmoothing</code></td> <td><code>number</code></td> <td>Dampen body motion, <code>0..1</code>.</td> </tr> <tr> <td><code>armsAnimationSmoothing</code></td> <td><code>number</code></td> <td>Dampen arm motion, <code>0..1</code>.</td> </tr> <tr> <td><code>legsAnimationSmoothing</code></td> <td><code>number</code></td> <td>Dampen leg motion, <code>0..1</code>.</td> </tr> <tr> <td><code>handsAnimationSmoothing</code></td> <td><code>number</code></td> <td>Dampen hand motion, <code>0..1</code>.</td> </tr> <tr> <td><code>faceAnimationSmoothing</code></td> <td><code>number</code></td> <td>Dampen face/expression motion, <code>0..1</code>. Try <code>0.1</code>–<code>0.9</code> if the mouth looks choppy.</td> </tr> <tr> <td><code>decoupleOverlappingExpressionsExperimental</code></td> <td><code>boolean</code></td> <td>Best-guess split of conflicting blendshapes (e.g. a model that opens its mouth when happy).</td> </tr> <tr> <td><code>apiKey</code></td> <td><code>string</code></td> <td>Your API key (from the <a href="https://sandai.org/dashboard">dashboard</a>). Optional; omit and you may see a watermark.</td> </tr> <tr> <td><code>userId</code></td> <td><code>string</code></td> <td>Your user ID (from the dashboard).</td> </tr> <tr> <td><code>debugMode</code></td> <td><code>boolean</code></td> <td>Skips auth + load checks. Convenient locally; turn off in production (it disables the interaction gate used to enable audio).</td> </tr> <tr> <td><code>style</code></td> <td><code>React.CSSProperties</code></td> <td>Inline styles for the underlying <code>iframe</code>.</td> </tr> <tr> <td><code>className</code></td> <td><code>string</code></td> <td>Class name for the underlying <code>iframe</code>.</td> </tr> </tbody> </table> <a id="example" class="tsd-anchor"></a><h4 class="tsd-anchor-link">Example<a href="#example" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="tsx">import { AI3DCharacter } from "sandai-react"; <AI3DCharacter url="https://sandai.org/chat" vrmUrl="https://example.com/model.vrm" voiceName="ruri" environment="tokyo" showControls faceAnimationSmoothing={0.4} onLoad={(client) => console.log("Sandai client ready", client)} /> </code><button type="button">Copy</button></pre> <hr> <a id="ai3dcharacterdocs" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>AI3DCharacterDocs</code><a href="#ai3dcharacterdocs" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>Renders interactive, runnable documentation for every method the loaded <code>SandaiClient</code> exposes — a live API playground you can drop straight into your own app. Pass it the <code>client</code> from <code>AI3DCharacter</code>'s <code>onLoad</code>. <a id="props-1" class="tsd-anchor"></a><h4 class="tsd-anchor-link">Props<a href="#props-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><table> <thead> <tr> <th>Prop</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>client</code></td> <td><code>SandaiClient</code></td> <td>The instance from <code>AI3DCharacter</code>'s <code>onLoad</code> callback.</td> </tr> </tbody> </table> <a id="example-1" class="tsd-anchor"></a><h4 class="tsd-anchor-link">Example<a href="#example-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="tsx">import { AI3DCharacter, AI3DCharacterDocs } from "sandai-react"; import { useState } from "react"; const App = () => { const [client, setClient] = useState(null); return ( <> <AI3DCharacter url="https://sandai.org/chat" onLoad={setClient} showControls /> {client && <AI3DCharacterDocs client={client} />} </> ); }; </code><button type="button">Copy</button></pre> <hr> <a id="functiontester" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code>FunctionTester</code><a href="#functiontester" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h3>A reusable form that dynamically generates input fields from a schema and calls a function on submit. It powers <code>AI3DCharacterDocs</code>, and you can use it standalone to build quick test harnesses around any function. <a id="props-2" class="tsd-anchor"></a><h4 class="tsd-anchor-link">Props<a href="#props-2" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><table> <thead> <tr> <th>Prop</th> <th>Type</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>func</code></td> <td><code>Function</code></td> <td>The function to invoke; receives the form values as arguments.</td> </tr> <tr> <td><code>schema</code></td> <td><code>SchemaType[]</code></td> <td>Field definitions for the function parameters.</td> </tr> </tbody> </table> <a id="example-2" class="tsd-anchor"></a><h4 class="tsd-anchor-link">Example<a href="#example-2" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h4><pre><code class="tsx">import { FunctionTester } from "sandai-react"; const myFunction = (name, age) => console.log(`Name: ${name}, Age: ${age}`); const schema = [ { id: "name", type: "text", label: "Name" }, { id: "age", type: "number", label: "Age" }, ]; <FunctionTester func={myFunction} schema={schema} />; </code><button type="button">Copy</button></pre> <a id="driving-the-character" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Driving the character<a href="#driving-the-character" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><code>onLoad</code> hands you a <code>SandaiClient</code>, which is your control surface for the avatar. The most common calls: <pre><code class="tsx">// Speak text — emotion + lip-sync are inferred automatically. const { speechEndPromise } = await client.interactionManager.say("Hello!"); await speechEndPromise; // Ask the on-device LLM for a reply, then speak it. const reply = await client.interactionManager.respond("Tell me a joke about space."); // Interrupt the current utterance. await client.interactionManager.stop(); // Call any method on the character by typed dot-path (full autocomplete). await client.rpcManager.call("setEmotion", "joy", 0.8); await client.rpcManager.call("vrmManager.focusManager.focus"); </code><button type="button">Copy</button></pre> The full <code>SandaiClient</code> API — <code>interactionManager</code>, <code>loadManager</code>, <code>authManager</code>, and the typed <code>rpcManager</code> — is documented in the <a href="https://gitlab.com/DavidCks1/sandai-core"><code>sandai-core</code> README</a>. <a id="re-exports-from-sandai-core" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Re-exports from sandai-core<a href="#re-exports-from-sandai-core" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2><code>sandai-react</code> re-exports everything from <code>sandai-core</code>, so you can import the client, the URL builder, the voices map, and all the types straight from this package: <pre><code class="tsx">import { SandaiClient, UrlBuilder, voices, type VoiceNames, type Environments, type AllRpcMethods, } from "sandai-react"; </code><button type="button">Copy</button></pre> <a id="contributing" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Contributing<a href="#contributing" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2>Contributions are welcome! If you have suggestions or find issues, feel free to open an issue or a pull request. <a id="license" class="tsd-anchor"></a><h2 class="tsd-anchor-link">License<a href="#license" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="assets/icons.svg#icon-anchor"></use></svg></a></h2>MIT. See the <code>LICENSE</code> file for details. </div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility">Member Visibility<ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg>Protected</label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg>Inherited</label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg>External</label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#sandai-react">sandai-react</a><ul><li><a href="#features">Features</a></li><li><a href="#use-cases">Use cases</a></li><li><a href="#table-of-contents">Table of Contents</a></li><li><a href="#installation">Installation</a></li><li><a href="#quick-start">Quick Start</a></li><li><a href="#components">Components</a></li><li><ul><li><a href="#ai3dcharacter">AI3DCharacter</a></li><li><ul><li><a href="#props">Props</a></li><li><a href="#example">Example</a></li></ul></li><li><a href="#ai3dcharacterdocs">AI3DCharacterDocs</a></li><li><ul><li><a href="#props-1">Props</a></li><li><a href="#example-1">Example</a></li></ul></li><li><a href="#functiontester">FunctionTester</a></li><li><ul><li><a href="#props-2">Props</a></li><li><a href="#example-2">Example</a></li></ul></li></ul></li><li><a href="#driving-the-character">Driving the character</a></li><li><a href="#re-exports-from-sandai-core">Re-exports from sandai-core</a></li><li><a href="#contributing">Contributing</a></li><li><a href="#license">License</a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="modules.html">sandai-react - v2.1.8</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></footer><div class="overlay"></div></body></html>