https://github.com/shreygrg03/chatmate
Discover the ultimate fusion of modern web development and cutting-edge AI with our MERN stack app. Harness the elegance of React to create breathtaking UI/UX on the front end, seamlessly integrated with the power of OpenAI's API to supercharge your backend functionality. Experience the perfect blend of innovation and sophistication.
https://github.com/shreygrg03/chatmate
chatbot mern-stack openai typescript
Last synced: 2 months ago
JSON representation
Discover the ultimate fusion of modern web development and cutting-edge AI with our MERN stack app. Harness the elegance of React to create breathtaking UI/UX on the front end, seamlessly integrated with the power of OpenAI's API to supercharge your backend functionality. Experience the perfect blend of innovation and sophistication.
- Host: GitHub
- URL: https://github.com/shreygrg03/chatmate
- Owner: ShreyGrg03
- Created: 2024-07-17T13:42:54.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-17T19:34:38.000Z (almost 2 years ago)
- Last Synced: 2025-04-11T03:04:15.523Z (about 1 year ago)
- Topics: chatbot, mern-stack, openai, typescript
- Language: TypeScript
- Homepage: https://chat-mate-ai.vercel.app
- Size: 13.3 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Chat Mate AI
## Overview
This project is a chat bot leveraging OpenAI's GPT-4.0 model, implemented
using React and TypeScript for the front end, Express for the backend, and MongoDB for data
storage and OpenAI API . The application provides users with an interactive interface to engage
in natural language conversations with the GPT-4.0 model.
## Features
- **Conversational Interface:** Users can have dynamic and natural language
conversations by inputting prompts or queries.
- **Backend Integration:** The Express backend manages communication with the
OpenAI API, handling requests and responses seamlessly.
- **Data Persistence:** MongoDB is employed for storing user data, including
prompts and model responses.
## Prerequisites
Before running the application, ensure you have the following installed:
- Node.js
- npm (Node Package Manager)
- MongoDB
## Setup
1. Clone the repository:
```
git clone https://github.com/ShreyGrg03/ChatMate
```
2. Navigate to the project directory:
cd Chat Mate Ai
3. Install dependencies for both the client and server:
```
# Install frontend dependencies
cd frontend
npm install
# Install backend dependencies
cd backend
npm install
```
4. Configure environment variables:
Create the `.env` file in the `backend` directory and add the following variables:
OPENAI_API_KEYSET=your_openai_api_key
MONGODB_URL=your_mongodb_uri
5. Start the application:
```
# Start the client (in the frontend directory)
cd frontend
npm run dev
# Start the server (in the backed directory)
cd backend
npm run dev
```
## Notes
- Make sure to replace `your_openai_api_key` and `your_mongodb_url` with your
actual OpenAI API key and MongoDB connection URI in the `.env` file.
## Website Screenshots
### Home Page
### Login Page
### SignUp Page
### Chat Page
