Ai Chat in React Native - Expo
Tags: reactnative, gemini, ios, openai
Published: 2024-02-26 05:12:42

Implementing an AI Chat in React Native in 20 minutes.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3eclzpnwbn0ryuyx49p.png)


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/](https://aistudio.google.com/) and create an API Key


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dhao7gl27fq5sqrotttv.png)


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p8e1tkt4upx737x18zh5.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/up3vv6opu32tcp07nov8.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qy4q5pis83pobwwb481p.png)


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