https://github.com/prithvikings/ginni
This project is an AI chatbot built with React.js, utilizing the Gemini API for generating responses. The chatbot is designed to provide interactive and intelligent conversations with users.
https://github.com/prithvikings/ginni
ai chatbot gemini-api react-components react-hooks react-router reactjs vercel-deployment
Last synced: 3 months ago
JSON representation
This project is an AI chatbot built with React.js, utilizing the Gemini API for generating responses. The chatbot is designed to provide interactive and intelligent conversations with users.
- Host: GitHub
- URL: https://github.com/prithvikings/ginni
- Owner: prithvikings
- Created: 2024-08-01T17:57:31.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-06-13T17:50:21.000Z (about 1 year ago)
- Last Synced: 2025-06-13T18:44:01.461Z (about 1 year ago)
- Topics: ai, chatbot, gemini-api, react-components, react-hooks, react-router, reactjs, vercel-deployment
- Language: JavaScript
- Homepage: https://ginni-plum.vercel.app
- Size: 107 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Ginni: Your Personal Ai ChatBot
# AI Chatbot using React.js and Gemini API
This project is an AI chatbot built with React.js, utilizing the Gemini API for generating responses. The chatbot is designed to provide interactive and intelligent conversations with users.
## Table of Contents
- [Features](#features)
- [Demo](#demo)
- [Installation](#installation)
- [Usage](#usage)
- [Folder Structure](#folder-structure)
- [Contributing](#contributing)
- [License](#license)
- [Acknowledgements](#acknowledgements)
## Features
- Real-time chat interface
- AI-generated responses using the Gemini API
- User-friendly design
- Recent prompts history
- Extendable and customizable
## Demo
https://ginni-o12dwxgcn-prithvikings-projects.vercel.app/
## Installation
To get a local copy up and running, follow these steps:
1. **Clone the repository:**
```bash
git clone https://github.com/prithvikings/ginni.git
cd ginni
```
2. **Install dependencies:**
```bash
npm install
```
3. **Create a `.env` file:**
Create a `.env` file in the root directory of your project and add your Gemini API key:
```plaintext
REACT_APP_GEMINI_API_KEY=your_api_key_here
```
4. **Start the development server:**
```bash
npm start
```
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
## Usage
1. **Interact with the Chatbot:**
- Open the application in your browser.
- Start a new chat session and interact with the chatbot.
- View recent prompts and responses.
2. **Customizing the Chatbot:**
- Modify the components in the `src/components` directory to customize the chatbot's appearance and behavior.
- Update the context and API calls in the `src/context` directory to change how the chatbot interacts with the Gemini API.
## Folder Structure
Here's an overview of the main project structure:
```plaintext
ai-chatbot-react/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ │ ├── Main/
│ │ ├── side/
│ │ └── ...
│ ├── context/
│ │ ├── context.jsx
│ ├── config/
│ │ ├── ginni.js
│ ├── App.jsx
│ ├── index.css
│ ├── index.jsx
├── .env
├── package.json
├── README.md
└── ...