NodeJs Technology web

Integrating of ChatGPT with Node.js and React.js

Integrating of ChatGPT with Node.js and React.js

July 8, 2024
NodeJs ,Technology ,web

Incorporating AI-powered chat functionality into web applications is becoming increasingly popular. ChatGPT, powered by OpenAI’s GPT-4, offers a robust solution for creating interactive and intelligent chat interfaces. This guide will walk you through integrating ChatGPT with a Node.js backend and a React.js frontend.

Before we start, ensure you have the following installed on your system:

  1. Node.js
  2. npm or yarn
  3. A basic understanding of React.js and Node.js
  4. OpenAI API key (you can get it by signing up at OpenAI’s website)

Step-by-Step Integration:

Step 1: Setting Up the Node.js Backend

First, let’s set up the backend server using Node.js. This server will handle API requests to the OpenAI API.

1.1 Initialize a New Node.js Project

Create a new directory for your project and initialize a new Node.js project:

mkdir chatgpt-integration
cd chatgpt-integration
npm init -y

1.2 Install Required Packages

Install the required packages:

npm install express axios cors dotenv

1.3 Create the Server

Create a file named server.js in your project root:

const express = require('express');
const axios = require('axios');
const cors = require('cors');

const app = express();
const port = process.env.PORT || 5000;

app.use(express.json());'/api/chat', async (req, res) => {
  const message = req.body.message;

  try {
    const response = await
        prompt: message,
        max_tokens: 150,
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,

  } catch (error) {
    res.status(500).send('Error generating response');

app.listen(port, () => {
  console.log(`Server running on port ${port}`);

1.4 Create a .env File

Create a .env file in your project root and add your OpenAI API key:


1.5 Run the Server

Start the server:

node server.js

Your backend server is now ready to handle requests.

Step 2: Setting Up the React.js Frontend

Next, we’ll set up the frontend using React.js to interact with our Node.js backend.

2.1 Initialize a New React.js Project

Create a new React project using Create React App:

npx create-react-app chatgpt-frontend
cd chatgpt-frontend

2.2 Install Axios

Install Axios for making HTTP requests:

npm install axios

2.3 Create the Chat Component

Create a new component named Chat.js inside the src directory:

import React, { useState } from 'react';
import axios from 'axios';

const Chat = () => {
  const [message, setMessage] = useState('');
  const [response, setResponse] = useState('');

  const handleSendMessage = async () => {
    try {
      const res = await'http://localhost:5000/api/chat', { message });
    } catch (error) {
      console.error('Error sending message:', error);

  return (
        onChange={(e) => setMessage(}
        placeholder="Type your message here...">
      <br />
      <button onClick={handleSendMessage}>Send</button>

export default Chat;

2.4 Update the App Component

Update the App.js file to include the Chat component:

import React from 'react';
import Chat from './Chat';

function App() {
  return (
    <div className="App">
      <Chat />

export default App;

2.5 Run the React App

Start the React development server:

npm start

Your React app should now be running, and you can interact with the ChatGPT model by typing messages and receiving responses.


Integrating ChatGPT with a Node.js backend and React.js frontend involves setting up a server to handle API requests and a frontend to interact with the user. By following the steps outlined in this guide, you can create a seamless chat experience powered by OpenAI’s GPT-4.

For professional development and custom solutions, hire the RND Experts team to develop your WordPress theme and plugin, ensuring robust and scalable applications tailored to your specific needs.

Leave a Reply

Your email address will not be published. Required fields are marked *