Gemini Chatbot Code

Manish Tamang

Manish Tamang / June 11, 2024

4 min readNaN views

Gemini Chatbot Code Documentation

This documentation provides an overview of a React-based chatbot application using the Gemini Language Model API. The chatbot interface allows users to type questions and receive generated responses.

Quick Preview

Components and Functions


import { useState, useEffect } from "react";
import axios from "axios";
import ReactMarkdown from "react-markdown";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

  • useState and useEffect are React hooks for state management and side effects.
  • axios is used for making HTTP requests.
  • ReactMarkdown renders markdown content.
  • Input and Button are custom UI components.

State Variables

const [question, setQuestion] = useState("");
const [messages, setMessages] = useState([]);
const [generatingAnswer, setGeneratingAnswer] = useState(false);

  • question: Stores the current input question from the user.
  • messages: Keeps track of the chat messages between the user and the bot.
  • generatingAnswer: Indicates if the bot is currently generating an answer.

useEffect Hooks

Load Messages from Local Storage

useEffect(() => {
const savedMessages =
JSON.parse(localStorage.getItem("chatMessages")) || [];
}, []);

  • Loads previously saved messages from localStorage when the component mounts.

Save Messages to Local Storage

useEffect(() => {
localStorage.setItem("chatMessages", JSON.stringify(messages));
}, [messages]);

  • Saves messages to localStorage whenever the messages state changes.

How to get Gemini API key?

At first go to here

It will look like the below image:

Click on the Get an API Key as shown in the picture.

Then it will redirect you to another page as shown in below image:

Click on Create API key and copy the given api Key then Paste it in .env file (Remember to rename .env.example file as .env)


generateAnswer Function

async function generateAnswer(e) {
const newMessage = { sender: "user", text: question };
setMessages((prev) => [...prev, newMessage]);
try {
const response = await axios({
method: "post",
data: {
contents: [{ parts: [{ text: newMessage.text }] }],
const botMessage = {
sender: "bot",
setMessages((prev) => [...prev, botMessage]);
} catch (error) {
const errorMessage = {
sender: "bot",
text: "Sorry - Something went wrong. Please try again!",
setMessages((prev) => [...prev, errorMessage]);

  • Handles the submission of a user's question.
  • Prevents the default form submission behavior.
  • Adds the user's question to the messages state.
  • Sends the question to the Gemini API to get a response.
  • Adds the bot's response to the messages state.
  • Handles errors by logging them and displaying an error message.
  • Disables the generating answer state when done.

JSX Structure

Main Container

<div className="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">

  • Centers the chatbot vertically and horizontally on the screen with background color.

Chat Window

<div className="flex flex-col h-[90vh] max-w-md w-full bg-white dark:bg-gray-950 rounded-2xl shadow-lg overflow-hidden">

  • Creates a vertical layout with defined height and width, and applies styles for the chat window.


<header className="bg-gray-100 dark:bg-gray-900 px-4 py-3 flex items-center gap-3">
viewBox="0 0 256 256"
className="w-6 h-6"
<path d="M230.92 212c-15.23-26.33-38.7-45.21-66.09-54.16a72 72 0 1 0-73.66 0c-27.39 8.94-50.86 27.82-66.09 54.16a8 8 0 1 0 13.85 8c18.84-32.56 52.14-52 89.07-52s70.23 19.44 89.07 52a8 8 0 1 0 13.85-8ZM72 96a56 56 0 1 1 56 56 56.06 56.06 0 0 1-56-56Z"></path>
<div className="text-lg font-medium">Chatbot</div>

  • Displays the chatbot header with a title and icon.

*Message List

<div className="flex-1 overflow-y-auto p-4 space-y-4">
{, index) => (
<div key={index} className={`flex ${msg.sender === "user" ? "justify-end" : "justify-start"}`}>
<div className={`${msg.sender === "user" ? "bg-blue-500 text-white" : "bg-gray-100 dark:bg-gray-800"} px-4 py-3 rounded-2xl max-w-xs`}>

  • Displays the list of messages with conditional styling based on the sender (user or bot).
  • Uses ReactMarkdown to render message text.

Input Form

<form onSubmit={generateAnswer} className="flex items-center gap-2 p-4 bg-gray-100 dark:bg-gray-900">
placeholder="Type your message..."
className="flex-1 bg-transparent"
onChange={(e) => setQuestion(}

  • Handles user input and form submission.
  • Disables input and button while waiting for the bot's response.
  • Uses Input and Button components with styles and interactivity.


This React component creates a chatbot interface that saves chat history to local storage and interacts with the Gemini Language Model API to generate responses to user questions. The component is structured with a header, message list, and input form, and includes error handling and state management for a responsive user experience.

Repo Link : Github