@nextrag/use-chatbot

A React hook for integrating RAG-powered chatbots into your applications.

Installation

npm install @nextrag/use-chatbot

Getting Started

1. Create an account at nextrag.dev
2. Create a new chatbot and get your:
   • Chatbot ID
   • Socket Server URL

Requirements

• React >=16.8.0 (Hooks support)
• Socket.io server running (for real-time communication)

Usage

import { useChatbot } from '@nextrag/use-chatbot';

function ChatComponent() {
  const {
    isConnected,
    messages,
    conversation,
    chatbot,
    sendMessage,
    isLoading,
    error
  } = useChatbot('your-chatbot-id', {
    apiUrl: 'https://your-socket-server-url'  // Get this from nextrag.dev
  });

  // Example of sending a message
  const handleSend = (text: string) => {
    sendMessage(text);
  };

  // Example of displaying messages
  return (
    <div>
      {chatbot && (
        <header>
          <h2>{chatbot.name}</h2>
          <p>{chatbot.description}</p>
        </header>
      )}
      
      {messages.map((msg) => (
        <div key={msg.id}>
          {msg.text}
        </div>
      ))}
      
      {isLoading && <div>Loading...</div>}
      {error && <div>Error: {error.message}</div>}
    </div>
  );
}

API Reference

useChatbot(chatbotId: string, config?: UseChatbotConfig)

Creates a connection to the chatbot server and manages the chat state.

Parameters

• chatbotId (string, required): The ID of the chatbot to connect to
• config (object):
  • apiUrl (string): Socket.io server URL from your nextrag.dev dashboard

Returns

Object containing:

• isConnected (boolean): Connection status to the socket server
• messages (Message[]): Array of chat messages
• conversation (Conversation | null): Current conversation details
• chatbot (Chatbot | null): Chatbot information (name, description, color)
• sendMessage (function): Function to send a new message
• isLoading (boolean): Loading state for message sending
• error (Error | null): Any error that occurred

Types

type Message = {
  conversation_id: string;
  created_at: string;
  id: string;
  text: string;
  type: "user" | "system" | "support";
};

type Conversation = {
  chatbot_id: string;
  chatbot_status: boolean;
  color: string | null;
  created_at: string;
  id: string;
  name: string | null;
  visitor_id: string;
};

type Chatbot = {
  name: string;
  description: string | null;
  color: string | null;
};

Features

• Real-time chat communication using Socket.io
• Persistent visitor ID across sessions
• Automatic reconnection handling
• Loading and error states
• TypeScript support
• Chatbot metadata (name, description, color)

License

ISC