https://github.com/fitri-hy/hy-gemini-ai-react
A simple Gemini AI Chatbot project using simple ReactJS
https://github.com/fitri-hy/hy-gemini-ai-react
chatbot-gemini gemini geminiai react-gemini react-gpt
Last synced: about 20 hours ago
JSON representation
A simple Gemini AI Chatbot project using simple ReactJS
- Host: GitHub
- URL: https://github.com/fitri-hy/hy-gemini-ai-react
- Owner: fitri-hy
- Created: 2024-03-12T04:39:35.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-14T00:27:53.000Z (over 1 year ago)
- Last Synced: 2025-01-19T23:37:29.833Z (9 months ago)
- Topics: chatbot-gemini, gemini, geminiai, react-gemini, react-gpt
- Language: JavaScript
- Homepage:
- Size: 257 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Modules Floating Chat GPT AI (Gemini) for React
ReactJS modules are simple but have many advantages, one of which is that you can customize them freely.
## NPM Installation
```sh
npm i hytech-component
npm i @google/generative-ai
npm i react-markdown
```
## Import Modules
```sh
import GeminiAI,{ ButtonGpt, CloseButtonGpt, FormInputGpt, MessageGpt } from "hytech-component/GeminiAI";
import Markdown from 'react-markdown';
```
## Setup Config
```sh
const apiKey = 'Your apiKey'; // Use your GeminiAI Api here
const command = 'You have to pretend to be a AI for HyTech Group';
const aiModel = 'gemini-pro';
const {
showBoxAI,
toggleBox,
loading,
response,
message,
setMessage,
handleSubmit,
} = GeminiAI(apiKey, command, aiModel);
```
## Implementation Component
```sh
AI
{showBoxAI && (
setMessage(e.target.value)} />
Ask
{loading ?
Loading ...
:
{String(response)}
}
)}
```
## Full Code App.js
```sh
import React from "react";
import GeminiAI,{ ButtonGpt, CloseButtonGpt, FormInputGpt, MessageGpt } from "hytech-component/GeminiAI";
import Markdown from 'react-markdown';
function App() {
const apiKey = 'Your apiKey'; // Use your GeminiAI Api here
const command = 'You have to pretend to be a AI for HyTech Group';
const aiModel = 'gemini-pro';
const {
showBoxAI,
toggleBox,
loading,
response,
message,
setMessage,
handleSubmit,
} = GeminiAI(apiKey, command, aiModel);
return (
AI
{showBoxAI && (
setMessage(e.target.value)}
/>
Ask
{loading ?
Loading ...
:
{String(response)}
}
)}
);
}
export default App;
```
## Get ApiKey
Go to : HERE
Official Site: HyTech Group