@ai-chat-bot/react-ai-chat-bot

An embeddable, customizable React AI Chatbot Widget component powered by AIHub360. Answer your visitors' questions 24/7 using content trained on your own website.

Prerequisites

Before adding the widget to your site you need a free AIHub360 account:

| Step | Where to go | |------|-------------| | 1. Create an account | https://aihub360.in | | 2. Enable your AI model | Dashboard → AI Models | | 3. Add your Website Url | Dashboard → Scraping Pages | | 4. Add your Widget Key | Dashboard → Widget Tokens | | 5. Increase API call quota (if needed) | Dashboard → Pricing Plan |

Installation

npm install @ai-chat-bot/react-ai-chat-bot
# or
yarn add @ai-chat-bot/react-ai-chat-bot
# or
pnpm add @ai-chat-bot/react-ai-chat-bot

Quick Start

import React from 'react';
import { ChatWidget } from '@ai-chat-bot/react-ai-chat-bot';

export default function App() {
  return (
    <ChatWidget
      widgetToken="YOUR_WIDGET_TOKEN"
      title="AI Assistant"
      greeting="Hello! How can I assist you today?"
      faqOptions={[
        'What services do you offer?',
        'How can I get started?',
      ]}
    />
  );
}

Get your widgetToken: Log in to your account at aihub360.in and generate a domain-locked token under Dashboard → Widget Tokens.

Common Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | widgetToken | string | '' | Required. Your public domain-restricted widget token. | | title | string | 'AIHub360' | Header title in the chat window. | | subtitle | string | 'AI Assistant Active' | Subtitle shown below the title. | | greeting | string | 'Greetings...' | Initial greeting message. | | faqOptions | string[] | [] | Quick-starter question chips. | | placeholder | string | 'Ask your question...' | Input placeholder text. | | position | 'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' | 'bottom-right' | Widget screen position. | | theme | ChatWidgetTheme | {} | Theme customization object (colors, dimensions, fonts). | | onOpenChange | (isOpen: boolean) => void | undefined | Callback fired when the widget opens or closes. | | onError | (error: any) => void | undefined | Callback fired on error. |

[!NOTE] Pricing Tier Note: Certain props and features (such as custom branding, advanced theme overrides, and AI model selection) may vary or require an active AIHub360 Pricing Plan (Free, Pro, or Enterprise).

Full Documentation

For the complete props reference, theme variables, callbacks, and step-by-step guides:
👉 Visit the AIHub360 Documentation (aihub360.in/docs)

License

MIT © AIHub360