DOCS
導入ガイド
AI アバターをサイトに埋め込む 3 つの方法 — 最短 2 行のコードで実装可能。すべてのパラメータとエラーコードはコンソールで確認できます。
3 ステップで導入
1アバターを作成
コンソールにサインインし、外見と音声を選択してアバターを作成、Agent ID を取得します。
2API キーを生成
デフォルトキーは自動生成されます; サイトごとに許可ドメイン付きの個別キーを作成可能。
3コピーして埋め込み
コンソールの「導入」ページから完全なスニペットを取得し、プレースホルダーを置き換えてリリース。
どの方式を選ぶか
アバター機能はすべて同じ; あなたの技術スタックに合う方法を選んでください。
| 方式 | 適したケース | 制御性 | スタイル分離 |
|---|---|---|---|
| JS SDK | イベント購読とプログラム制御が必要な SPA | ★★★ | 中 |
| Web Component | Vue / React / 素の HTML、最小設定 | ★★ | 高 (Shadow DOM) |
| iframe | 静的サイト、CMS、記事、依存関係なし | ★ | 最高 (sandbox) |
どの導入ルートを選ぶ?
あなたの LLM が何を返すかで決める —— テキストのみはルート A、音声付きはルート B。
A · テキスト
LLM はテキストを返す —— 我々が TTS と口元同期を担当
テキストを送るだけ。音声合成とアバターの口元動作はこちらで処理。最速:数行の実コードで稼働開始。
初めての導入におすすめ
B · 音声
LLM はテキスト + 音声を返す —— 我々は口元同期のみ
自前の TTS で音声を生成、我々は口元を合わせるだけ。ブランド音声・有名人 IP・方言など、音色を完全に制御したい場合に。
ブランド音声向け
まず A で開始。あとで B に切り替えてもアーキテクチャは変わらない —— 同じ widget インスタンスで API を変えるだけ。
最速スタート · SDK 例
スニペットをコピーし、agent_xxx と YOUR_API_KEY をご自身のものに置き換えるだけ。
JS SDK · HTML
<script type="module" src="https://embed.avataraisdk.com/sdk.js"></script>
<script type="module">
const widget = AIAvatar.init({
agentId: 'agent_xxxxxxxxxxxx',
apiKey: 'YOUR_API_KEY',
behavior: { llmMode: 'external' },
// ルート A:LLM はテキストを返し、我々が TTS と口元同期を担当
onUserInput: async (msg) => {
const reply = await myCustomerLLM(msg.content);
widget.replyText(reply);
},
});
</script>JS SDK / Web Component のスニペット、パラメータリファレンス、エラーコード、許可ドメイン設定はすべてコンソール内にあります。