MascotBot React SDK Examples

Four interactive demos showcasing the core capabilities of the MascotBot SDK for React.

What This Demonstrates

• Generated Voice-Over — play pre-generated audio with synchronized lip-sync visemes
• Input Voice-Over — type text and generate speech with real-time lip-sync via TTS API
• Voice Call with AI — real-time voice conversation with an AI-powered mascot (LLM + TTS)
• Rive Input Controls — directly control Rive state machine inputs (boolean, numeric, trigger) and dynamically load assets

Prerequisites

• Node.js 18+
• pnpm (or npm/yarn)
• Mascot Bot SDK subscription (for .tgz package)
• Rive .riv animation files (for input-voice-over and rive-inputs demos)
• ElevenLabs API key (for voice call demo)
• Groq or OpenAI API key (for voice call demo)

Quick Start

1. Clone this repository
2. Add the SDK package and Rive files (see below)
3. Configure environment variables
4. Install and run

pnpm install
pnpm dev

Open http://localhost:3000 to see all four demos.

Private Files You Need

Mascot Bot SDK

• File: mascotbot-sdk-react-X.X.X.tgz
• Where: project root
• How to get: download from your Mascot Bot dashboard after subscribing

cp /path/to/mascotbot-sdk-react-X.X.X.tgz ./
pnpm install

Rive Animation Files

• Files: bear.riv, notionGuys.riv, mascot-cat-customizible.riv (and others)
• Where: public/demo_mascots/
• How to get: provided with your Mascot Bot SDK subscription
• Note: the generated voice-over demo loads its Rive file from a CDN, so no local file is needed for that demo

cp /path/to/*.riv ./public/demo_mascots/

Environment Variables

Copy .env.example to .env.local (CRA uses .env.local or .env):

cp .env.example .env.local

Variable	Description	Required
REACT_APP_MASCOTBOT_API_KEY	Mascot Bot API key	Yes (for input voice-over and call demos)
REACT_APP_ELEVENLABS_API_KEY	ElevenLabs TTS API key	For voice call demo
REACT_APP_LLM_API_KEY	Groq or OpenAI API key	For voice call demo
REACT_APP_SPREADSHEET_ID	Google Sheets ID for conversation history	Optional

Demo Overview

1. Generated Voice-Over (top-left)

Uses pre-recorded audio + visemes JSON to demonstrate lip-sync playback. No API keys needed.

2. Input Voice-Over (top-right)

Type text, send to MascotBot TTS API, and watch the bear mascot speak with synchronized lip movements.

3. Voice Call with AI (middle)

Full real-time voice conversation: microphone input -> LLM -> TTS -> lip-synced mascot. Requires all API keys.

4. Rive Input Controls (bottom)

Directly manipulate Rive state machine inputs: toggle boolean (violet eyes), adjust numeric (headphones color), fire triggers (thumbs up), and dynamically swap image assets.

Links

• Mascot Bot Documentation
• SDK API Reference
• Support | Discord

License

See LICENSE.