A modern, customizable React chatbot component that integrates with Google's Gemini AI API. This package provides a complete UI solution with voice input, emoji picker, file attachments, and markdown rendering capabilities.
- 🤖 Integration with Google Gemini AI API
- 💬 Modern chat interface with animations
- 🎨 Beautiful UI with gradient backgrounds
- 🎙️ Voice input support (speech-to-text)
- 📎 File attachment support
- 😊 Emoji picker integration
- ✏️ Markdown rendering for formatted messages
- 📱 Responsive design
- 🌙 Expandable/collapsible chat window
- ⏳ Loading indicators for AI responses
npm install react-gemini-chatbot
# or
yarn add react-gemini-chatbotNote: This might take longer it would be optimised in upcoming builds
- React 16.8+ (Hooks support)
- A Google Gemini API key
import {ChatBot} from "react-gemini-chatbot";
function App() {
return (
<main>
<ChatBot apiKey={"--gemini api key--"} prompt={"hello gemini ai"} />
</main>
)
}
export default App;To get started with Google Gemini API, you'll need to generate an API key. Follow the steps below to create the key and secure it for your project.
To generate a Google Gemini API key, follow the official guide from Merge Dev. You can access the instructions here: Google Gemini API Key Documentation.
This documentation will walk you through the process of creating and managing your API key.
- After copying the API key, you can click Restrict Key to limit its usage.
- You can restrict the API key to specific IP addresses, referrers, or HTTP methods to secure your API key further.
Make sure you have the required dependencies installed in your project.
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
apiKey |
string | "" |
Yes | Your Google Gemini API key. |
prompt |
string | "" |
Yes | System prompt to define the chatbot's behavior. |
model |
string | gemini-1.5-flash |
No | Gemini model to use (e.g., "gemini-1.5-flash"). |
TitleOfChatBot |
string | "ChatBot" |
No | Display name for the chatbot. |
temperature |
number | 0.7 |
No | Controls the randomness of the responses (0.0-1.0). |
useContext |
boolean | false |
No | Whether to maintain conversation context. |
apiMaxOutputTokens |
number | 2048 |
No | Maximum tokens allowed in the API response. |
chatOpen |
boolean | true |
No | Controls the visibility of the chat window (open or closed). |
imageUrl |
string | "https://img.freepik.com/free-vector/chatbot-chat-message-vectorart_78370-4104.jpg?ga=GA1.1.1236369542.1738934698&semt=ais_hybrid" |
No | URL for the chatbot's avatar image. |
textPosition |
string | false |
No | By default, the user’s text is displayed on the right side. To change the alignment of the user's text to the left side and ai response to right, pass true |
Header |
string | "ChatOrbit" |
No | To display your own chatbot Header, pass a value as a string. |
headerDescription |
string | "Ready to help" |
No | To display your own header description for the chatbot, pass a value as a string. |
titleOfChatBot |
string | "👋 Welcome to ChatOrbit" |
No | To display your own Title of the chatbot, pass a value as a string. |
descriptionOfChatbot |
string | "Start a conversation by typing a message below" |
No | To display your own description of the chatbot, pass a value as a string. |
themeColor |
string | "purple" |
No | To set your own color theme for the chatbot, pass a color name or hex code as a string (e.g., "red", "#FF5733"). |
backGroundImage |
string | "https://img.freepik.com/free-vector/light-grey-dots-background_78370-2583.jpg?ga=GA1.1.1236369542.1738934698&semt=ais_hybrid" |
No | To set your own background image, pass the image URL or path as a string (e.g., "https://placehold.co/600x400"). |
APIStoreResponseDataEndpoint |
string | "" |
No | Add your endpoint url of backend to store every converstion of chatbot in database(eg, https://localhost:5173/route). |
APIAccessToken |
string | "" |
No | In your endpoint url of backend is there any authorization then you can share your bearertoken. |
APIHttpMethod |
string | "POST" |
No | Configure the HTTP method to use for the API request. Options: "POST", "PUT", or "GET". The default method is "POST". |
enableLeadform |
boolean | "false" |
No | Set to true to enable the LeadForm so users can fill it. If false, the form is disabled. |
leadForm |
JSON | {} |
No | The configuration object for the lead form fields. You can customize this object to add/remove fields and define their properties. If not provided, default fields (name, email, phone number, and company name) will be used. |
-
APIStoreResponseDataEndpoint: This is the URL of the backend where the chatbot conversation should be stored. The URL should point to an API route that can accept aPOST,PUT, orGETrequest. If your backend requires authorization, you can provide theAPIAccessTokento authenticate the request. -
APIAccessToken: If your backend requires authentication, this parameter will store the Bearer token that should be included in the request's authorization header. This is optional and should only be set if your API requires it. -
APIHttpMethod: This variable specifies the HTTP method used for the request. It can be set to:"POST": Sends the data as JSON in the request body (default method)."PUT": Sends the data as JSON in the request body."GET": Sends the data as query parameters in the URL.
The LeadForm feature allows you to create a customizable form that can be displayed on your website. The form can include various fields, and you can configure it to submit data to a specified API endpoint.
- Type:
boolean - Default Value:
"false" - Required: No
- Description:
- Set this to
trueto enable the LeadForm so users can fill it out. - Set this to
falseto disable the form.
- Set this to
- Type:
JSON - Required: No
- Description:
- The
leadFormobject contains the fields and configurations for the form. - If you do not provide any
leadForm, the form will default to the name, email, phone number, and company name fields. - You can customize the form by adding or removing fields in the
fieldsarray.
- The
const leadForm = {
"enableFormAt": 3, // optional
"fields": [ // optional
{
"title": "Company Name",
"placeholder": "Enter your Company Name",
"type": "text",
"validationMessage": "Please enter a valid company name",
"required": false
},
{
"title": "Country of Operation",
"placeholder": "Select your Country",
"type": "dropdown",
"inputOptions": ["USA", "Canada", "UK", "Australia", "India"],
"validationMessage": "Please select a country",
"required": false
},
{
"title": "Select Gender",
"placeholder": "",
"type": "radio",
"inputOptions": ["Male", "Female", "other"],
"validationMessage": "Please select your gender",
"required": true
},
{
"title": "Select your interest",
"placeholder": "",
"type": "checkbox",
"inputOptions": ["Coding", "music","travel", "other"],
"validationMessage": "Please select your gender",
"required": true
},
],
"submitApiEndPoint": "http://localhost:3000/data",// optional
"submitApiAccessToken": "njenjkfje", // optional
"submitApiHttpMethod": "PUT" // optional
};
The chatbot integrates speech recognition for voice-to-text input:
- Click the microphone icon to start recording
- Speak your message
- Click the microphone icon again to stop recording
Users can attach files to their messages:
- Click the attachment icon
- Select a file from their device
- The file send by the user get the correct response based on your model you are using
- Files are sent as base64-encoded data to the API
- Although the gemini-1.5-flash model is intended to support images, users may face issues with image processing. If you're uploading an image, be prepared for potential errors. For PDFs, the model works as expected without issues.
- PDFs: Works flawlessly. The model can extract and analyze text, metadata, and other content from PDF files.
- Images: Currently, images may result in an error when uploaded due to limitations in the model. While the gemini-1.5-flash model is intended to handle images, users may encounter issues with image uploads.
The chatbot includes an emoji picker:
- Click the emoji icon to open the picker
- Select an emoji to insert it into the message
The chatbot renders messages with Markdown support:
- Format text with bold, italic, lists, etc.
- API responses can include formatted text
- Code blocks are properly displayed with syntax highlighting
The component uses MUI (Material-UI) and Emotion for styling with:
- Smooth animations for messages and UI elements
- Gradient backgrounds
- Customizable avatars
- Responsive design for all screen sizes
The package relies on the following dependencies:
- React
- Material-UI (MUI)
- Emotion (for styled components)
- emoji-picker-react
- react-markdown
This package is not production-ready yet. The current implementation exposes your Google Gemini API key in the frontend, which is not secure for production environments. Please do not use this in production unless the key is properly secured (e.g., through a proxy or server-side authentication).
In the current version, the API key is passed directly to the frontend, which makes it vulnerable to misuse. A secure solution will be implemented in future versions.
The voice input feature uses the Web Speech API, which may not be supported in all browsers. The component gracefully handles this by disabling the feature when not supported. For a comprehensive list of supported browsers and versions, visit the following link:
MIT
Contributions are welcome! Please feel free to submit a Pull Request.