Learn how to install and use the Mascotbot SDK with React.
MascotProvider
MascotProvider
component.
useRive
hook to create a Rive instance. This instance will manage the animations and state machines for your mascot.
MascotClient
MascotClient
component connects your Rive instance with the MascotBOT SDK.
useMascot
useMascot
hook provides access to the Rive instance and Rive component.
useMascotPlayback
useMascotPlayback
hook allows you to control the playback of animations and manage visemes.
is_speaking
state is automatically set to true
while it’s speaking and set to false
when it stops. You can control this behavior by passing options to the useMascotPlayback
hook:
setSpeakingState
option allows you to disable the automatic management of the is_speaking
state, giving you manual control over when and how the speaking state is set.
useMascotSpeech
useMascotSpeech
hook provides advanced text-to-speech functionality with support for multiple TTS engines, queueing, and real-time audio streaming.
playback.add
method to add visemes. This can be done in various ways, such as fetching from a server, generating in real-time, or any other method suitable for your application.
useMascotSpeech
hook provides production-ready speech capabilities with support for multiple TTS providers, intelligent queueing, and real-time streaming. For more detailed examples and integration guides, please refer to the separate article on production and integration examples.