An interactive demo for developers to try the new text-to-speech model in the OpenAI API. Built with Next.js, React, Tailwind CSS, and shadcn/ui components.
- Voice Selection: Choose from a variety of OpenAI TTS voices, including premium options.
- Vibe Selection: Pick a conversational style ("vibe") for the generated speech, such as Sincere, Santa, Sympathetic, Sports Coach, or Calm.
- Script Editor: Edit the text to be spoken, with live character count.
- Play Demo: Simulate playback of the generated speech (API integration placeholder).
- Responsive UI: Modern, accessible, and mobile-friendly design.
pnpm install # or npm install or yarn installpnpm dev # or npm run dev or yarn devVisit http://localhost:3000 to view the app.
- Next.js 15
- React 19
- Tailwind CSS
- shadcn/ui
- Radix UI
- Lucide Icons
- TypeScript
app/— Next.js app directory (entry point:page.tsx)components/— UI components (voice selector, vibe selector, script editor, etc.)public/— Static assets (placeholders, logos)lib/,hooks/— Utilities and custom hooks
- This is a UI demo. The Play button simulates TTS playback; actual API integration is not included.
MIT