React Gemini AI Chat bot

React AI Chatbot is a React component package that allows developers to easily integrate a chatbot powered by Google's Gemini AI model into their client websites for help desk purposes, queries, and more.

Features

• Integration of Google's Gemini AI model for conversational interactions.
• Customizable chatbot appearance and behavior.
• Predefined training data structure for easy setup.
• Support for training prompts to guide AI model interactions.

Installation

Install react-ai-chatbot with npm

npm install react-gemini-ai-chatbot

Install react-ai-chatbot with yarn

yarn add react-gemini-ai-chatbot

Basic usage

Step 1: Generate API Key

Before using the React AI Chatbot component, you need to generate an API key from the(Google AI Studio). This API key will be used to authenticate requests to the Gemini AI model.

Step 2: Import ReactAiChatBot

To use the React AI Chatbot component, simply import it into your React application and pass the required props:

import React from "react";
import { ReactAiChatBot } from "react-gemini-ai-chatbot";

const MyChatbot = () => {
  const geminiApiKey = "YOUR_GEMINI_API_KEY";
  const trainingData = [{}]

  return (
    <ReactAiChatBot
      geminiApiKey={geminiApiKey}
      trainingData={trainingData}
      // Add other props as needed
    />
  );
};

export default MyChatbot;

Predefined Example

To help you get started quickly, the package includes a predefined example of a fitness club. However, it's essential to customize this data according to your specific requirements before deploying the chatbot in your application.

Props

The following props are available for customization:

| Prop | Description | | --------------- | ---------------------------------------------------------------------- | | geminiApiKey | API key for the Gemini AI service. | | style | Custom styles to be applied to the chatbot component. | | primaryColor | Primary color for the chatbot component. | | secondaryColor | Secondary color for the chatbot component. | | textColor | Text color for the chatbot component. | | backgroundColor | Background color for the chatbot component. | | width | Width of the chatbot component. | | height | Height of the chatbot component. | | geminiModel | Model name for the Gemini AI service. | | chatbotName | Name of the chatbot. | | chatBotImg | Image URL for the chatbot avatar. | | chatTitle | Title for the chat interface. | | trainingData | Training data for the chatbot. | | trainingPrompt | Prompt for the chatbot to use during training. | | loadingComp | Loading component displayed while the chatbot is processing a request. |

Training Data

The trainingData prop in the ReactAiChatBot component requires JSON-formatted data containing all the necessary information about your service, company, or any other relevant content. This data is crucial for training the AI model to understand and respond to user queries effectively.

[
  {
    "name": "Services",
    "subcategories": [
      {
        "name": "Overview",
        "details": [
          "Our fitness center name is 'Golds gym'",
          "State-of-the-art gym equipment",
          "Personalized training programs",
          "Group fitness classes",
          "Nutritional counseling"
        ]
      },
      {
        "name": "Prices",
        "details": [
          { "plan": "Basic Membership", "price": "$30/month" },
          { "plan": "Premium Membership", "price": "$50/month" },
          { "plan": "Personal Training Session", "price": "$50/hour" },
          { "plan": "Group Fitness Class", "price": "$10/class" }
        ]
      }
      // Add more subcategories as needed
    ]
  },
  {
    "name": "Location",
    "subcategories": [
      {
        "name": "Address",
        "details": "123 Fitness Street, City, Country"
      },
      {
        "name": "Map",
        "details": "https://maps.app.goo.gl/WcpDGC6NRXohbC6r7"
      }
    ]
  }
  // Add more categories as needed
]