🤖 AI Chatbot

A drop-in React chat widget powered by OpenRouter. Styled with Tailwind CSS, animated with Framer Motion, and renders assistant replies as Markdown.

✨ 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

📦 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
      apiKey="your-openrouter-api-key"
      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"
/>

🔑 API key

Pass your OpenRouter API key via the apiKey prop:

<Chatbot apiKey="sk-or-v1-..." /* ...other props */ />

⚠️ Security note: The API key is sent from the browser and is visible to end users. For production, proxy requests through your own backend so the key stays server-side.

🎛️ Props

| Prop | Type | Default | Description | | ---- | ---- | ------- | ----------- | | apiKey | string | — | Required. Your OpenRouter API key | | 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 (chat/completions) | | Tooling | Vite 8, ESLint 9 |

📄 License

MIT

🙏 Acknowledgments

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