DEV Community

mrcflorian
mrcflorian

Posted on • Edited on

22 1 1 1 1

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.

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay