ChatGPT clone with React amd MUI

The UI is clone of ChatGPT and LLM model used is gemini-1.5-flash with the help of @google/generative-aisdk.

Getting Started

To get a local copy up and running, follow these simple steps:

1. Clone the repository:

   git clone https://github.com/Shoebtamboli/chatGPT-clone.git
   cd chatGPT-clone

2. Create a .env file in the root directory of the project and add the following environment variables:

   NODE_ENV=development
   PORT=5000
   MONGO_URI=mongodb://mongo:27017/mydatabase
   JWT_SECRET=your_jwt_secret
   API_KEY=YOUR_API_KEY
   GOOGLE_CLIENT_ID=YOUR_GOOGLE_CLIENT_ID
   GOOGLE_CLIENT_SECRET=YOUR_GOOGLE_CLIENT_SECRET
   SESSION_SECRET=your-secret-key
   FRONTEND_URI=http://localhost:3000
   BACKEND_URI=http://localhost:5000

3. Start the development environment:

   docker-compose up --build

   This command will build and start the containers defined in the docker-compose.yml file.

4. Once the containers are up and running, you can access:

   Frontend: http://localhost:3000 Backend: http://localhost:5000

5. To stop the development environment, run:

   docker-compose down

How to Get Google Client ID and Client Secret

To enable Google OAuth for your application, you need to obtain a Client ID and Client Secret from the Google Cloud Console. Follow these steps:

1. Go to the Google Cloud Console

   • Visit https://console.cloud.google.com/
   • Sign in with your Google account

2. Create a New Project (or select an existing one)

   • Click on the project dropdown at the top of the page
   • Select "New Project"
   • Give your project a name and click "Create"

3. Enable the Google+ API

   • In the left sidebar, click on "APIs & Services" > "Library"
   • Search for "Google+ API" and click on it
   • Click "Enable"

4. Configure the OAuth Consent Screen

   • In the left sidebar, click on "APIs & Services" > "OAuth consent screen"
   • Choose "External" as the user type (unless your application is for internal use only)
   • Fill in the required fields (App name, User support email, Developer contact information)
   • Add the necessary scopes (e.g., ./auth/userinfo.email, ./auth/userinfo.profile)
   • Add your authorized domains
   • Save and continue

5. Create OAuth Client ID

   • In the left sidebar, click on "APIs & Services" > "Credentials"
   • Click "Create Credentials" and select "OAuth client ID"
   • Choose "Web application" as the application type
   • Set a name for your OAuth 2.0 client
   • Add authorized JavaScript origins (e.g., http://localhost:3000 for development)
   • Add authorized redirect URIs (e.g., http://localhost:3000/auth/google/callback)
   • Click "Create"

6. Obtain Client ID and Client Secret

   • After creation, you'll see a modal with your Client ID and Client Secret
   • Copy these values and store them securely
   • You can always view these later in the Credentials section

7. Update Your .env File

   • Add your Client ID and Client Secret to your .env file:

     GOOGLE_CLIENT_ID=your_client_id_here
     GOOGLE_CLIENT_SECRET=your_client_secret_here
     

Important Notes

• Keep your Client Secret confidential. Never commit it to version control or share it publicly.
• For production, make sure to update the authorized origins and redirect URIs with your production URLs.
• Regularly rotate your Client Secret for enhanced security.

Additional Resources

• Google OAuth 2.0 for Web Server Applications
• Setting up OAuth 2.0
• For the API key
• Google AI SDK Documentation
• Gemini API Overview