DEV Community

mrcflorian
mrcflorian

Posted on • Edited on

How to Integrate ChatGPT API in React Native

Here's a step-by-step tutorial on how to integrate the OpenAI's ChatGPT API into a React Native application. This tutorial assumes you already have a basic knowledge of JavaScript and React Native. If you're new to these technologies, consider learning them first.

You can jump straight to the code by downloading this React Native ChatGPT repo.

Integrating ChatGPT API in React Native

Table of Contents

Prerequisites

Before you start, make sure you have:

  1. Node.js and npm/yarn installed on your computer. If not, download them from here.
  2. The latest version of React Native CLI installed. You can install it by running npm install -g react-native-cli.
  3. An OpenAI API key. You can get one from the OpenAI dashboard.

Project Setup

Start by creating a new React Native project:

npx react-native init chatGPTApp
Enter fullscreen mode Exit fullscreen mode

Then, move into your project's directory:

cd chatGPTApp
Enter fullscreen mode Exit fullscreen mode

Installing Required Libraries

We will be using axios for making HTTP requests to the ChatGPT API and react-native-dotenv for managing our environment variables (such as the OpenAI API key). Install these libraries with:

npm install axios @react-native-community/dotenv
Enter fullscreen mode Exit fullscreen mode

Then, to setup react-native-dotenv, add the following lines to the babel.config.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ["module:react-native-dotenv"]
  ]
};
Enter fullscreen mode Exit fullscreen mode

Now, create a .env file in the root directory of your project and add your OpenAI API key:

OPENAI_KEY=your_api_key_here
Enter fullscreen mode Exit fullscreen mode

Setting Up the ChatGPT API Service

Create a new file named ChatGPTService.js in your project's root directory and write the following code:

import axios from 'axios';
import { OPENAI_KEY } from '@env';

const instance = axios.create({
  baseURL: 'https://api.openai.com/v1/engines/davinci-codex/completions',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${OPENAI_KEY}`
  }
});

export const generateResponse = async (message) => {
  try {
    const response = await instance.post('', {
      prompt: message,
      max_tokens: 60
    });
    return response.data.choices[0].text;
  } catch (error) {
    console.error(error);
    return '';
  }
};
Enter fullscreen mode Exit fullscreen mode

Creating the Chat Interface

This tutorial doesn't focus on creating a sophisticated UI, so for brevity, we'll create a simple chat interface with a TextInput for the user input and a Button for sending messages.

In your App.js, replace the boilerplate code with:

import React, { useState } from 'react';
import { View, TextInput, Button, Text, ScrollView } from 'react-native';

const App = () => {
  const [messages, setMessages] = useState([]);
  const [userInput, setUserInput] = useState('');

  const sendMessage = async () => {
    // Logic to send message will go here
  };

  return (
    <View>
      <ScrollView>
        {messages.map((msg, index) => (
          <Text key={index}>{msg}</Text>
        ))}
      </ScrollView>
      <View>
        <TextInput 
          value={userInput}
          onChangeText={setUserInput}
          placeholder="Type a message"
        />
        <Button title="Send" onPress={sendMessage} />
      </View>
    </View>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

Connecting the Interface with the ChatGPT Service

Finally, we need to connect our chat interface with the ChatGPT service. Modify the sendMessage function in App.js to:

import { generateResponse } from './ChatGPTService';

// ...previous code

const sendMessage = async () => {
  if (!userInput) return;

  setMessages(prevMessages => [...prevMessages, `User: ${userInput}`]);
  const botResponse = await generateResponse(userInput);
  setMessages(prevMessages => [...prevMessages, `ChatGPT: ${botResponse}`]);
  setUserInput('');
};
Enter fullscreen mode Exit fullscreen mode

That's it! You now have a React Native application integrated with the ChatGPT API. You can run your app using npx react-native run-android or npx react-native run-ios depending on your target platform.

Remember to keep your API key secure and do not expose it on the client-side in a real-world application. It's recommended to setup a backend server that communicates with the OpenAI API, and your React Native application should communicate with this server.

If you are interested in skipping all these steps and get a ready to use template, check out this premium React Native ChatGPT app offered by Instamobile.

Top comments (0)