The 3D Avatar SDK
your app deserves.

import { Avatar } from '@three-ws/avatar/react';

// Pure visual — wraps <three-ws-viewer>, no AI
export function ProfileCard({ glbUrl }) {
  return (
    <Avatar
      src={glbUrl}
      alt="User avatar"
      background="transparent"
      style={{ width: '240px', height: '320px' }}
      onLoad={({ url }) => console.log('loaded', url)}
    />
  );
}

import { AgentAvatar } from '@three-ws/avatar/react';

// Full runtime — chat, voice, lipsync, skills
export function AgentWidget({ avatarId }) {
  return (
    <AgentAvatar
      avatarId={avatarId}
      kiosk          // hides debug UI
      style={{ width: '100%', height: '600px' }}
    />
  );
}

import { AvatarCreator } from '@three-ws/avatar/react';

export function OnboardingStep() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>
        Create my avatar
      </button>

      <AvatarCreator
        open={open}
        onExport={(blob) => handleBlob(blob)}
        onClose={() => setOpen(false)}
      />
    </>
  );
}

import { useAvatar } from '@three-ws/avatar/react';

export function AvatarCard({ id }) {
  const { avatar, loading, error } = useAvatar(id);

  if (loading) return <Spinner />;
  if (error)   return <p>Error: {error.message}</p>;

  return <img src={avatar.thumbnail_url} alt={avatar.name} />;
}