@courseecho/ai-widget-react

React component for AI chat widget - Production-ready AI assistance for your React app.

Overview

A production-ready React component with:

• React 16.8+ (hooks)
• Full TypeScript support
• Zero external dependencies
• 15KB minified
• Minimize on load
• Go offline mode
• Pre-chat form
• AI suggestions
• Booking integration

Installation

npm install @courseecho/ai-widget-react @courseecho/ai-core-sdk

Quick Start

import { AiChatWidget } from '@courseecho/ai-widget-react';

export default function App() {
  return (
    <AiChatWidget
      config={{
        apiKey: 'your-api-key',
        context: {
          pageType: 'course',
          entityId: 'course-123'
        }
      }}
    />
  );
}

v2.1+ Features

Minimize on Load

<AiChatWidget
  config={{
    apiKey: 'your-api-key',
    context: { pageType: 'course' },
    defaultMinimized: true
  }}
/>

Go Offline + Booking

<AiChatWidget
  config={{
    apiKey: 'your-api-key',
    context: { pageType: 'course' },
    goOfflineEnabled: true,
    limitExpiredConfig: {
      offlineForm: { title: 'Get in touch', submitEndpoint: '/api/contact' },
      booking: { title: 'Schedule', calendarUrl: 'https://calendly.com/...' }
    }
  }}
/>

Pre-Chat Form

<AiChatWidget
  config={{
    apiKey: 'your-api-key',
    context: { pageType: 'course' },
    preChatFormEnabled: true
  }}
/>

Examples

Course Page

import { useParams } from 'react-router-dom';
import { AiChatWidget } from '@courseecho/ai-widget-react';

export function CoursePage() {
  const { courseId } = useParams();
  return (
    <AiChatWidget
      config={{
        apiKey: process.env.REACT_APP_API_KEY,
        context: { pageType: 'course', entityId: courseId }
      }}
    />
  );
}

Dark Theme

<AiChatWidget
  config={{
    apiKey: 'your-api-key',
    context: { pageType: 'app' },
    theme: 'dark',
    defaultMinimized: true
  }}
/>

Authentication

API Key (Recommended):

<AiChatWidget config={{ apiKey: 'key', context: { pageType: 'general' } }} />

JWT Token:

<AiChatWidget config={{ context: { pageType: 'general' } }} jwtToken={user.token} />

Support

• Docs: https://courseecho.com/docs
• Issues: https://github.com/COURSEECHO/courseecho-ai-widget-sdk/issues
• Email: [email protected]

License

MIT 2026 CourseEcho