AI Chatbot Widget

A customizable AI chatbot widget built with Next.js and React that can be easily integrated into any web application.

Quick Setup

1. Clone and install dependencies: ```bash git clone cd ai-chatbot-widget npm install ```

2. Set up environment variables: ```bash cp .env.example .env.local ```

   Then edit .env.local and add your OpenAI API key: ```env OPENAI_API_KEY=your_openai_api_key_here ```

3. Run the development server: ```bash npm run dev ```

4. Open http://localhost:3000 to see the demo.

Features

• 🚀 Easy integration via npm or embed script
• 🎨 Fully customizable appearance
• 🤖 AI-powered responses using OpenAI
• 📱 Responsive design
• ♿ Accessible
• 🔧 TypeScript support

Installation

Method 1: NPM/PNPM Installation

```bash npm install @your-org/ai-chatbot-widget

or

pnpm add @your-org/ai-chatbot-widget ```

Usage in React/Next.js:

```tsx import { ChatbotWidget } from '@your-org/ai-chatbot-widget'

const config = { title: 'Support Chat', welcomeMessage: 'How can we help you today?', primaryColor: 'bg-blue-600', // API key should be set server-side via environment variable // Don't include apiKey in client-side config for security }

export default function App() { return ( ) } ```

Important: For security, always set your OpenAI API key as a server-side environment variable (OPENAI_API_KEY) rather than including it in client-side code.

Method 2: Embed Script

Add this to your HTML:

```html

```

Method 3: CDN

```html

```

Configuration

| Option | Type | Default | Description | |--------|------|---------|-------------| | title | string | 'Chat Support' | Widget header title | | welcomeMessage | string | 'Hello! How can I help you today?' | Initial bot message | | placeholder | string | 'Type your message...' | Input placeholder text | | primaryColor | string | 'bg-blue-600' | Primary color (Tailwind class or hex) | | apiKey | string | undefined | OpenAI API key | | model | string | 'gpt-3.5-turbo' | AI model to use | | maxTokens | number | 150 | Maximum response tokens | | temperature | number | 0.7 | AI response creativity (0-1) | | systemPrompt | string | Default support prompt | Custom system prompt |

Note: The apiKey should be set as an environment variable (OPENAI_API_KEY) on your server, not passed in the client-side configuration.

Environment Variables

Create a .env.local file in your project root:

```env

Required: OpenAI API Key (server-side only)

OPENAI_API_KEY=your_openai_api_key_here

Optional: Widget defaults (client-side)

NEXT_PUBLIC_WIDGET_TITLE=AI Assistant NEXT_PUBLIC_WIDGET_WELCOME_MESSAGE=Hello! How can I help you today? NEXT_PUBLIC_WIDGET_PRIMARY_COLOR=#3B82F6 ```

Development

```bash

Install dependencies

pnpm install

Run development server

pnpm dev

Build for production

pnpm build

Build widget for distribution

pnpm build:widget

Build embed script

pnpm build:embed

Build everything

pnpm build:all ```

Publishing

```bash

Build and publish to npm

pnpm build:all npm publish ```

License

MIT