add-tts

Add Text-to-Speech

Before generating any code:

1. Identify the relevant TTS doc URLs from the knowledge file at .claude/elevenlabs/knowledge/general-elevenlabs-knowledge.md
2. Fetch current TTS docs to verify model names and parameters:
   • TTS overview: https://elevenlabs.io/docs/overview/capabilities/text-to-speech.mdx
   • Best practices: https://elevenlabs.io/docs/overview/capabilities/text-to-speech/best-practices.mdx
   • Latency optimization: https://elevenlabs.io/docs/eleven-api/guides/how-to/best-practices/latency-optimization.mdx
3. If fetch fails, fall back to static knowledge base with staleness warning.

Steps:

1. Scan the project for framework detection:

   • package.json → Check for Next.js, React, Express, Remix, Astro
   • requirements.txt / pyproject.toml → Check for Flask, FastAPI, Django
   • Detect the primary language (Python/TypeScript/JavaScript)

2. Ask the user their use case via AskUserQuestion:

   • UI narration — Read content aloud (accessibility, article reader)
   • Notification audio — Alert sounds with spoken messages
   • Content generation — Podcast/audiobook/voiceover pipeline
   • Real-time streaming — Live TTS in a voice app or game

3. Select the right TTS model based on use case:

   • UI narration / Real-time streaming → eleven_flash_v2_5 (low latency)
   • Content generation → eleven_multilingual_v2 (highest quality)
   • Notification audio → eleven_turbo_v2_5 (balanced)

4. Generate framework-specific integration code:

   API route/endpoint:

   • Next.js: API route at app/api/tts/route.ts with streaming response
   • Express: POST endpoint with streaming TTS
   • FastAPI: Endpoint with StreamingResponse
   • Flask: Route with generator-based streaming

   Frontend component (if applicable):

   • React: Audio player component with play/pause/progress controls
   • HTML5: Simple audio element with fetch + blob URL
   • Python: File output or audio playback