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
- 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.
-
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.
**Note**
: This app requires API key from OPENAI and Chat Engine
1. Download Node.js and npm
(follow instructions here)
https://github.com/Carlosaj18/Fullstack-React-Chat-AI-App.git && cd chatgpt-clone
npm install
.env
.env.local
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
VITE_BASE_URL = https://localhost:1337
VITE_PROJECT_ID = YOUR_VITE_PROJECT_ID
npm start
#for deployed version
npm run dev
#for deployed version
npm start
#for deployed version
npm run dev
#for deployed version
10. Access the project in your browser at https://localhost:5173/
ChatAi.mp4
• Chat AI App is a responsive web app can be viewed on any device.