Building a Full-Stack Chatbot: React Frontend, Express Backend, and OpenAI API Integration

const express = require("express");
const cors = require("cors");
const { Configuration, OpenAIApi } = require("openai");
require("dotenv").config();

const app = express();

// Middleware
app.use(cors());
app.use(express.json());

// Configure OpenAI API
const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

// Define the chat endpoint
app.post("/chatbot/chat", async (req, res) => {
  const { message } = req.body;

  try {
    const response = await openai.createChatCompletion({
      model: "gpt-3.5-turbo",
      messages: [{ role: "user", content: message }],
    });

    res.json({ reply: response.data.choices[0].message.content });
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: "Something went wrong with the API." });
  }
});

// Start the server
const PORT = process.env.PORT || 3005;
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
      <App />
  </StrictMode>,
)

import * as React from 'react';
import { useState } from "react";
import './App.css'
import axios from "axios";

const Default = () => {

    const [inputText, setInputText] = useState("");

    const list = []
    const [chatList, setChatList] = useState(list);

    const addChatItem = (newItem) => {
      setChatList(prevItems => [...prevItems, newItem]);
    };

    const handleKeyDown = (event) => {
      if (event.key === 'Enter') {
        sendMessage();
      }
    };

    const sendMessage = async() => {

        const input = document.querySelector('.chat-text');
        const question = input.value;
        addChatItem({from:'self', content: question});
        setInputText('');
        
        const response = await axios.post("/chatbot/chat", {
          question,
        });
        addChatItem({from:'other', content: response.data});
 
    };

    return (
      <div className='control-pane'>
        <div className="control-section">
          <h1 hidden={chatList.length}>What can I help with?</h1>
          <ul className='chat-list' hidden={!chatList.length}>
            {chatList.map((chat, index) => (
              <li className='chat-item' key={index}>
                <div className={'chat-content ' + (chat.from === 'self' ? 'chat-content-self': 'chat-content-other')  }>
                  {chat.content}
                </div>
              </li>
            ))}
          </ul>
          <div className={'chat-input '+ (chatList.length ? 'chat-input-chated' : '' )}>
            <input maxLength="500" rows="5" value={inputText} className='chat-text' type="text" onChange={(e)=>setInputText(e.target.value)} onKeyDown={handleKeyDown} placeholder="Ask me anything"/>
            <button className={'submit-button ' + (inputText ? 'inputed' : '')}  onClick={sendMessage}>↑</button>
          </div>
        </div>
      </div>);
};

export default Default;