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"
      welcomeMessage="How can I help you?"
    />
  )
}

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.

Features

• Multiple Sessions: Create and manage multiple chat sessions.
• Persistence: Sessions are saved locally.
• Product Cards: Supports rendering product recommendations (e.g. items payload).
• History Fetching: Automatically loads chat history for active sessions.

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 'ai-chat-widget-react'

Peer Dependencies

This library requires the following peer dependencies:

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

License

ISC