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 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

npm install ai-crw

🚀 Usage

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

📐 Styling

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

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:

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

📄 License

MIT License © 2025 NimrodSch