Histórias interativas
com uma voz para cada personagem
Captura de tela. O template rodando localmente.
- Modelos
- sonic-3.6, ink-2
- Idiomas
- Inglês
- Licença
- Apache-2.0
- Stack
- Next.js 16React 19AI SDKIndexedDBshadcn/ui
- Produtos da Cartesia
- Sonic 3.6Ink 2
O que ele faz
Cada história tem três cenas curtas. Um LLM as escreve a partir do tema e do tom que você escolhe, e o Sonic 3.6 as lê em voz alta. O narrador e cada personagem falam com a própria voz, e cada palavra se acende enquanto é lida.
No fim de cada cena, você escolhe o que acontece depois entre duas opções. Toque em uma ou diga em voz alta. A segurança de conteúdo vem ativada, e cada cena é verificada antes de tocar.
Rode você mesmo
Instale
Rode os comandos abaixo com o Node 22.22 ou mais recente. O pnpm também funciona. Preencha o
.env.localcom base na tabela abaixo. Se faltar alguma chave, a página diz qual.Variáveis de ambiente - CARTESIA_API_KEY
play.cartesia.ai/keys- LLM_MODEL
provedor/modelo, por exemploopenai/gpt-5.4-mini- OPENAI_API_KEY
- Se
LLM_MODELcomeçar com openai/. Recomendada com qualquer modelo, porque ativa a moderação das cenas - ANTHROPIC_API_KEY
- Se
LLM_MODELcomeçar com anthropic/ - AI_GATEWAY_API_KEY
- Para qualquer outro provedor
- APP_PASSWORD
- Opcional localmente. Obrigatória na Vercel, ou none para deixar o app público
- TRUST_PROXY
- Opcional. 1 atrás do seu próprio proxy reverso
Comece uma história
Abra a URL que o
npm run devmostra. Escolha um tema e um tom, dê um nome ao herói se quiser e clique em Start the story. Quando uma cena terminar, toque em uma das duas escolhas, ou clique em Answer out loud e diga.
Crie com seu agente de programação
Um prompt que diz ao seu agente de programação por onde começar e o que ler primeiro.
Prompt
Build an interactive story app with Cartesia. Start from https:/ 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:/ to get one.
Como funciona
Por que funciona assim
Uma voz nova para cada personagem
O Sonic consegue rodar vários fluxos em uma só conexão, cada um com sua voz e sua emoção. Assim o narrador, o herói e um dragão falante se revezam sem reconectar. Cada personagem novo recebe a próxima voz de uma lista.
Suas palavras ficam no navegador
O Ink 2 transforma sua resposta em texto, e a página a associa a uma escolha dentro do próprio navegador. Só a opção escolhida volta para o LLM, nunca o que você disse. O microfone só abre quando você clica em Answer out loud.
Ouvir de novo não faz chamadas à API
Cada cena fica salva no IndexedDB do navegador com o áudio e o tempo de cada palavra. Ouvir de novo uma história da biblioteca toca tudo com o destaque, sem nenhuma chamada.
Deixe com a sua cara
Use outras vozes
Os ids de voz ficam em lib/story.ts. Troque por vozes de play.cartesia.ai/voices.
Faça histórias mais longas
Aumente TOTAL_SCENES em lib/story.ts, que por padrão é 3. Cada cena a mais custa uma chamada ao LLM e a sua narração.
Conte histórias em outro idioma
O Ink 2 e o Sonic também falam espanhol, francês, hindi e japonês. Defina o idioma da narração em lib/narrate.ts e inclua o idioma no prompt da história. Traduza as listas de palavras que o app usa para reconhecer as escolhas faladas e para a segurança. Desligue as configurações de emoção, que só funcionam em inglês.
Junte-se às equipes que estão migrando para a Cartesia
Perguntas
Como ele mantém as histórias seguras?
Os temas e os tons são opções prontas, e o prompt proíbe violência explícita, conteúdo sexual e ódio. Cada cena também passa por uma lista de palavras, e pelo serviço de moderação da OpenAI se você adicionar uma chave da OpenAI. Nenhum filtro é perfeito, então leia algumas histórias antes de compartilhar.
Para onde vão minhas escolhas e minha voz?
As configurações da história, o nome do herói e suas escolhas vão para o provedor de LLM que você escolher. Se você adicionar uma chave da OpenAI, as configurações e cada cena também vão para a OpenAI para moderação. As respostas faladas vão em streaming para a Cartesia, e o servidor do app não guarda áudio nem histórias.
Minha API key da Cartesia fica exposta no navegador?
Não. A chave fica no servidor. O navegador recebe um token que dura 60 segundos e só serve para voz.
Como funciona o destaque das palavras?
O Sonic envia o horário de início de cada palavra junto com o áudio. A página confere o relógio de reprodução a cada quadro e acende a palavra que está sendo dita.
Por que a primeira cena demora alguns segundos?
O LLM escreve a cena inteira antes de a narração começar, então um modelo menor encurta a espera. Depois, as falas seguintes são geradas enquanto as anteriores tocam.
Existe um guia passo a passo deste template?
Sim. A receita explica o código, o README cobre a configuração, as variáveis de ambiente e a implantação, e a documentação de contextos do WebSocket de TTS explica o lado da Cartesia.
Mais do cookbook
Comece hoje
Fale com um especialista.
Converse com alguém da nossa equipe e descubra como a Cartesia pode ajudar você a criar experiências de voz de alto nível.
Comece a criar.
Acesse nossos modelos por API e coloque um agente de voz em produção em minutos.