Getting Started
Quick Start

Quick Start

Get a talking AI avatar on your website in under 5 minutes.

Install the SDK

npm install @avatarium/react

Get your API key

  1. Sign up (opens in a new tab) for a free account
  2. Navigate to API Keys in the dashboard
  3. Click Create API Key
  4. Copy your key (starts with av_live_)
⚠️

Keep your API key secret! Use environment variables and never commit keys to git.

Add the Avatar component

App.tsx
import { Avatar } from '@avatarium/react';
 
export default function App() {
  return (
    <Avatar
      apiKey={process.env.NEXT_PUBLIC_AVATARIUM_KEY}
      avatarId="aria-001"
      className="w-full h-96"
    />
  );
}

Start a conversation

App.tsx
import { Avatar, useAvatar } from '@avatarium/react';
 
export default function App() {
  const { sendMessage, messages } = useAvatar();
 
  return (
    <div>
      <Avatar
        apiKey={process.env.NEXT_PUBLIC_AVATARIUM_KEY}
        avatarId="aria-001"
      />
 
      <input
        type="text"
        placeholder="Type a message..."
        onKeyPress={(e) => {
          if (e.key === 'Enter') {
            sendMessage(e.currentTarget.value);
            e.currentTarget.value = '';
          }
        }}
      />
    </div>
  );
}

Next Steps

IntroductionInstallation