How to build a React Native chatbot app with OpenAI and Amity Social Cloud — Part 1

Step 1: Understanding OpenAI API

Before diving into the technical implementation, it’s essential to grasp the basics of OpenAI API. OpenAI provides an API that allows you to interact with their language models programmatically. This API enables you to send prompts to the model and receive generated text as responses. The prompts can be tailored to initiate conversations, ask questions, or perform any other text-based task you require.

‍

Step 2: Setting Up Your OpenAI Account

To get started, you’ll need an OpenAI account. Head to the OpenAI website and sign up for an account. Once you have an account, you’ll be able to access the API key, which is essential for making requests to the OpenAI API.

‍

Step 3: Obtaining Your API Key

After signing up and logging into your OpenAI account, navigate to the API section to generate an API key. This key will serve as the authorization token when making requests to the API. Keep this key secure and avoid sharing it publicly.

Step 4: Creating Your TypeScript Node.js Project

With OpenAI preparations complete, it’s time to set up your development environment for building the chatbot backend. We’ll use TypeScript and Node.js for this purpose. If you haven’t already, make sure Node.js is installed on your system.

Open your terminal and navigate to the directory where you want to create your project. Use the following command to initialize a new Node.js project:

npm init

‍

This command will guide you through the process of creating a package.json file for your project.

‍

Step 5: Installing TypeScript and Required Dependencies

To enable TypeScript support for your Node.js project, we’ll install TypeScript and the necessary type definitions. Use the following commands:

npm install typescript --save-dev
npm install @types/node --save-dev

‍

Step 6: Creating a TypeScript Node.js Script with Webhook Support

In this step, we’ll modify our TypeScript Node.js script to handle incoming POST requests as a webhook. We’ll use the Express.js framework to create a simple webhook endpoint that logs incoming data and sends a response.

‍

Install Required Dependencies

Begin by installing the required dependencies, Express.js and Axios, with the following command in your project directory:

npm install express axios

‍

Configuring TypeScript and Compiling

Now that we’ve added Express.js to our project, we need to install its TypeScript type definitions. Run the following command:

npm install @types/axios @types/express --save-dev

‍

Update the TypeScript Code

Modify the app.ts file to use Express.js and create a webhook endpoint that listens for POST requests. Replace the existing content of app.ts with the following code:

import express from 'express';
import * as http from 'http';
const app = express();
app.use(express.json());
// Webhook endpoint
app.post('/webhook', (req, res) => {
  const body = req.body;
  console.log('Received webhook data:', JSON.stringify(body));
  res.json({ message: 'Webhook data received successfully' });
});
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

In this code, we import the Express module, create an instance of the Express application, and define a webhook endpoint that handles incoming POST requests. The data received is logged, and a JSON response is sent to confirm successful data reception.

‍

Step 7: Configuring TypeScript

Create a tsconfig.json file in the root of your project to configure TypeScript settings. Here's a basic example:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "outDir": "./dist"
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

‍

This configuration specifies that TypeScript files from the src directory will be compiled to the dist directory.

Step 8: Creating a Webhook URL with Ngrok

Now that we have our TypeScript Node.js application ready, it's time to create a webhook URL so we can receive text message events from Amity. Follow these steps and be sure to create Ngrok account first to get the authentication token.

‍

npm install -g ngrok

touch .env

PORT=3000 
OPENAI_API_KEY=your_openai_api_key 
NGROK_AUTH_TOKEN=your_ngrok_auth_token

npm install dotenv

import express from 'express';
import * as http from 'http';
import dotenv from 'dotenv';

const app = express();
app.use(express.json());
const port = process.env.PORT || 3000;

// Webhook endpoint
app.post('/webhook', (req, res) => {
  const body = req.body;
  console.log('Received webhook data:', JSON.stringify(body));
  res.json({ message: 'Webhook data received successfully' });
});
// Create a basic HTTP server
const server = http.createServer(app);
server.listen(port, () => {
  console.log('Server is running on port 3000');
});

tsc && node dist/app.js

ngrok http 3000

https://your-ngrok-url.ngrok.io

https://your-ngrok-url.ngrok.io/webhook

Prerequisites

1. If you haven’t already registered for an Amity account, we recommend following our comprehensive step-by-step guide in the Amity Portal to create your new network.
2. You’ll need to request for feature enablement to be able to use webhook, please submit your request here.

‍

Step 1: Go to Amity Console

Simply navigating to Amity Console and log-in with your credentials.

Step 2: Navigate to Webhook Menu

Click on the “Webhook” menu on the left-hand side of the Amity Console.

‍

Step 3: Add Webhook URL to Amity Console

