AI Chatbot React

A modern, customizable feature-rich AI chatbot component for React applications with voice input, file upload, and Gemini AI integration.

Features

• 🤖 AI Integration: Powered by Google Gemini AI
• 🎤 Voice Input: Real-time voice recording and transcription
• 📁 File Upload: Support for document and image uploads
• 📱 Responsive Design: Works seamlessly on all devices
• 🎨 Customizable: Highly customizable with Tailwind CSS
• 📊 Analytics: Built-in analytics and conversation tracking
• 🔄 Real-time: Live typing indicators and smooth animations
• 📝 Markdown Support: Rich text formatting with markdown
• 🎯 TypeScript: Fully typed for better development experience

Installation

npm install ai-chatbot-react
# or
yarn add ai-chatbot-react
# or
pnpm add ai-chatbot-react

Quick Start

1. Set up your Gemini AI API key

Get your API key from Google AI Studio and add it to your environment variables:

NEXT_PUBLIC_GEMINI_API_KEY=your_api_key_here

2. Import and use the chatbot

import { Chatbot, ChatbotProvider } from 'ai-chatbot-react';
import 'ai-chatbot-react/styles';

function App() {
  return (
    <ChatbotProvider>
      <div className="min-h-screen bg-gray-50">
        <Chatbot 
          apiKey={process.env.NEXT_PUBLIC_GEMINI_API_KEY}
          config={{
            title: "AI Assistant",
            placeholder: "Ask me anything...",
            welcomeMessage: "Hello! How can I help you today?"
          }}
        />
      </div>
    </ChatbotProvider>
  );
}

export default App;

Next.js Integration

This package is fully compatible with Next.js projects. Here's how to set it up:

1. Install dependencies

npm install ai-chatbot-react

2. Configure Tailwind CSS (if not already configured)

Add the package's styles to your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/ai-chatbot-react/dist/**/*.js'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Import styles

In your main layout or page:

import 'ai-chatbot-react/styles';

4. Use the chatbot

'use client';

import { Chatbot, ChatbotProvider } from 'ai-chatbot-react';

export default function HomePage() {
  return (
    <ChatbotProvider>
      <Chatbot 
        apiKey={process.env.NEXT_PUBLIC_GEMINI_API_KEY}
        config={{
          title: "My AI Assistant",
          placeholder: "Type your message...",
          welcomeMessage: "Hi! I'm here to help."
        }}
      />
    </ChatbotProvider>
  );
}

Advanced Usage

Custom Configuration

import { Chatbot } from 'ai-chatbot-react';

const customConfig = {
  title: "Custom AI Assistant",
  placeholder: "Ask me anything...",
  welcomeMessage: "Welcome! How can I assist you?",
  theme: {
    primary: "#3B82F6",
    secondary: "#1F2937",
    background: "#FFFFFF",
    text: "#1F2937"
  },
  features: {
    voiceInput: true,
    fileUpload: true,
    analytics: true,
    markdown: true
  }
};

<Chatbot apiKey={apiKey} config={customConfig} />

Using Individual Components

import { 
  ChatbotButton, 
  ChatbotWindow, 
  ChatbotMessages,
  useChatbotStore 
} from 'ai-chatbot-react';

function CustomChatbot() {
  const { isOpen, toggleOpen } = useChatbotStore();

  return (
    <div>
      <ChatbotButton onClick={toggleOpen} />
      {isOpen && (
        <ChatbotWindow>
          <ChatbotMessages />
        </ChatbotWindow>
      )}
    </div>
  );
}

API Reference

Chatbot Component

| Prop | Type | Required | Description | |------|------|----------|-------------| | apiKey | string | Yes | Your Gemini AI API key | | config | ChatbotConfig | No | Configuration object |

ChatbotConfig

interface ChatbotConfig {
  title?: string;
  placeholder?: string;
  welcomeMessage?: string;
  theme?: {
    primary?: string;
    secondary?: string;
    background?: string;
    text?: string;
  };
  features?: {
    voiceInput?: boolean;
    fileUpload?: boolean;
    analytics?: boolean;
    markdown?: boolean;
  };
}

Browser Support

• Chrome 88+
• Firefox 85+
• Safari 14+
• Edge 88+

License

MIT License - see the LICENSE file for details.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

If you encounter any issues or have questions, please open an issue on GitHub.