Hi 👋, I'm Shayan Shah

A Passionate Frontend Developer from Pakistan

Gemini Chatbot Clone

A chatbot clone inspired by ChatGPT, built using React.js, CSS, JavaScript, and an API integration. The chatbot provides users with information in a conversational format, responding to various queries in real-time.

ScreenShot

Demo

• A live demo of the chatbot can be accessed here

Features

• Conversational Interface: Users can ask questions and receive real-time responses from the chatbot.
• Responsive design: The interface is optimized for both desktop and mobile devices.
• Natural Language Processing (NLP): Provides answers in a natural conversational flow.
• Customizable: Easily adaptable to provide specific information or services based on user queries.

Technologies

• React.js: Framework used to build the frontend interface of the chatbot.
• CSS: For designing and styling a clean, modern UI.
• JavaScript: Handles chatbot logic, API calls, and interactivity.
• API Integration: Provides real-time responses based on the user’s input.

Installation

Follow these steps to run the chatbot locally:

• Clone the repository:

https://github.com/shayanshahDeveloper/Gemini-Clone.git

Install dependencies:

$ cd Gemini Clone   
$ npm install
$ npm install @google/generative-ai

How to Get & Add the Gemini API Key

• Step 1: Go to Google and Search for: Gemini Api

  

• Step 2: Click on get Api key

• Step 3: Click on Create Api key

  

• Step 4: Copy the Key

  

• Step 5: Paste the APi key in gemini.js as Shown in Screen-Shot

  

Run the project:

npm run dev

The project will be hosted on: localhost:5173

API

The chatbot integrates with a backend API to process user queries and provide real-time responses. You can configure the API to respond with specific data or integrate with external sources of information.

• Example of an API call for retrieving chatbot responses:

import {
  GoogleGenerativeAI,
  HarmCategory,
  HarmBlockThreshold,
} from "@google/generative-ai";

const apiKey = "Enter Your API Key Here";
const genAI = new GoogleGenerativeAI(apiKey);

const model = genAI.getGenerativeModel({
  model: "gemini-1.5-flash",
});

const generationConfig = {
  temperature: 1,
  topP: 0.95,
  topK: 64,
  maxOutputTokens: 8192,
  responseMimeType: "text/plain",
};

async function run(prompt) {
  const chatSession = model.startChat({
    generationConfig,
    history: [],
  });

  const result = await chatSession.sendMessage(prompt);
  const response = result.response;
  return response.text();
}

export default run;

Contributing

If you'd like to contribute to this project, follow the steps below:

• Fork the repository.
• Create a new branch: git checkout -b feature-name
• Commit your changes: git commit -m 'Add new feature'
• Push your branch: git push origin feature-name
• Submit a pull request.

Connect with me: