React — ania-avatar-react

<AvatarChatbot> / <AniaAvatar> components plus hooks (useChatbot, useTTSDetection, …).

◐ snippet (live attempt below) npm: ania-avatar-react · repo: rob-d3v/the-web-player

⚠️ CDN publish pending. The React lib is published to npm as ania-avatar-react, but its GitHub dist/ (repo web-player) is not yet live on jsDelivr, and the bundle is shipped obfuscated with bare react/react-dom imports — so a stable, zero-config browser mount isn't guaranteed today. This page therefore leads with the real integration code and runs a best-effort live attempt below (it self-reports if the module can't be resolved). The simplest production-grade live React experience today is the Web Component, usable directly from JSX.

install & use

npm i ania-avatar-react

import { AvatarChatbot } from 'ania-avatar-react';

export default function App() {
  return (
    <AvatarChatbot
      avatarUrl="https://example.com/avatar.ania"
      avatarPassword="secret"
      webhookUrl="https://n8n.example.com/webhook/chat"
      assistantName="Luna"
      enableTTS enableSTT enableAttachments
    />
  );
}

standalone avatar + hook

import { AniaAvatar, useTTSDetection } from 'ania-avatar-react';

const { speak } = useTTSDetection({
  onTalkStart: () => player.animationController.setTalkingState(true),
  onTalkEnd:   () => player.animationController.setTalkingState(false),
});

<AniaAvatar avatarUrl="/avatar.ania" width={300} height={300}
            onLoad={setPlayer} />

use the WC drop-in from JSX (works today)

import 'ania-avatar-wc'; // or the CDN <script>
// <ania-avatar> is a real custom element — render it in any JSX:
<ania-avatar avatar-url="/avatar.ania" width="320" height="320" lip-sync-enabled />

Best-effort live attempt

trying…

loading React + lib…