Storie interattive
con una voce per ogni personaggio

Scegli un tema e un tono, e un LLM scrive una storia in tre scene. Sonic 3.6 la legge ad alta voce con una voce diversa per ogni personaggio mentre ogni parola si illumina. Dopo ogni scena, tocchi o dici cosa succede dopo.

Vedi su GitHub

Story time alla fine della prima scena di Juniper and the Lost Signal: il narratore, il robot Bolt e Juniper hanno ognuno le proprie battute, e sotto c'è la domanda What happens next? con due pulsanti di scelta e un pulsante Answer out loud

Screenshot. Il template in esecuzione in locale.

Modelli: sonic-3.6, ink-2
Lingue: Inglese
Licenza: Apache-2.0
Stack: Next.js 16React 19AI SDKIndexedDBshadcn/ui
Prodotti Cartesia: Sonic 3.6Ink 2

Cosa fa

Ogni storia ha tre brevi scene. Un LLM le scrive a partire dal tema e dal tono che scegli, e Sonic 3.6 le legge ad alta voce. Il narratore e ogni personaggio parlano con la propria voce, e ogni parola si illumina mentre viene letta.

Alla fine di una scena, scegli cosa succede dopo tra due opzioni. Toccane una o dilla ad alta voce. La sicurezza dei contenuti è attiva di default, e ogni scena viene controllata prima di essere letta.

Eseguilo tu

1
Installa
Esegui i comandi qui sotto con Node 22.22 o successivo. Funziona anche pnpm. Compila .env.local seguendo la tabella qui sotto. Se manca una chiave, la pagina ti dice quale.
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
Variabili d'ambiente
CARTESIA_API_KEY
play.cartesia.ai/keys
LLM_MODEL
provider/model, per esempio openai/gpt-5.4-mini
OPENAI_API_KEY
Se LLM_MODEL inizia con openai/. Consigliata con qualsiasi modello, perché attiva la moderazione delle scene
ANTHROPIC_API_KEY
Se LLM_MODEL inizia con anthropic/
AI_GATEWAY_API_KEY
Per qualsiasi altro fornitore
APP_PASSWORD
Facoltativa in locale. Obbligatoria su Vercel, oppure none per rendere l'app pubblica
TRUST_PROXY
Facoltativa. 1 dietro un tuo reverse proxy
Inizia una storia
Apri l'URL stampato da npm run dev. Scegli un tema e un tono, dai un nome al protagonista se vuoi e premi Start the story. Quando una scena finisce, tocca una delle due scelte, oppure premi Answer out loud e dilla.

Crealo con il tuo agente di programmazione

Un prompt che dice al tuo agente di programmazione da dove partire e cosa leggere per primo.

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.

Come funziona

ScenaIl LLM scrive da 4 a 7 battute, ognuna con un personaggio e un'emozione, poi partono i controlli di sicurezza

Sonic 3.6Una connessione per scena, un flusso separato per battuta

Lettura guidataI timestamp delle parole guidano l'evidenziazione

Ink 2Sente la scelta che pronunci, con il microfono acceso solo mentre rispondi

SceltaRiconosciuta nel browser. Torna indietro solo l'opzione scelta

Perché funziona così

Una voce nuova per ogni personaggio

Sonic può gestire più flussi su una sola connessione, ognuno con la sua voce e la sua emozione. Così il narratore, il protagonista e un drago parlante si alternano senza riconnettersi. Ogni nuovo personaggio riceve la voce successiva da un elenco.

Le tue parole restano nel browser

Ink 2 trasforma la tua risposta in testo, e la pagina la abbina a una scelta direttamente nel browser. Al LLM torna solo l'opzione scelta, mai quello che hai detto. Il microfono si apre solo quando premi Answer out loud.

Riascoltare non fa chiamate API

Ogni scena viene salvata nell'IndexedDB del browser con il suo audio e i tempi delle parole. Riascoltare una storia dalla libreria la riproduce con l'evidenziazione, senza chiamate.

Personalizzalo

Usa voci diverse

Gli id delle voci sono in lib/story.ts. Sostituiscili con voci di play.cartesia.ai/voices.

Crea storie più lunghe

Aumenta TOTAL_SCENES in lib/story.ts, che di default vale 3. Ogni scena in più costa una chiamata LLM e la sua narrazione.

Racconta storie in un'altra lingua

Ink 2 e Sonic parlano anche spagnolo, francese, hindi e giapponese. Imposta la lingua della narrazione in lib/narrate.ts e aggiungila al prompt della storia. Traduci gli elenchi di parole che l'app usa per riconoscere le scelte dette e per i controlli di sicurezza. Disattiva le impostazioni di emozione, che funzionano solo in inglese.

Unisciti ai team che passano a Cartesia

Al primo posto

nelle classifiche Speech Arena e Speech to Text di Artificial Analysis

Domande

Come mantiene sicure le storie?

Temi e toni sono predefiniti, e il prompt vieta violenza esplicita, contenuti sessuali e odio. Ogni scena passa anche da un elenco di parole, e dal servizio di moderazione di OpenAI se aggiungi una chiave OpenAI. Nessun filtro è perfetto, quindi leggi qualche storia prima di condividerla.

Dove finiscono le mie scelte e la mia voce?

Le impostazioni della storia, il nome del protagonista e le tue scelte vanno al provider LLM che scegli. Se aggiungi una chiave OpenAI, le impostazioni e ogni scena vanno anche a OpenAI per la moderazione. Le risposte a voce vanno in streaming a Cartesia, e il server dell'app non salva né audio né storie.

La mia API key di Cartesia è esposta nel browser?

No. La chiave resta sul server. Il browser riceve un token che dura 60 secondi e funziona solo per la voce.

Come funziona l'evidenziazione delle parole?

Sonic invia l'istante di inizio di ogni parola insieme all'audio. La pagina controlla l'orologio di riproduzione a ogni fotogramma e illumina la parola che si sta dicendo.

Perché la prima scena impiega qualche secondo?

Il LLM scrive l'intera scena prima che inizi la narrazione, quindi un modello più piccolo accorcia l'attesa. Dopo, le battute successive vengono generate mentre suonano le precedenti.

Esiste una guida passo passo per questo template?

Sì. La ricetta spiega il codice passo per passo, il README copre configurazione, variabili d'ambiente e deploy, e la documentazione sui context del WebSocket TTS spiega la parte Cartesia.