Click on “Add URL” button, enter the newly created webhook URL (https://your-ngrok-url.ngrok.io/webhook) and click Submit.

Step 4: All Done

Congratulations! You’ve successfully subscribed to Amity Real-Time Events. Now, let’s focus on our Node.js application’s functionality.

‍

Step 1: Create Object Types for Amity Message Events

In TypeScript, types are crucial for ensuring type safety, enhancing code quality, and improving productivity. Let’s create a types.ts file at the root of the project directory and define types for Amity message events. We'll include only the relevant fields in these types.

export interface MessageData {
    messages: Message[]
    users: User[]
}

export interface Message {
    _id: string
    type: string
    tags: any[]
    isDeleted: boolean
    createdAt: string
    editedAt: string
    channelSegment: number
    updatedAt: string
    childrenNumber: number
    path: string
    data: Data
    channelId: string
    userId: string
    messageId: string
    flagCount: number
    hashFlag: any
    mentionees: any[]
    reactionsCount: number
}

export interface Data {
    text: string
}

export interface User {
    _id: string
    path: string
    displayName: string
    updatedAt: string
    createdAt: string
    isDeleted: boolean
    userId: string
    roles: string[]
    flagCount: number
    hashFlag: any
}

‍

Step 2: Extract Amity Message Event Information

Let’s update our webhook function to convert the received object into MessageEventData and extract the message's text.

import express, { Express, Request, Response } from 'express';
import dotenv from 'dotenv';
import util from 'util'; // Import the util module
import { MessageData } from './types';

dotenv.config();

const app: Express = express();
const port = process.env.PORT;
app.use(express.json());

app.get('/', (req: Request, res: Response) => {
    res.send('Express + TypeScript Server');
});
app.post('/webhook', (req: Request, res: Response) => {
    if(req.body.event == "message.didCreate"){ // We'll focus only on message event
        const messageData: MessageData = req.body.data;
        const messageText = messageData.messages[0].data.text // get message's text
        console.log("printing webhook event " + util.inspect(messageData, { depth: null }));
       
    }
    res.send('Received Amity webhook event');
});

app.listen(port, () => {
    console.log(`⚡️[server]: Server is running at http://localhost:${port}`);
});

‍

Step 3: Send Message Text Data to OpenAI

Now that we have extracted the message’s text data, it’s time to send it to OpenAI for processing and obtain our chatbot’s response. First, let’s update our webhook function to call the OpenAI API with the received message text.

import express, { Express, Request, Response } from 'express';
import dotenv from 'dotenv';
import util from 'util'; // Import the util module
import { MessageData } from './types';
import axios, { AxiosRequestConfig } from 'axios';

dotenv.config();

const app: Express = express();
const port = process.env.PORT;
app.use(express.json());

app.get('/', (req: Request, res: Response) => {
    res.send('Express + TypeScript Serverr');
});
app.post('/webhook', (req: Request, res: Response) => {
    if(req.body.event == "message.didCreate"){
        const messageData: MessageData = req.body.data;
        const messageText = messageData.messages[0].data.text
        const response = getChatCompletions(messageText)
        
        console.log("printing webhook event " + util.inspect(messageData, { depth: null }));
       
    }
    res.send('Received Amity webhook event');
});

async function getChatCompletions(message:String) {
    const axiosConfig: AxiosRequestConfig = {
        method: 'POST',
        url: 'https://api.openai.com/v1/chat/completions',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
        },
        data: {
            model: 'gpt-3.5-turbo',
            messages: [
                { role: 'user', content: message },
            ],
            temperature: 0.7,
        },
    };

    try {
        const response = await axios(axiosConfig);
        console.log("Check openAI response text "+response.data.choices[0].message.content);
        const responseText = response.data.choices[0].message.content
       
        return responseText
        
    } catch (error) {
        console.error('Error:', error);
    }
}


app.listen(port, () => {
    console.log(`⚡️[server]: Server is running at http://localhost:${port}`);
});

‍

In this updated code, we have added a section dedicated to interacting with the OpenAI API to obtain a chatbot response. Here’s a brief explanation of the OpenAI-related section:

1. Async Function for OpenAI Interaction:

async function getChatCompletions(message: string) {     // ... }

‍

This is an asynchronous function named getChatCompletions, responsible for making a request to the OpenAI API to obtain chatbot completions based on the input message.

2. Axios Request Configuration:

const axiosConfig: AxiosRequestConfig = {
    method: 'POST',
    url: 'https://api.openai.com/v1/chat/completions',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`,
    },
    data: {
        model: 'gpt-3.5-turbo',
        messages: [
            { role: 'user', content: message },
        ],
        temperature: 0.7,
    },
};

‍

This part defines the configuration for the Axios HTTP request sent to the OpenAI API. It specifies the method, URL, headers (including the API key), and the JSON data payload that includes the user’s message and other parameters like the model and temperature.

3. Try-Catch Block for Making the Request:

try {
    const response = await axios(axiosConfig);
    // ...
} catch (error) {
    console.error('Error:', error);
}

‍

Within the try block, Axios is used to send the request to the OpenAI API. The response from the API is stored in the response variable for further processing. If any errors occur during the request, they are caught in the catch block, and an error message is logged.

4. Handling OpenAI Response:

console.log("Check openAI response text " + response.data.choices[0].message.content);
const responseText = response.data.choices[0].message.content;
return responseText;

‍

After receiving a successful response from the OpenAI API, the code logs the chatbot’s response content and extracts it from the response object. The chatbot’s response is stored in the responseText variable and returned from the function.

Step 1: Get the Amity channelID

Let’s update our webhook function to store the message sender ID and channel ID where the conversation is happening, so we can send the message to the correct conversation.

app.post('/webhook', (req: Request, res: Response) => {
    if(req.body.event == "message.didCreate"){
        const messageData: MessageData = req.body.data;
        const messageText = messageData.messages[0].data.text
        const channelId = messageData.messages[0].channelId
        const response = getChatCompletions(messageText)
        
        console.log("printing webhook event " + util.inspect(messageData, { depth: null }));
       
    }
    res.send('Received Amity webhook event');
});

‍