Ai Chat in React Native - Expo

Implementing an AI Chat in React Native in 20 minutes.

I'll walk you through configuring Nader Dabit's React Native AI repo with Google's Gemini.

prerequisites

• NodeJS
• Git
• Expo CLI
• Windows + Android Simulator or a Mac + iOS Simulator.

React Native AI structure

React Native AI is a project made out of two parts:

• Frontend: An Expo project that you can run in iOS and/or Android
• Backend: A NodeJS project that takes user requests and communicates with an LLM. You can use OpenAI, Cohere, Claude, or Gemini.

API Access to Google Gemini

Gemini is accessible through 2 APIs.

• Google Cloud's Vertex AI, for which you'd use @google-cloud/aiplatform
• @google/generative-ai for which you can get an API Key in Google AIStudio

The latter is more straightforward to set up and is what React Native AI uses, so let's get started.

Setting up React Native AI with Google Gemini

Generate a Gemini API Key

Head over to https://aistudio.google.com/ and create an API Key

Click Create API key.
Do not share your API Key online, you know, the code that looks like Kg1kQ2r5IdXTGWrEKKH8R6s9OLRP

Clone React Native AI

In your IDE, run git clone https://github.com/dabit3/react-native-ai.git

Set up the backend server

Once you've cloned the main repository, install dependencies and set up your API key by running the following commands.

cd server/

Then:

npm i

Then:

• In Mac export GEMINI_API_KEY=YOUR_API_KEY
• in Windows Powershell $Env:GEMINI_API_KEY = "YOUR_API_KEY" Finally:

npm start

You should see something similar to:

npm start                                                    

> server@1.0.0 start
> node dist/index.js

Server started on port 3050

Do not close the terminal session when following further steps.

Setting up the frontend React Native (Expo) App.

Start a new terminal session on the root directory of the React Native AI repository, then run:

cd app/

Then:

npm i

:
Then:

• In Mac export EXPO_PUBLIC_ENV=DEVELOPMENT also run export EXPO_PUBLIC_DEV_API_URL=http://localhost:3050
• in Windows Powershell $Env:EXPO_PUBLIC_ENV = "DEVELOPMENT" also run $Env:EXPO_PUBLIC_DEV_API_URL = "http://localhost:3050"

Finally:

npm start

After a few seconds you'll see:

› Using Expo Go
› Press s │ switch to development build

› Press a │ open Android
› Press i │ open iOS simulator
› Press w │ open web

› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu
› Press o │ open project code in your editor

› Press ? │ show all commands

Press I if you're using a Mac and want to run the Expo Go app in an iOS emulator (requires Xcode), or press A for running the app on the Android Emulator (requires Android Studio).
Alternatively.

Success!!! Using Gemini in a React Native App

Select Gemini as the model to use in conversations

Thanks again to Nader Dabit for sharing the React Native AI project on Github