メインコンテンツへスキップ
Avaturn によるコミュニティインテグレーションです。最終検証日: 2026-05-26。

概要

このインテグレーションを使うと、デプロイ済みの Cartesia Line エージェントAvaturn アバターの背後で動作させることができます。Cartesia エージェントがプロンプト、ツール、ボイス、LLM の挙動を担当し、Avaturn がアバターセッションとレンダリングを担当します。

前提条件

インストール

npm install express @avaturn-live/web-sdk
バックエンドとフロントエンドのスニペットが記述どおりに動作するよう(import 構文とトップレベル await)、Node プロジェクトを ESM に設定します:
{
  "type": "module"
}

クイックスタート

Auth API で Cartesia アクセストークンを作成し、Cartesia エンジンを使った Avaturn セッションを作成し、返されたセッショントークンを使ってブラウザでアバターを初期化します。

1) バックエンド: Cartesia トークンの発行と Avaturn セッションの作成

import express from "express";

const app = express();
app.use(express.json());

app.post("/api/avaturn-session", async (req, res) => {
  const { cartesiaAgentId } = req.body;
  if (!cartesiaAgentId) {
    return res.status(400).json({ error: "cartesiaAgentId is required" });
  }

  const cartesiaTokenResponse = await fetch("https://api.cartesia.ai/access-token", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.CARTESIA_API_KEY}`,
      "Cartesia-Version": "2025-04-16",
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      grants: { agent: true },
      expires_in: 300,
    }),
  });

  if (!cartesiaTokenResponse.ok) {
    return res.status(502).json({ error: "Failed to mint Cartesia access token" });
  }

  const { token: cartesiaAccessToken } = await cartesiaTokenResponse.json();

  const avaturnSessionResponse = await fetch("https://api.avaturn.live/api/v1/sessions", {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.AVATURN_API_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      conversation_engine: {
        type: "cartesia",
        access_token: cartesiaAccessToken,
        agent_id: cartesiaAgentId,
      },
    }),
  });

  if (!avaturnSessionResponse.ok) {
    return res.status(502).json({ error: "Failed to create Avaturn session" });
  }

  const session = await avaturnSessionResponse.json();
  return res.json(session); // { session_id, token }
});

app.listen(3000);

2) フロントエンド: セッショントークンで Avaturn を初期化

ページ HTML に AvaturnHead がビデオストリームをレンダリングするためのコンテナを追加します:
<div id="avaturn-video"></div>
以下のサンプルはトップレベル await を使用しているため、ES モジュールのエントリファイルが必要です。フロントエンドがモジュールでない場合は、呼び出しを async 関数でラップしてください。
import { AvaturnHead } from "@avaturn-live/web-sdk";

async function startAvatar(cartesiaAgentId: string) {
  const response = await fetch("/api/avaturn-session", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ cartesiaAgentId }),
  });

  if (!response.ok) {
    throw new Error("Failed to create avatar session");
  }

  const session = await response.json(); // { session_id, token }
  const root = document.querySelector<HTMLDivElement>("#avaturn-video");

  if (!root) {
    throw new Error("Missing #avaturn-video container");
  }

  const avatar = new AvaturnHead(root, {
    sessionToken: session.token,
    audioSource: true, // required for voice conversation
  });

  await avatar.init();
  return avatar;
}

const cartesiaAgentId = "your-cartesia-agent-id";
await startAvatar(cartesiaAgentId);

参考リソース