> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cartesia.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Avaturn + Cartesia Line

> Avaturn のアバターセッションを、デプロイ済みの Cartesia Line エージェントに接続して音声会話を実現します。

<Note>**Avaturn** によるコミュニティインテグレーションです。最終検証日: 2026-05-26。</Note>

## 概要

このインテグレーションを使うと、デプロイ済みの <a href="https://docs.cartesia.ai/line/sdk/agents" target="_blank">Cartesia Line エージェント</a>を <a href="https://docs.avaturn.live" target="_blank">Avaturn</a> アバターの背後で動作させることができます。Cartesia エージェントがプロンプト、ツール、ボイス、LLM の挙動を担当し、Avaturn がアバターセッションとレンダリングを担当します。

## 前提条件

* `agent_id` を持つデプロイ済みの Cartesia Line エージェント（<a href="https://docs.cartesia.ai/line/start-building/quickstart" target="_blank">クイックスタート</a>）
* <a href="https://play.cartesia.ai/keys" target="_blank">Cartesia keys</a> から取得する Cartesia API キー（`CARTESIA_API_KEY`）
* <a href="https://avaturn.live/dashboard" target="_blank">Avaturn ダッシュボード</a>から取得する Avaturn API キー（`AVATURN_API_KEY`）
* バックエンドのトークン／セッションエンドポイント用に Node.js 18 以上
* Avaturn Web SDK をレンダリングできるフロントエンドアプリ（<a href="https://docs.avaturn.live/web-sdk/integration-guide" target="_blank">インテグレーションガイド</a>）

## インストール

```bash theme={null}
npm install express @avaturn-live/web-sdk
```

バックエンドとフロントエンドのスニペットが記述どおりに動作するよう（`import` 構文とトップレベル `await`）、Node プロジェクトを ESM に設定します:

```json theme={null}
{
  "type": "module"
}
```

## クイックスタート

<a href="https://docs.cartesia.ai/api-reference/auth/access-token" target="_blank">Auth API</a> で Cartesia アクセストークンを作成し、Cartesia エンジンを使った Avaturn セッションを作成し、返されたセッショントークンを使ってブラウザでアバターを初期化します。

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

```javascript theme={null}
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` がビデオストリームをレンダリングするためのコンテナを追加します:

```html theme={null}
<div id="avaturn-video"></div>
```

以下のサンプルはトップレベル `await` を使用しているため、ES モジュールのエントリファイルが必要です。フロントエンドがモジュールでない場合は、呼び出しを async 関数でラップしてください。

```typescript theme={null}
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);
```

## 参考リソース

* <a href="https://docs.avaturn.live/howtos/cartesia" target="_blank">Avaturn Cartesia インテグレーションガイド</a>
* <a href="https://docs.cartesia.ai/line/start-building/quickstart" target="_blank">Cartesia Line クイックスタート</a>
* <a href="https://docs.cartesia.ai/get-started/authenticate-your-client-applications" target="_blank">Cartesia 認証ガイド</a>
* <a href="https://docs.avaturn.live/web-sdk/integration-guide" target="_blank">Avaturn Web SDK インテグレーションガイド</a>
