Get a talking avatar running in your React app in four steps.
This guide uses the React (web) SDK. Building a mobile app? Follow the React Native quickstart instead.
The SDK is a private package, so authenticate to npm first. Add a .npmrc at
your project root with the token that came with your plan — see
Get access if you don't have one yet.
Then install the SDK and the Rive React binding it renders through.
Then import the stylesheet once, at your app's entry point. The avatar won't display correctly without it.
AvatarProvider opens the connection and holds the session. Add it once, near the top of your app.
To connect, the SDK needs a session token. You provide a getSessionToken function that fetches one from your backend. The SDK calls it whenever it connects, so your secret API key stays on the server and never reaches the browser.
Leave avatarId as "default" to use our public demo avatar — it works out of the box, so you can finish this guide without any setup. When you're ready for your own avatar, publish one in the Platform and swap in its ID. You'll set up the /api/avatar-token endpoint next — see Authentication for ready-to-copy server examples (Node, Next.js, Python, cURL).
Place <Avatar /> anywhere inside the provider. Give its parent a width and height — the avatar fills its container, so without a size it won't be visible.
In call mode the SDK can render its own start and stop buttons, so you don't have to build any control UI. They're off by default — turn them on with controls.enabled.
Run your app, click start, and speak to your avatar. That's the full setup.
In call mode, the browser asks for microphone permission when the session starts. That's expected — the avatar needs to hear the user.
Want your own buttons instead? Leave controls.enabled off and use the useAvatar hook to call start() and stop() and read live status like isConnected, isSpeaking, and isListening.