https://github.com/basitjawad/geminiai
GeminiSDKUsage I created this project for learning purpose like how to integrate Google Gemini AI SDK.
https://github.com/basitjawad/geminiai
ai chatgpt expressjs gemini-api reactjs web
Last synced: 5 months ago
JSON representation
GeminiSDKUsage I created this project for learning purpose like how to integrate Google Gemini AI SDK.
- Host: GitHub
- URL: https://github.com/basitjawad/geminiai
- Owner: BasitJawad
- Created: 2025-02-15T09:21:58.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-15T11:11:46.000Z (over 1 year ago)
- Last Synced: 2025-05-25T01:43:57.300Z (about 1 year ago)
- Topics: ai, chatgpt, expressjs, gemini-api, reactjs, web
- Homepage: https://basitjawad.github.io/GeminiAI/
- Size: 34.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# GeminiAI
GeminiAI is a simple web application that interacts with Google's Generative AI to answer user questions. This project consists of a **backend** built with **Node.js and Express** and a **frontend** using **React.js and Material-UI**.
Link to Github Profile: Github
[](https://github.com/BasitJawad/GeminiAI/stargazers)
---
## 📌 Features
- **Ask AI-powered questions**
- **Styled with Material-UI**
- **Backend with Express.js**
- **Frontend with React.js**
- **Supports Markdown Formatting**
---
## 🛠️ Installation
### 1️⃣ Clone the Repository
```sh
$ git clone https://github.com/BasitJawad/GeminiSDKUsage
$ cd GeminiSDKUsage
```
### 2️⃣ Install Dependencies
#### Backend:
```sh
$ cd backend
$ npm install
```
#### Frontend:
```sh
$ cd frontend
$ npm install
```
---
## 🚀 Running the Application
### Start Backend Server:
```sh
$ cd backend
$ node index.js
```
### Start Frontend:
```sh
$ cd frontend
$ npm start
```
Your application will now be running locally.
---
## 📌 Backend Code (Express.js)
```javascript
const express = require('express');
const messageRoute = express.Router();
require("dotenv").config()
const { GoogleGenerativeAI } = require('@google/generative-ai');
const apiKey = process.env.TestKey1;
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',
};
messageRoute.use(express.json());
messageRoute.post('/api/Question', (req, res) => {
const { Question } = req.body;
const chatSession = model.startChat({ generationConfig, history: [] });
async function Datasend() {
try {
const result = await chatSession.sendMessage(Question + " Also write the question at the top too");
res.json({ response: result.response });
} catch (error) {
console.error('Error in Datasend:', error);
res.status(500).send('Error in processing the request');
}
}
Datasend();
});
module.exports = messageRoute;
```
---
## 📌 Frontend Code (React.js)
{% raw %}
```
import React, { useState } from 'react';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';
import axios from 'axios';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { SnackbarProvider, enqueueSnackbar } from 'notistack';
import Skeleton from '@mui/material/Skeleton';
import Box from '@mui/material/Box';
const App = () => {
const [Question, setQuestion] = useState('');
const [Output, setOutput] = useState('');
const [loading, setLoading] = useState(false);
const SendToBackend = (e) => {
e.preventDefault();
setOutput("");
setQuestion('');
setLoading(true);
axios
.post('/api/Question', { Question })
.then((res) => {
setOutput(res.data.response.candidates[0].content.parts[0].text);
setLoading(false);
})
.catch((err) => {
console.log(err.message);
setLoading(false);
});
};
return (
<>
setQuestion(e.target.value)}
InputProps={{ style: { color: 'white' } }}
InputLabelProps={{ style: { color: 'gray' } }}
/>
Submit
{Output && navigator.clipboard.writeText(Output)}>Copy}
{loading ? (
) : (
!inline ? (
{children}
) : (
{children}
)
}}
remarkPlugins={[[remarkGfm, { singleTilde: false }]]}
>
{Output}
)}
>
);
};
export default App;
```
---
{% endraw %}
## 🙌 Thanks for Reading!
Thank you for checking out GeminiAI! If you find this project helpful, feel free to ⭐ star the repository on GitHub. Contributions, feedback, and suggestions are always welcome!
🚀 Happy Coding! 🚀