接入文档

// 路线 A:你的 LLM 返回文本,平台做 TTS + 口型
// npm i @ai-avatar/embed-sdk
import { useRef, useState } from 'react';
import { AIAvatar, type AvatarInstance } from '@ai-avatar/embed-sdk/react';

export function AvatarCanvas() {
  const avatar = useRef<AvatarInstance>(null);
  const [ready, setReady] = useState(false);

  // 你自己的输入框提交 → 调你的 LLM → 驱动数字人开口
  async function onUserSend(text: string) {
    const reply = await myLLM(text);              // 你自己的 LLM
    const r = await avatar.current?.speak(reply); // 平台 TTS + 口型
    // r?.usage?.chars, r?.interrupted ...
  }

  return (
    <>
      {/* 你的容器 —— 数字人 100% 撑满它;尺寸 / 位置 / 圆角用你自己的 CSS */}
      <div id="avatar-box" style={{ width: 360, height: 480, borderRadius: 16, overflow: 'hidden' }} />
      <AIAvatar
        ref={avatar}
        apiKey="YOUR_API_KEY"
        mount="#avatar-box"        // 纯展示画布(传了 mount 即自动 inline)
        onAvatarLoaded={() => setReady(true)}      // 就绪后再放开你的输入框
        onSpeakingChange={(speaking) => {/* 同步你的 UI */}}
      />
      {/* ...你自己的输入框;提交时调 onUserSend,就绪前禁用... */}
    </>
  );
}

// ↓ 换成你自己的 LLM 调用
async function myLLM(text: string) {
  const res = await fetch('/api/my-llm', { method: 'POST', body: JSON.stringify({ text }) });
  return (await res.json()).reply as string;
}