https://github.com/abhishek-sanwal/chatgpt_clone

A clone created to replicate the ui look and feel , functionalities of Open-AI chatgpt built using gemini apis.
https://github.com/abhishek-sanwal/chatgpt_clone

chatgpt-clone css-modules-react gemini-api generative-ai gpt-models javascript reactjs-es6

Last synced: 4 months ago
JSON representation

A clone created to replicate the ui look and feel , functionalities of Open-AI chatgpt built using gemini apis.

• Host: GitHub
• URL: https://github.com/abhishek-sanwal/chatgpt_clone
• Owner: abhishek-sanwal
• License: mit
• Created: 2024-11-04T11:18:55.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-11-16T17:28:57.000Z (over 1 year ago)
• Last Synced: 2025-10-30T14:50:31.013Z (7 months ago)
• Topics: chatgpt-clone, css-modules-react, gemini-api, generative-ai, gpt-models, javascript, reactjs-es6
• Language: JavaScript
• Homepage: https://abhishek-sanwal-chatgpt.netlify.app/
• Size: 5.38 MB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
 ChatGPT Clone 🚀🚀


---

### Idea🤔

- Original Idea was to built a platform where we can simultaneously prompt to multiple llm models.

- Especially **Gemini** and **GPT** and gather as much as information to solve our problem.

- But since gpt apis are less generous🥲 and not free to use even for devs I built this.

---

### Features😍

##### Contextual responses:

- Enhanced chatbot's responses by using the previous conversation to understand the context.

- This can improve the efficiency of llm to solve your problem.

##### Persistent Data Conversations:

- Conversations remains persisted across sessions.

- Users can visit their old conversations even in offline mode.

##### Real-Time Interactive chat:

- Enables low-latency, real-time chat conversions with large language models.

##### User Experience:

- Elevated user experience with syntax highlighting and typing effect.

- Automatic scrolling for generated content.

---

### Technologies🧑‍💻



- [![Google Gemini](https://img.shields.io/badge/Google%20Gemini-886FBF?logo=googlegemini&logoColor=fff)](#) ![ChatGPT](https://img.shields.io/badge/chatGPT-74aa9c?style=for-the-badge&logo=openai&logoColor=white)

- ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) [![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=000)](#)

- ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) ![Context-API](https://img.shields.io/badge/Context--Api-000000?style=for-the-badge&logo=react) ![React Router](https://img.shields.io/badge/React_Router-CA4245?style=for-the-badge&logo=react-router&logoColor=white)

- [![npm](https://img.shields.io/badge/npm-CB3837?logo=npm&logoColor=fff)](#) [![Visual Studio Code](https://custom-icon-badges.demolab.com/badge/Visual%20Studio%20Code-0078d7.svg?logo=vsc&logoColor=white)](#) [![Git](https://img.shields.io/badge/Git-F05032?logo=git&logoColor=fff)](#) [![Vite](https://img.shields.io/badge/Vite-646CFF?logo=vite&logoColor=fff)](#)



---

### Folder Structure🗂️

![Folder](/ss/Folder.png)

**apiKey.js**

![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)

#### [Get Your Api key now](https://ai.google.dev/gemini-api/docs/api-key)

```

const apiKey = "YOUR_GEMINI_API_KEY";

export default apiKey;

```

 

> Add your gemini api key inside gen-ai folder and rename the file as **apiKey.js**. Remember to export apiKey variable . You can also set it as your environment variable and then use it.

---

### Deployment [![Netlify](https://img.shields.io/badge/Netlify-%23000000.svg?logo=netlify&logoColor=#00C7B7)](#)

#### [Start your chatting session 🚀🚀](https://abhishek-sanwal-chatgpt.netlify.app/)

[![Website](https://img.shields.io/website-up-down-green-red/http/shields.io.svg)](https://shields.io/)

---

### Working Screenshots

![SS-1](/ss/ss-1.png)

![ss-2](/ss/ss-2.png)

![ss-3](/ss/ss-3.png)

---

#### Responsive View:

- ##### Iphone 14 pro View

![14-pro-1](/ss/14_Pro-1.png)

![14-pro-2](/ss/14-pro-2.png)

---

- ##### Pixel Pro view

![Pixel-pro-1](/ss/Pixel-7-pro-2.png)

![Pixel-pro-2](/ss/Pixel-7-pro.png)

---

- ##### Macbook 13 inch view

## ![](/ss/Desktop.png)

- ##### Macbook 15 inch view

## ![](/ss/Macbook-15inch.png)

---

### LightHouse Report

![ss-4](/ss/ss-4.png)

---

### Upcoming Features:

- Type-Safe version of code

- Support of Images and Audio

- Backend in Python for more features.

- Copy exact code or markdown rather than full response.

---