Chatbot(ChatGPT) Clone -by --notALoop

This project is a solution to building a Chatbot clone using the ChatGPT API. This chatbot can answer questions, similar to OpenAI’s ChatGPT.

Table of contents

• overview
• project-description
• features
• links
• setup-and-installation
• usage
• technologies-used
• challenges-and-learnings
• future-enhancements
• resources
• contributors
• acknowledgments

Overview

The Chatbot Clone project is a collaborative effort to build an AI-powered chatbot using the ChatGPT API. This application allows users to interact with an AI by asking questions and receiving instant responses, similar to OpenAI’s ChatGPT. The chatbot is designed with a clean, user-friendly interface and supports real-time interaction across devices.

Key objectives of the project include:

• Seamlessly integrating the ChatGPT API for natural language processing.
• Ensuring a responsive design for both mobile and desktop devices.
• Managing conversation flow and maintaining context for improved user interaction.

This project highlights our team's ability to work with modern web technologies, API integration, and collaborative software development practices.

Project Description

The goal of this project is to create a chatbot that can answer user queries using the ChatGPT API. The chatbot is built with the following objectives:

• Ensure a responsive UI for all devices.
• Handle conversation history and context during the chat.
• Provide seamless interaction between the user and the ChatGPT API.

Features

• Ask any question and receive AI-generated responses.
• Responsive design to work well both on desktop and mobile.
• Clear chat functionality to start fresh conversations.

Links

• Project Repository: github repo
• Live Demo: hosted-link

Setup and Installation

To run this project locally, follow these steps:

1. Clone the repository:

   git clone [this repository](https://github.com/CollinsC1O/gptClone.git)
   cd gptClone
   

Usage

1. Open the app in your browser at http://localhost:3000.
2. Alternatively; copy the part of the index.html file and paste it in your browser.
3. Enter your query in the chat input box and hit send or press enter key.
4. The chatbot will respond using the ChatGPT API.
5. Or better still you can go to our project live link

Technologies Used

• Frontend: Javascript, HTML, CSS
• API: OpenAI ChatGPT API
• Styling: CSS
• Version Control: Git & GitHub
• Deployment: Netlify

Challenges and Learnings

During the development of this project, our team faced the following challenges:

• Ensuring the UI is responsive and adaptable to all devices.
• Understanding and integrating the ChatGPT API effectively.
• Managing asynchronous requests and handling API errors.
• Getting access to the api is not free it requires payment.

We learned how to work with external APIs, handle asynchronous data, and improve collaboration within a team.

Future Enhancements

• Implement user authentication for personalized conversations.
• Add a more advanced chat history and context management system.
• Improve the UI/UX for smoother user interactions.
• Conversation history retention.

Resources

• ChatGPT API Documentation
• w3schools
• Javascript.info
• freeCodeCamp
• MDN Web Docs

Contributors

1. Collins Chinonso Augustine
2. Emmanuel Akalo
3. Gift Emmanuel
4. Akanni Ajibola
5. Nwabueze Nzube John

Acknowledgments

We would like to thank the web3bridge for the wonderful learning opportunity. And a big thanks to OpenAI for providing the ChatGPT API and the open-source community for resources and documentation that helped in completing this project.