carlosaj18/fullstack-react-chat-ai-app

React Fullstack, Chat App.

Chat App with GPT Integration

Build a Chat Application with ChatEngine and ChatGPT integration. The frontend will consist of ChatEngine for our chat application, Redux Toolkit for our state management, Redux Toolkit Query for making api calls, Hero icons for our Icons and React Router for Navigation. For the backend we will be using Node Js as our runtime, Express Js as our backend framework, and OpenAI for Ai integration with our chat. We will be able to talk through our chat application like with ChatGPT.
Explore the site »

View Demo · Report Bug · Request Feature

🌟 About the Project

This innovative Chat App revolutionizes communication by seamlessly integrating with GPT, allowing users to receive intelligent and contextually relevant responses. Powered by cutting-edge technology, this platform offers an interactive and intelligent chat experience, harnessing the capabilities of GPT for providing accurate and thoughtful replies. Experience effortless and meaningful conversations with the power of AI-driven responses in this next-level Chat App.

Project Technological Stack:

• ChatEngine: Powers chat functionality in the application through real-time chat framework.
• OpenAI and ChatGPT Integration: Infuses AI capabilities for smarter, more intuitive conversations.
• Redux Toolkit: Efficiently manages application state.
• Redux Toolkit Query: Facilitates API calls seamlessly within the application.
• Hero Icons: Provides an array of icons, enhancing the app's visual appeal.
• React Router: Enables smooth navigation between app pages.
• Node.js: Utilized as the runtime environment.
• Express.js: Backend framework ensuring robustness and scalability.
• OpenAI Integration: Integrates AI functionalities, enhancing chat interactions.

Features:

• Authentication: Implement user authentication for secure access to the application.
  

• Chat Creation: Users can create individual or group chats for diverse conversations.
  

• Multimedia Upload: Capability to share and upload various multimedia files within chats.
  

• AI-Integrated Chats: Create AI-powered chat functionality, integrating ChatGPT API for enhanced conversational experiences.
  

• Chat Member Management: Ability to add or remove members from existing chats or group conversations.
  

• AI-Powered Autocomplete: AI-driven autocomplete feature for predictive and intelligent text suggestions within chats.
  

• ChatGPT API Integration: Code integration enabling seamless communication with ChatGPT for conversational AI functionalities.
  

Getting Started

**Note**: This app requires API key from OPENAI and Chat Engine

1. Download Node.js and npm (follow instructions here)

2. Git clone and cd into the repo folder:

https://github.com/Carlosaj18/Fullstack-React-Chat-AI-App.git && cd chatgpt-clone

3. Install all dependencies

npm install

4. In root directory of the server, create a .env file

.env

5. In root directory of the client, create a .env.local file

.env.local

6. In the .env file, create following environment variables:

PORT = 1337
PRIVATE_KEY=CHAT_ENGINE_API_KEY
PROJECT_ID = YOUR_CHAT_ENGINE_PROJECT_ID
BOT_USER_NAME=USER_BOT
BOT_USER_SECRET=PASSWORD_BOT
OPEN_API_KEY = YOUR_OPENAI_API_KEY

7. In the .env.local file, create following environment variables:

VITE_BASE_URL = http://localhost:1337
VITE_PROJECT_ID = YOUR_VITE_PROJECT_ID

8. Run the server

npm start
#for deployed version

npm run dev
#for deployed version

9. Run the client

npm start
#for deployed version

npm run dev
#for deployed version

10. Access the project in your browser at http://localhost:5173/

Demo & Showcasing:

📷 Screenshots

ChatAi.mp4

Live Site

• Chat AI App is a responsive web app can be viewed on any device.

Contact

(back to top)