JSPM

Package Exports

ai-crw
ai-crw/package.json

Readme

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

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

📐 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

ai-crw