Contents

• Integration of the Chat Function of CoreGPT
  • Introduction
  • Frontend Setup
    • Client Initial Setup with Vite
      • Install Dependencies
    • Tailwind CSS 4.0 Configuration for Vite
      • Install Tailwind CSS and the Vite Plugin
      • Configure the Vite Plugin
      • Import Tailwind CSS in Your CSS File
      • Run Your Development Server
    • Create the Chat Page
      • a. File Location
      • b. Library Imports
      • c. Define the Main Component Function
      • d. State Variables and References
      • e. Implement Side Effects
      • f. Create the Function to Send Messages
      • g. Return the Component's JSX
      • h. Final Code
    • Create or Reuse Components InputBox, ChatBubble, and Banner
      • a. Create the **InputBox** Component
        • i. File Location
        • ii. Library Imports
        • iii. Define the Component Props
        • iv. Create the Main Function of the Component
        • v. Return the JSX of the Component
        • vi. Final Code
      • b. Create the **ChatBubble** Component
        • i. File Location
        • ii. Library Imports
        • iii. Define the Component Props
        • iv. Create the Main Function of the Component
        • v. Return the JSX of the Component
        • vi. Final Code
      • c. Create the **LoadingIndicator** Component
        • i. File Location
        • ii. Define the Main Function of the Component
        • iii. Return the JSX of the Component
        • iv. Final Code
    • d) (Optional) Create the `Banner` Component
      • d.1. File Location
      • d.2. Define the `Banner` Component
      • d.3. Final Code
    • Include the Chat Page in App.jsx
  • Backend Setup
    • a. Navigate to the Backend Project Folder
    • b. Initialize the Project and Create the `.env` File
    • c. Configure `package.json`
    • d. Add Environment Variables
    • e. Install Required Dependencies
    • Create Additional Files and Folders
    • Create the Chat Route
      • a. File Location
      • b. Library Imports
      • c. Define the Main Function of the Route
      • d. Export the Router
      • e. Final Code
    • Create the Helper Function for OpenAI
      • a. File Location
      • b. Library Imports
      • c. Initialize the OpenAI Client
      • d. Define the Helper Function `chatHelper`
      • e. Final Code
    • Configure the Main Server
      • a. File Location
      • b. Library Imports
      • c. Initialize the Environment Configuration
      • d. Set Up the Express Application
      • e. Start the Server
      • f. Final Code
  • Putting Everything Together
    • Start the Node.js Server
      • a. Run the Server
    • Start the React Application
      • a. Navigate to the React Project Folder
      • b. Run the Application
    • Test the Chat Function
      • a. Open the Chat Page
      • b. Interact with the Chat
  • Conclusion
  • Legend