Build ChatGPT Voice Chat in React Native & Expo

Learn how to build a voice chat app powered by OpenAI's new realtime API using React Native and Expo. You'll see how to create a natural, low-latency speech-to-speech conversation with six preset AI voices, including how to start and interrupt calls smoothly.

It's perfect for React Native developers interested in AI-powered voice interfaces and Expo users who want to integrate OpenAI's realtime capabilities into their apps. The demo is tested on iOS and includes tips on handling platform-specific features.

What's inside

• Introduction to OpenAI's realtime API for voice chat
• Demo of the voice chat app UI and interaction
• How the app manages OpenAI sessions and API keys
• Features like interrupting speech and voice selection
• Using Expo SDK 53 and its new features
• Running two AI voices talking to each other
• How to get access to the project code
• Platform considerations and iOS-specific features

Introduction to OpenAI's realtime API for voice chat

OpenAI's new realtime API enables natural, low-latency speech-to-speech conversations using six preset AI voices. This API supports advanced modes that make voice chat feel fluid and responsive. I start by explaining this API and its potential for building interactive voice applications.

The realtime API returns an FPML API key safe for client-side use, which the app uses to establish sessions and start conversations quickly. The first connection takes about a second, then the conversation flows with minimal delay.

Demo of the voice chat app UI and interaction

The app features a smooth, user-friendly UI inspired by ARC's AI call feature. It uses Expo Mesh Gradient for a visually appealing background on iOS. The demo shows starting a call, exchanging greetings, and asking questions about Expo updates.

You can interrupt the AI mid-speech by starting to talk, which stops the current response and listens for new input. The UI also displays which voice is speaking and who you are talking to, enhancing clarity during conversations.

How the app manages OpenAI sessions and API keys

When you press "start call," the app makes a GET request to an API route built with Expo Router. This route requests a session from OpenAI and returns an FPML API key that is safe to expose on the client.

This approach keeps sensitive credentials secure while enabling realtime voice chat. The session management ensures fast connection setup and smooth conversation flow without exposing private keys.

Features like interrupting speech and voice selection

The app supports interrupting the AI response by detecting when the user starts speaking, immediately stopping the current speech and switching to listening mode. This makes conversations feel natural and responsive.

You can also long-press on the UI to select different preset voices, such as "verse," to customize the AI's speaking style. This flexibility allows for varied voice interactions and testing different AI personalities.

Using Expo SDK 53 and its new features

I highlight Expo SDK 53, which introduces a new architecture by default, edge-to-edge Android support, and cross-platform Expo UI components. It also adds new modules like Expo Audio and Expo Maps, plus support for React server functions.

These updates improve performance and developer experience, making Expo a strong choice for building AI-powered apps like this voice chat.

Running two AI voices talking to each other

A fun demo shows two AI voices having a conversation with each other. You can start a conversation with one voice asking about Expo, then have the other voice respond quickly and concisely.

This showcases the realtime API's ability to handle multiple simultaneous voice streams and opens possibilities for creative AI interactions beyond one-on-one chats.

How to get access to the project code

The full project code is free for active subscribers of Code with I courses. You get lifetime access within the Code with I GitHub organization, where you can collaborate, discuss, and contribute.

Instructions to request access are linked below. This is a great resource if you want to explore the code, run the app yourself, or build your own AI voice chat projects.

Platform considerations and iOS-specific features

The demo is currently tested only on iOS. Some features, like Expo Mesh Gradient backgrounds, are iOS-only and may require tweaks to work on Android.

Keep this in mind if you plan to run or adapt the app on Android devices. I honestly notes these limitations and encourages experimentation.

Resources

CourseReact Native course

Learn React Native and Expo fundamentals through practical projects with lifetime access.

Premium resourcePro membership

Get lifetime access to exclusive projects like this voice chat app and more.