npm package: @neurobot/sdk-react
Description: Lightweight embeddable React chatbot widget powered by NeuroBot
Author: NeuroBot Team
Latest version: 1.4.3

# NeuroBot SDK React

Lightweight embeddable React chatbot widget for your applications.

## Quick Start

### Installation

```bash
npm install @neurobot/sdk-react
```

### Setup with Provider

```jsx
import { NeuroBotProvider, NeuroBot } from '@neurobot/sdk-react';

export default function App() {
  return (
    <NeuroBotProvider
      publicKey="pk_live_your_public_key"   // Only required prop
    >
      <YourApp />
      <NeuroBot pipelineId="your-pipeline-id" />
    </NeuroBotProvider>
  );
}
```

### How It Works

**Client-side (Safe to expose):**
- `publicKey`: Public API key from NeuroBot Studio
- `pipelineId`: Pipeline identifier
- API URL is hardcoded in SDK

**Server-side (NeuroBot Backend - Keep secret):**
- `secretKey`: Never expose to frontend
- Validates requests using secret key
- Processes conversations using LLM models
- Applies pipeline customizations
- Returns AI-generated responses

### Get Your Credentials

1. **Pipeline ID**: Created in NeuroBot Studio when you create a pipeline
2. **Public Key**: Generated in Pipeline Settings → API Keys (safe for frontend)
3. **Secret Key**: Generated in Pipeline Settings → API Keys (backend only, never in frontend)

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `pipelineId` | string | ✅ | - | Your NeuroBot pipeline ID |
| `chatbotId` | string | - | - | Optional chatbot identifier |
| `title` | string | - | `'NeuroBot Assistant'` | Chat window title |
| `position` | string | - | `'bottom-right'` | Position: `'bottom-right'`, `'bottom-left'`, `'top-right'`, `'top-left'` |
| `config` | object | - | - | Styling configuration |
| `onMessageSent` | function | - | - | Callback when user sends message |
| `onMessageReceived` | function | - | - | Callback when bot responds |
| `useMock` | boolean | - | `false` | Use mock responses for testing without backend |

### Config Options

```jsx
config={{
  primaryColor: '#3b82f6',        // Main color
  accentColor: '#1e40af',        // Accent color
  backgroundColor: '#ffffff',    // Chat background
  textColor: '#1f2937',          // Text color
  borderRadius: '12px',          // Border radius
  fontSize: '14px'               // Font size
}}
```

## Backend Integration

Implement `/api/chat` endpoint:

```
POST /api/chat
{
  "pipelineId": "string",
  "message": "string",
  "context": { "pageUrl": "string", "pageTitle": "string" }
}

Response:
{ "response": "string" }
```

## Features

- ✨ Lightweight (~15KB gzipped)
- 🎨 Fully customizable
- 📱 Responsive design
- ♿ Accessible
- 📦 TypeScript support
- 🌙 Dark mode compatible

## Requirements

- **React** ^18.0.0
- **React-DOM** ^18.0.0

## Styling

The SDK comes with **scoped CSS** that is automatically injected into the page. No additional styling setup required. All styles use CSS variables for theming and are isolated with `.nb-` prefixes to prevent conflicts with your application's styles.

## Documentation

- [Integration Guide](./INTEGRATION.md) - Framework-specific examples
- [Mock Mode Guide](./MOCK_MODE.md) - Testing without a backend

## License

MIT