NeuroBot SDK React

Lightweight embeddable React chatbot widget for your applications.

Quick Start

Installation

npm install @neurobot/sdk-react

Setup with Provider

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

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 - Framework-specific examples
• Mock Mode Guide - Testing without a backend

License

MIT