🤖 AI Chatbot

A drop-in React chat widget powered by AI. Styled with Tailwind CSS, animated with Framer Motion, and renders assistant replies as Markdown. No API key required — the AI connection is handled for you.

✨ Features

• 💬 Floating chat bubble with smooth open / close animation
• 📝 Markdown rendering for assistant messages
• 🌐 RTL / LTR support via a single prop
• 💾 Optional localStorage persistence
• 🎨 Customizable title, brand color, welcome text, and system prompt
• 🏢 Pass structured business info so the AI stays grounded
• 🔒 API key stays server-side — never exposed in the browser

📦 Installation

npm install @benbassatido/ai-chatbot

Peer dependencies

React 18 or 19 must be installed in your project:

npm install react react-dom

🚀 Quick start

import { Chatbot } from "@benbassatido/ai-chatbot";
import "@benbassatido/ai-chatbot/style.css";

function App() {
  return (
    <Chatbot
      title="Support"
      brandColor="#1d4ed8"
      welcomeMessage="Hi! How can I help?"
      systemPrompt="You are a helpful support assistant."
      direction="ltr"
      businessInfo={{
        companyName: "Acme",
        supportEmail: "[email protected]",
      }}
    />
  );
}

🎨 Styling requirements

The widget uses Tailwind CSS utility classes and Google Material Symbols. Your host page must include them for the UI to render correctly.

Tailwind CSS

Add the Tailwind CDN (quick) or install Tailwind in your project (recommended for production):

<script src="https://cdn.tailwindcss.com"></script>

Then extend your Tailwind theme with the colors the widget expects:

tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: "#004ac6",
        "primary-container": "#2563eb",
        surface: "#f8f9fa",
        "surface-container-lowest": "#ffffff",
        "surface-container-high": "#e8eaed",
        "on-surface": "#191c1d",
        "on-primary": "#ffffff",
        "outline-variant": "#c3c6d7",
        error: "#dc2626",
      },
    },
  },
};

Fonts

<!-- Inter -->
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
  rel="stylesheet"
/>

<!-- Material Symbols Outlined -->
<link
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&display=swap"
  rel="stylesheet"
/>

🎛️ Props

| Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | title | string | — | Header text displayed in the chat window | | brandColor | string | — | CSS color for the header background | | welcomeMessage | string | — | First message shown by the assistant | | systemPrompt | string | built-in | System prompt sent to the AI model | | businessInfo | object | — | Arbitrary business data injected into the system prompt | | direction | "ltr" \| "rtl" | "ltr" | Text direction | | storageMode | "localStorage" \| "controlled" | "localStorage" | How messages are persisted | | storageKey | string | "chatbot_messages" | localStorage key when storageMode is "localStorage" | | messages | array | — | Controlled messages array (used with storageMode="controlled") | | onMessagesChange | function | — | Callback when messages update in controlled mode |

🧱 Tech stack

| Layer | Choice | | ----- | ------ | | UI | React 19, CSS Modules, Tailwind CSS | | Motion | Framer Motion | | Markdown | react-markdown | | HTTP | axios | | AI API | OpenRouter (via backend proxy) | | Tooling | Vite 8, ESLint 9 |

📄 License

MIT

🙏 Acknowledgments

• OpenRouter for the AI API
• Vite for the build tooling
• Framer Motion for animations