Cool AI Chatbot

A reusable React + TypeScript chatbot widget with built-in personalities, adaptive themes, and a developer-friendly setup.

Perfect for websites that want a customizable AI assistant without building a chat interface from scratch.

Installation

npm install cool-ai-chatbot

Quick Start

import { ChatBot } from "cool-ai-chatbot";
import "cool-ai-chatbot/style.css";

function App() {
  return (
    <ChatBot
      endpoint="/api/chat"
      defaultOpen={false}
      position="bottom-right"
    />
  );
}

export default App;

How It Works

Visitor
   ↓
Cool AI Chatbot
   ↓
Your React Application
   ↓
Your Backend Endpoint
   ↓
Your AI Provider
   ↓
Response
   ↓
Visitor

Cool AI Chatbot provides the chat interface.

Your backend provides the AI response.

This design allows you to use any AI provider without changing the widget.

Features

• React + TypeScript support
• Floating chatbot widget
• Adaptive theme engine
• Manual theme selection
• Personality-based themes
• Built-in personalities
• Local chat storage
• Custom AI endpoint support
• Mobile-friendly design
• Included CSS styling

Included Personalities

Purple Wiz

A friendly and curious guide focused on learning, exploration, and encouragement.

ASL Tutor

Designed to support sign language learning and communication.

Tour Guide

A welcoming personality for information, navigation, and discovery.

Adaptive Theme Example

<ChatBot
  endpoint="/api/chat"
  source="adaptive"
/>

Manual Theme Example

<ChatBot
  endpoint="/api/chat"
  source="manual"
  manualThemeId="purple-wiz"
/>

Styling

import "cool-ai-chatbot/style.css";

Without this import, the chatbot will render without its intended styling.

Backend Setup

This package requires a backend endpoint.

Example:

<ChatBot endpoint="/api/chat" />

Your backend should:

1. Receive the user's message.
2. Send the message to your AI provider.
3. Return the AI response.
4. Keep API keys secure.

Environment Variables

Store AI credentials in your backend.

Examples:

OPENAI_API_KEY=your_key_here

# Or

GEMINI_API_KEY=your_key_here

# Or

ANTHROPIC_API_KEY=your_key_here

Never place API keys directly in React components or frontend code.

Example Backend (OpenAI)

This example uses OpenAI, but you may replace it with any AI provider.

import OpenAI from "openai";
import express from "express";

const app = express();

app.use(express.json());

const client = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

app.post("/api/chat", async (req, res) => {
  const { message } = req.body;

  const response = await client.responses.create({
    model: "gpt-5.5",
    input: message,
  });

  res.json({
    response: response.output_text,
  });
});

Example Response Format

Your endpoint should return:

{
  "response": "Hello! How can I help you today?"
}

As long as your backend returns this format, Cool AI Chatbot can work with virtually any AI provider.

Supported AI Providers

Examples include:

• OpenAI
• Google Gemini
• Anthropic Claude
• Ollama
• Azure OpenAI
• Local LLMs
• Custom AI services

Status

Current Version: 0.1.5

Cool AI Chatbot is actively under development.

Current focus areas include:

• Expanded personality system
• Localization support
• Additional themes
• Accessibility improvements
• Enhanced developer configuration

Future examples may include:

examples/
├── openai/
├── gemini/
├── claude/
└── ollama/

Breaking changes may occur during early releases as the package evolves.

License

MIT