AI Chat Widget for React

A beautiful AI chat widget for React applications with fixed bottom-right positioning.

Installation

1. Install Dependencies

npm install

2. Development

Start the development server:

npm run dev

3. Build

Build the library for production:

npm run build

4. Preview

Preview the production build:

npm run preview

Usage

Import the Widget

import { AIChatWidget } from 'x-decision-ai-library-react'
import 'x-decision-ai-library-react/dist/style.css'

function App() {
  return (
    <AIChatWidget
      apiEndpoint={env.CHAT_API_URL}
      apiKey={env.CHAT_API_KEY}
      title="AI Assistant"
      suggestions={[
        "I want your best products",
        "What is your return policy?",
        "How do I track my order?"
      ]}
    />
  )
}

Environment Setup

Create a .env file in your project root:

CHAT_API_KEY=your_api_key_here
CHAT_API_URL=http://localhost:8000

Note: For Vite projects, variables must strictly start with VITE_ to be exposed to the client.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | apiEndpoint | string | required | API endpoint for chat messages | | apiKey | string | - | API key for authentication | | title | string | "AI Assistant" | Chat widget title | | placeholder | string | "Type a message..." | Input placeholder text | | theme | "light" \| "dark" | "light" | Widget theme | | primaryColor | string | "#6366f1" | Primary color for styling | | suggestions | string[] | [] | Quick action prompts shown in welcome view | | className | string | - | Custom class name | | zIndex | number | 9999 | Z-index for the widget |

Features

• Multiple Sessions: Create and manage multiple chat sessions
• History View: Access recent chats via the document icon
• Welcome View: Shows greeting with customizable suggestions
• Persistence: Sessions are saved locally
• Product Cards: Supports rendering product recommendations

Available Exports

| Export | Description | | ---------------- | ------------------------------- | | AIChatWidget | Main chat widget component | | ChatProvider | Context provider for chat state | | useChatContext | Hook to access chat context |

Types

import type {
  AIChatWidgetProps,
  Message,
  ChatConfig,
  ChatContextValue,
} from 'x-decision-ai-library-react'

Peer Dependencies

| Package | Version | | ----------- | ------- | | react | ^18.0.0 | | react-dom | ^18.0.0 |

License

ISC