Des histoires interactives
avec une voix par personnage

Choisissez un thème et un ton, et un LLM écrit une histoire en trois scènes. Sonic 3.6 la lit à voix haute avec une voix différente pour chaque personnage pendant que chaque mot s'allume. Après chaque scène, vous touchez ou dites ce qui se passe ensuite.

Voir sur GitHub

Story time à la fin de la première scène de Juniper and the Lost Signal : le narrateur, Bolt le robot et Juniper ont chacun leurs répliques, et en dessous la question What happens next? avec deux boutons de choix et un bouton Answer out loud

Capture d'écran. Le modèle lancé en local.

Modèles: sonic-3.6, ink-2
Langues: Anglais
Licence: Apache-2.0
Stack technique: Next.js 16React 19AI SDKIndexedDBshadcn/ui
Produits Cartesia: Sonic 3.6Ink 2

Ce qu'il fait

Chaque histoire compte trois courtes scènes. Un LLM les écrit à partir du thème et du ton que vous choisissez, et Sonic 3.6 les lit à voix haute. Le narrateur et chaque personnage parlent avec leur propre voix, et chaque mot s'allume au moment où il est lu.

À la fin d'une scène, vous choisissez la suite entre deux options. Touchez-en une, ou dites-la à voix haute. La sécurité du contenu est activée par défaut, et chaque scène est vérifiée avant d'être lue.

Lancez-le vous-même

1
Installez
Lancez les commandes ci-dessous avec Node 22.22 ou plus récent. pnpm fonctionne aussi. Remplissez .env.local à l'aide du tableau ci-dessous. S'il manque une clé, la page indique laquelle.
npx degit cartesia-ai/cookbook/examples/story-time story-time cd story-time # add CARTESIA_API_KEY, LLM_MODEL and the matching LLM key cp .env.example .env.local npm install npm run dev
Variables d'environnement
CARTESIA_API_KEY
play.cartesia.ai/keys
LLM_MODEL
fournisseur/modèle, par exemple openai/gpt-5.4-mini
OPENAI_API_KEY
Si LLM_MODEL commence par openai/. Recommandée quel que soit le modèle, car elle active la modération des scènes
ANTHROPIC_API_KEY
Si LLM_MODEL commence par anthropic/
AI_GATEWAY_API_KEY
Pour tout autre fournisseur
APP_PASSWORD
Facultatif en local. Obligatoire sur Vercel, ou none pour rendre l'app publique
TRUST_PROXY
Facultatif. 1 derrière votre propre reverse proxy
Lancez une histoire
Ouvrez l'URL affichée par npm run dev. Choisissez un thème et un ton, nommez le héros si vous voulez, et appuyez sur Start the story. À la fin d'une scène, touchez l'un des deux choix, ou appuyez sur Answer out loud et dites-le.

Créez-le avec votre agent de code

Un prompt qui indique à votre agent de code par où commencer et quoi lire en premier.

Prompt

Claude Code Cursor Codex

Build an interactive story app with Cartesia. Start from https://github.com/cartesia-ai/cookbook/tree/main/examples/story-time and follow its AGENTS.md for the commands, files and rules. The AI SDK writes each scene. The browser gets a 60 second access token with the tts and stt grants, reads the scene with sonic-3.6 over the TTS WebSocket using one context per line (each with its own voice, emotion and add_timestamps), and hears the listener's choice with ink-2 on /stt/turns/websocket, opening the mic only when they press Answer out loud. Keep the content-safety rules in AGENTS.md. If I don't have a Cartesia API key yet, follow https://www.cartesia.ai/agent-quickstart.md to get one.

Comment ça marche

ScèneLe LLM écrit 4 à 7 répliques, chacune avec un personnage et une émotion, puis les contrôles de sécurité s'exécutent

Sonic 3.6Une connexion par scène, un flux séparé par réplique

Lecture suivieL'horodatage des mots pilote le surlignage

Ink 2Entend le choix que vous dites, avec le micro allumé seulement pendant votre réponse

ChoixReconnu dans le navigateur. Seule l'option choisie est renvoyée

Pourquoi ça fonctionne ainsi

Une nouvelle voix pour chaque personnage

Sonic peut faire tourner plusieurs flux sur une seule connexion, chacun avec sa voix et son émotion. Le narrateur, le héros et un dragon qui parle se relaient donc sans reconnexion. Chaque nouveau personnage reçoit la voix suivante d'une liste.

Vos paroles restent dans le navigateur

Ink 2 transforme votre réponse en texte, et la page l'associe à un choix directement dans le navigateur. Seule l'option choisie retourne au LLM, jamais ce que vous avez dit. Le micro ne s'ouvre que quand vous appuyez sur Answer out loud.

Réécouter une histoire n'appelle aucune API

Chaque scène est enregistrée dans l'IndexedDB du navigateur avec son audio et le minutage des mots. Rejouer une histoire depuis la bibliothèque la relit avec le surlignage, sans aucun appel.

Personnalisez-le

Utilisez d'autres voix

Les ids de voix sont dans lib/story.ts. Remplacez-les par des voix de play.cartesia.ai/voices.

Écrivez des histoires plus longues

Augmentez TOTAL_SCENES dans lib/story.ts, qui vaut 3 par défaut. Chaque scène en plus coûte un appel LLM et sa narration.

Racontez dans une autre langue

Ink 2 et Sonic parlent aussi espagnol, français, hindi et japonais. Réglez la langue de narration dans lib/narrate.ts et ajoutez-la au prompt de l'histoire. Traduisez les listes de mots que l'app utilise pour reconnaître les choix dits et pour la sécurité. Désactivez les réglages d'émotion, qui ne marchent qu'en anglais.

Rejoignez les équipes qui passent à Cartesia

Classé numéro 1

dans les classements Speech Arena et Speech to Text d'Artificial Analysis

Questions

Comment les histoires restent-elles sûres ?

Les thèmes et les tons sont prédéfinis, et le prompt interdit la violence graphique, le contenu sexuel et la haine. Chaque scène passe aussi par une liste de mots, et par le service de modération d'OpenAI si vous ajoutez une clé OpenAI. Aucun filtre n'est parfait, donc lisez quelques histoires avant de partager l'app.

Où vont mes choix et ma voix ?

Les réglages de l'histoire, le nom du héros et vos choix vont au fournisseur de LLM que vous choisissez. Si vous ajoutez une clé OpenAI, les réglages et chaque scène partent aussi chez OpenAI pour la modération. Les réponses dites à voix haute partent en streaming vers Cartesia, et le serveur de l'app ne garde ni audio ni histoire.

Ma clé API Cartesia est-elle exposée dans le navigateur ?

Non. La clé reste sur le serveur. Le navigateur reçoit un token valable 60 secondes et réservé à la voix.

Comment marche le surlignage des mots ?

Sonic envoie l'heure de début de chaque mot avec l'audio. La page lit l'horloge de lecture à chaque image et allume le mot en train d'être dit.

Pourquoi la première scène prend-elle quelques secondes ?

Le LLM écrit toute la scène avant que la narration commence, donc un modèle plus petit réduit l'attente. Ensuite, les répliques suivantes sont générées pendant que les premières sont lues.

Existe-t-il un guide pas à pas pour ce modèle ?

Oui. La recette explique le code, le README couvre l'installation, les variables d'environnement et le déploiement, et la doc sur les contextes du WebSocket TTS détaille le côté Cartesia.