Historias interactivas
con una voz para cada personaje

Elige un tema y un tono, y un LLM escribe una historia en tres escenas. Sonic 3.6 la lee en voz alta con una voz distinta para cada personaje mientras se ilumina cada palabra. Después de cada escena, tocas o dices qué pasa a continuación.

Ver en GitHub

Story time al final de la primera escena de Juniper and the Lost Signal: el narrador, el robot Bolt y Juniper tienen cada uno sus líneas, y debajo aparece la pregunta What happens next? con dos botones de opción y un botón Answer out loud

Captura de pantalla. La plantilla ejecutándose en local.

Modelos: sonic-3.6, ink-2
Idiomas: Inglés
Licencia: Apache-2.0
Stack: Next.js 16React 19AI SDKIndexedDBshadcn/ui
Productos de Cartesia: Sonic 3.6Ink 2

Qué hace

Cada historia tiene tres escenas cortas. Un LLM las escribe a partir del tema y el tono que eliges, y Sonic 3.6 las lee en voz alta. El narrador y cada personaje hablan con su propia voz, y cada palabra se ilumina mientras se lee.

Al final de cada escena, eliges qué pasa después entre dos opciones. Toca una o dila en voz alta. La seguridad del contenido viene activada, y cada escena se revisa antes de reproducirse.

Ejecútalo tú mismo

1
Instala
Ejecuta los comandos de abajo con Node 22.22 o posterior. pnpm también funciona. Rellena .env.local con la tabla de abajo. Si falta una clave, la página dice cuál.
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 de entorno
CARTESIA_API_KEY
play.cartesia.ai/keys
LLM_MODEL
proveedor/modelo, por ejemplo openai/gpt-5.4-mini
OPENAI_API_KEY
Si LLM_MODEL empieza por openai/. Recomendada con cualquier modelo, porque activa la moderación de las escenas
ANTHROPIC_API_KEY
Si LLM_MODEL empieza por anthropic/
AI_GATEWAY_API_KEY
Para cualquier otro proveedor
APP_PASSWORD
Opcional en local. Obligatoria en Vercel, o none para que la app sea pública
TRUST_PROXY
Opcional. 1 si está detrás de tu propio proxy inverso
Empieza una historia
Abre la URL que muestra npm run dev. Elige un tema y un tono, ponle nombre al protagonista si quieres y pulsa Start the story. Cuando termina una escena, toca una de las dos opciones, o pulsa Answer out loud y dila.

Créalo con tu agente de programación

Un prompt que le dice a tu agente de programación por dónde empezar y qué leer primero.

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.

Cómo funciona

EscenaEl LLM escribe de 4 a 7 frases, cada una con un personaje y una emoción, y luego se hacen los controles de seguridad

Sonic 3.6Una conexión por escena y un flujo aparte por frase

Lectura sincronizadaLas marcas de tiempo por palabra mueven el resaltado

Ink 2Escucha la opción que dices, con el micrófono encendido solo mientras respondes

ElecciónSe compara en el navegador. Solo vuelve la opción elegida

Por qué funciona así

Una voz nueva para cada personaje

Sonic puede llevar varios flujos en una sola conexión, cada uno con su voz y su emoción. Así el narrador, el protagonista y un dragón que habla se turnan sin reconectar. Cada personaje nuevo recibe la siguiente voz de una lista.

Tus palabras se quedan en el navegador

Ink 2 convierte tu respuesta en texto, y la página la empareja con una opción dentro del navegador. Solo la opción elegida vuelve al LLM, nunca lo que dijiste. El micrófono solo se abre cuando pulsas Answer out loud.

Volver a escuchar no llama a la API

Cada escena se guarda en el IndexedDB del navegador con su audio y los tiempos de cada palabra. Al volver a escuchar una historia de la biblioteca, se reproduce con el resaltado y no se llama a nada.

Adáptalo a ti

Usa otras voces

Los ids de voz están en lib/story.ts. Cámbialos por voces de play.cartesia.ai/voices.

Haz historias más largas

Sube TOTAL_SCENES en lib/story.ts, que por defecto es 3. Cada escena extra cuesta una llamada al LLM y su narración.

Cuenta historias en otro idioma

Ink 2 y Sonic hablan también español, francés, hindi y japonés. Define el idioma de la narración en lib/narrate.ts y añádelo al prompt de la historia. Traduce las listas de palabras que la app usa para reconocer las opciones dichas y para el control de seguridad. Desactiva los ajustes de emoción, que solo funcionan en inglés.

Únete a los equipos que dan el salto a Cartesia

En el primer puesto

en las clasificaciones Speech Arena y Speech to Text de Artificial Analysis

Preguntas

¿Cómo mantiene las historias seguras?

Los temas y los tonos son opciones fijas, y el prompt prohíbe la violencia gráfica, el contenido sexual y el odio. Cada escena pasa además por una lista de palabras, y por el servicio de moderación de OpenAI si añades una clave de OpenAI. Ningún filtro es perfecto, así que lee algunas historias antes de compartirla.

¿A dónde van mis elecciones y mi voz?

Los ajustes de la historia, el nombre del protagonista y tus elecciones van al proveedor de LLM que elijas. Si añades una clave de OpenAI, los ajustes y cada escena van también a OpenAI para moderarlos. Las respuestas habladas van en streaming a Cartesia, y el servidor de la app no guarda audio ni historias.

¿Queda expuesta mi API key de Cartesia en el navegador?

No. La clave se queda en el servidor. El navegador recibe un token que dura 60 segundos y solo sirve para voz.

¿Cómo funciona el resaltado de palabras?

Sonic envía la hora de inicio de cada palabra junto con el audio. La página mira el reloj de reproducción en cada fotograma e ilumina la palabra que se está diciendo.

¿Por qué la primera escena tarda unos segundos?

El LLM escribe la escena entera antes de que empiece la narración, así que un modelo más pequeño acorta la espera. Después, las frases siguientes se generan mientras suenan las anteriores.

¿Hay una guía paso a paso de esta plantilla?

Sí. La receta recorre el código, el README cubre la instalación, las variables de entorno y el despliegue, y la documentación de los contextos del WebSocket de TTS explica la parte de Cartesia.