NewCode with Beto MCP

Building a Talk ChatGPT App with React Native Expo, NestJS, Google Text-to-Speech, OpenAI and TS

Beto, August 28, 2023 · 22,309 views

Press a button, talk, and hear ChatGPT answer out loud. That full voice loop is simpler than it sounds when you split it right: the React Native app converts speech to text on the device (skipping costly cloud transcription), and a NestJS backend handles OpenAI and Google Text-to-Speech, keeping your API keys off the client.

I build both sides from scratch in the video, in TypeScript.

What's inside

  • Record voice and transcribe it locally to avoid speech-to-text API costs
  • Send only text to a NestJS server that talks to ChatGPT
  • Convert responses to MP3 with Google Text-to-Speech
  • Play the audio back and replay the last message on demand
  • Keep API keys server-side where they belong
  • Scaffold it all with the blank TypeScript Expo template

Resources

CourseReact Native course

Let's connect!

Had a win? Get featured on Code with Beto.Share your story