ai-crw/README.md

ai Chat Widget is a lightweight, customizable React component that adds an AI-powered chat bubble to your website. It seamlessly integrates with OpenRouter to enable real-time conversations powered by leading LLMs like GPT-4 and Claude.

# ai-crw: AI Chat Widget for React

**ai-crw** is a lightweight, customizable React component that adds an AI-powered chat bubble to your website. It integrates with [OpenRouter](https://openrouter.ai) and supports top models. The widget is designed to be plug-and-play and can adapt to RTL or LTR text directions.

---

## ✨ Features

- ⚡ Real-time AI chat powered by OpenRouter
- 🎨 Easily styled to match your site
- 🧠 Supports context and business information
- 🌍 Built-in RTL/LTR support
- 📱 Fully responsive on mobile and desktop
- 🔌 Minimal configuration, easy integration

---

## 📦 Installation

```bash
npm install ai-crw
```

---

## 🚀 Usage

```tsx
import React from 'react';
import PopChat from 'ai-crw';

function App() {
  return (
    <PopChat
      chatHeadline="Need help choosing?"
      contextData={{ page: 'pricing' }}
      businessInfo="We sell high-quality budget planners that help busy moms take control of their finances."
      aiCharacter={`You are a persuasive, friendly sales assistant embedded on a website. Your goal is to help users understand the benefits of the product and encourage them to make a purchase.`}
      direction="rtl" // or "ltr"
    />
  );
}

export default App;
```

---

## 🔧 Props

<table>
  <thead>
    <tr>
      <th>Prop</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>contextData</code></td>
      <td><code>any</code></td>
      <td>Optional object with dynamic context</td>
      <td><code>undefined</code></td>
    </tr>
    <tr>
      <td><code>businessInfo</code></td>
      <td><code>string</code></td>
      <td>Business description to improve AI relevance</td>
      <td><code>undefined</code></td>
    </tr>
    <tr>
      <td><code>chatHeadline</code></td>
      <td><code>string</code></td>
      <td>Header text inside the chat window</td>
      <td><code>"Chat with me"</code></td>
    </tr>
    <tr>
      <td><code>aiCharacter</code></td>
      <td><code>string</code></td>
      <td>Custom AI persona or prompt (sales, support, etc)</td>
      <td><code>"Provide immediate, helpful responses"</code></td>
    </tr>
    <tr>
      <td><code>direction</code></td>
      <td><code>'ltr' | 'rtl'</code></td>
      <td>Text direction for internationalization</td>
      <td><code>"ltr"</code></td>
    </tr>
  </tbody>
</table>

---

## 📐 Styling

The widget includes a basic design, but you can override any styles via CSS. The default stylesheet is imported automatically:

```ts
import 'ai-crw/dist/index.css';
```

You may also create a local override or use `!important` where needed to align it with your site's design system.

---

## 🧠 How AI Works

This widget sends the conversation history, business info, and context to OpenRouter API using LLaMA 4 Maverick.

You can modify the AI’s behavior with the `aiCharacter` prop using a system prompt tailored for sales, support, education, etc.

---

## 🛠 Development

To contribute or customize:

```bash
git clone https://github.com/NimrodScH/ai-chat.git
cd ai-chat
npm install
npm run dev
```

---

## 📄 License

MIT License © 2025 NimrodSch