割り込める
音声チャット

Cartesia Managed Agentとライブで音声通話するWebアプリです。エージェントの話にかぶせて話すと止まり、書き起こしには実際に話した言葉だけが残ります。
VercelにデプロイGitHubで見る
通話中の画面。エージェントがあいさつし、ユーザーが潮の満ち引きが1日に2回ある理由を尋ね、緑のSpeakingバッジの下にエージェントの答えがストリーミングで表示されている。下にはMuteボタンとEnd callボタンがある

スクリーンショット. ローカルで動かしたテンプレート。

モデル
ink-2, sonic-3.6
言語
英語
ライセンス
Apache-2.0
技術スタック
Next.js 16React 19shadcn/uiagents-web
Cartesia の製品
Managed AgentsInk 2Sonic 3.6

できること

エージェント全体はCartesiaが動かすので、サーバーの仕事は1つだけです。ブラウザーに有効期限の短いトークンを渡し、APIキーはページに渡りません。同じエージェントで電話も受けられます。その方法は受付係のFront deskテンプレートにあります。

自分で動かす

  1. インストールする

    Node 22.22以降で下のコマンドを実行します。pnpmでも動きます。npm run setup:agentは、POST /v1/agentsでエージェントを作成し、保存済みのエージェントがまだあれば何もしません。デプロイする場合は、Vercelのボタンがこのidを求めるので、先にローカルで実行してください。

    npx degit cartesia-ai/cookbook/examples/voice-chat voice-chat
cd voice-chat
# add CARTESIA_API_KEY
cp .env.example .env.local
npm install
# creates the agent, writes CARTESIA_AGENT_ID
npm run setup:agent
npm run dev

    環境変数
    CARTESIA_API_KEY
    play.cartesia.ai/keys
    CARTESIA_AGENT_ID
    npm run setup:agentが書き込む
    AGENT_MODEL_ID
    任意。エージェントのLLM。GET /v1/agents/modelsから選ぶ
    CARTESIA_VOICE_ID
    任意。play.cartesia.ai/voicesの音声
    APP_PASSWORD
    ローカルでは任意。Vercelでは必須。公開するならnoneを設定
    TRUST_PROXY
    任意。自前のリバースプロキシの背後に置く場合は1

  2. 通話を始める

    http://localhost:3000を開いてStart callを押します。ヘッドホンを使ってください。エコーキャンセルはオンですが、ノートパソコンのスピーカーの音はマイクに入り、エージェントが自分に割り込んでしまいます。

コーディングエージェントで作る

どこから始めて、最初に何を読むべきかをコーディングエージェントに伝えるプロンプトです。

プロンプト

Claude CodeCursorCodex

Build a browser voice chat with a Cartesia Managed Agent. Start from https://github.com/cartesia-ai/cookbook/tree/main/examples/voice-chat and follow its AGENTS.md for the commands, files and rules. The server route mints a 60 second access token with only the agent grant through @cartesia/cartesia-js (client.accessToken.create), and the browser opens wss://api.cartesia.ai/v1/agents/websocket/{agent_id} with useCartesiaAgent from lib/agents-web. Create the agent once with npm run setup:agent, which calls POST /v1/agents. The agent runs Ink 2 and Sonic 3.6 for you, so do not add TTS or STT model fields to its config. If I don't have a Cartesia API key yet, follow https://www.cartesia.ai/agent-quickstart.md to get one.

仕組み

マイクエコーキャンセルをオンにして、16 kHzのPCMをエージェントのWebSocketで送る
Ink 2あなたの声を聞き取り、話し終わりを判断する
LLM初期設定はclaude-haiku-4.5。AGENT_MODEL_IDで変更
Sonic 3.6書かれたそばから返答を読み上げる
スピーカー割り込むと、キューにある音声を捨てる

この設計にした理由

割り込むと音声のキューが空になる

エージェントの話にかぶせて話すと、Cartesiaがaudio_output_clearイベントを送ります。アプリはキューにあった音声を捨て、エージェントの最後のメッセージを実際に話した言葉までに切り詰めます。

ブラウザが受け取るのはキーではなく60秒のトークン

サーバーは、エージェントとの通話にしか使えず60秒で切れるトークンを発行します。トークンのルートは、APIキーがないと503を返し、同じアドレスから1分に10個を超えると429を返します。

カスタマイズする

話す内容を変える

scripts/prompt.tsの指示とあいさつを編集し、npm run setup:agent -- --forceを実行します。

別の音声やLLMを使う

CARTESIA_VOICE_IDかAGENT_MODEL_IDを設定し、npm run setup:agent -- --forceを実行します。

別の言語で話す

scripts/setup-agent.tsのbuildBodyでlanguage.primaryを設定し、その言語でプロンプトを書き、その言語を話す音声を選びます。

多くのチームが選ぶ、Cartesiaへの移行

Artificial Analysis

ランキング1位

Artificial AnalysisのSpeech ArenaとSpeech to Textのランキングで

よくある質問

CartesiaのAPIキーをブラウザーに渡さないには？

サーバーで有効期限の短いトークンを発行し、ブラウザーにはそれだけを渡します。トークンは60秒で切れ、エージェントとの通話にしか使えず、音声合成や音声認識には使えません。サーバーが発行するのは、1つのアドレスにつき1分に最大10個です。

自分の言葉が話し終わってから表示されるのはなぜですか？

エージェントはあなたの言葉を、話している最中ではなくターンが終わったときに返すので、それまであなたのメッセージには点が表示されます。エージェントの言葉は話すのに合わせて表示されます。レシピには自分のLLMを使う版もあり、そちらでは話している最中に言葉が表示されます。

通話の料金はいくらですか？

Managed Agentの通話は1分あたり0.06ドルとLLMのトークン料金がかかります。Cartesiaのクレジット残高からではなくドルで請求され、トークン単価はLLMごとに異なります。

通話は録音されますか？

はい。Cartesiaは既定で、エージェントのすべての通話の音声と書き起こしを録音します。ユーザーに伝え、不要な通話はCartesiaのAPIで削除してください。

このテンプレートの詳しい手順ガイドはありますか？

はい。レシピでコードを順に解説し、READMEでセットアップ、環境変数、デプロイを説明しています。Cartesia側の仕組みはManaged Agentsのドキュメントにあります。

クックブックのほかの例

すべて見る
受付. 電話受付

電話に出て、枠を予約し、通話を記録します。

スピーキングパートナー. 外国語の練習

5言語のロールプレイ。一言ごとに添削が付きます。

今すぐ始める

専門家に相談する。

音声体験の開発にCartesiaをどう活用できるか、私たちのチームにご相談ください。

営業に問い合わせる

開発を始める。

APIでモデルにアクセスし、数分で音声エージェントを本番環境に導入できます。

Cartesiaを試す