How to Add AI Voice to Your React App in 5 Minutes
A step-by-step guide to integrating AI-powered text-to-speech into your React application using the TTS2Go SDK.
Adding natural-sounding AI voice to your React app used to require stitching together multiple APIs, managing audio buffers, and handling complex streaming logic. Not anymore. In this tutorial, we will walk through integrating TTS2Go into a React app from scratch.
Prerequisites
Before we start, make sure you have a TTS2Go account and an API key. You will also need a React project — any version 18 or above will work, whether it is Create React App, Next.js, Vite, or Remix.
Step 1: Install the SDK
Start by installing the TTS2Go React SDK. Run npm install @tts2go/react or yarn add @tts2go/react in your project directory. The package is lightweight at under 15KB gzipped and has zero peer dependencies beyond React itself.
Step 2: Wrap Your App
Add the TTS2GoProvider at the root of your component tree. Pass your project API key as a prop. This sets up the audio context and manages voice connections for all child components.
Step 3: Add a Play Button
Use the useTTS hook in any component to get play, pause, and stop controls. Pass the text you want spoken and an optional voice ID. The hook handles streaming, buffering, and playback state automatically. Your users hear audio within 200ms of clicking play.
What Is Next?
Once you have the basics working, explore voice selection, SSML support for fine-tuned pronunciation, and the highlight API that syncs on-screen text with spoken words. Check out the full documentation at tts2go.com/docs/react for advanced usage patterns.