react-nexbot

End-to-End RAG Implementation for React Applications

Table of Contents

• react-nexbot
  • End-to-End RAG Implementation for React Applications
  • Table of Contents
  • Getting Started
  • How to Use react-nexbot
    • Arguments
    • Return Value
      • sendMessage
      • MessageStream
    • Installation
    • Example Usage
    • Nexbot Authentication Endpoint
      • JavaScript
      • TypeScript
      • Invoking useChatStream
        • JavaScript
        • TypeScript
      • Sending a Message
        • JavaScript
        • TypeScript
    • Dependency Note

React-nexbot is the quickest, cheapest, and fastest way to embed Retrieval Augmented Generation (RAG) functionality into your React applications. Utilize our web app at NEXBot.io to create, prompt, and add documents to your bots. This NPM package enables you to access and chat with your NEXBots from your apps.

Getting Started

Begin by signing up or logging in with your preferred authentication provider at Sign Up / Login.

You can generate your server secret by going to the developers settings, accessible from your profile menu.

Pricing: Pay-as-you-go model. Charges are based only on compute and storage usage. New accounts receive unlimited bots, 500 messages, and 300 pages of storage.

How to Use react-nexbot

The package exports a single client-side React hook: useChatStream().

Arguments

Return Value

The hook returns a sendMessage function.

sendMessage

• Arguments:
  • message: string: The message your bot will respond to.
• Returns:
  • An RXJS Subject (RXJS Subject Documentation).

Subscribing to the subject and using next on the subscriber will retrieve the observer’s value.

MessageStream

• Type: Object
• Property: stream
• Description: Contains a string with the token streamed by the server on each pull.

Installation

npm install react-nexbot

import

import { useChatStream }  from "react-nexbot";

Example Usage

Nexbot Authentication Endpoint

For Nexbot authentication, your endpoint should call the Nexbot API as follows:

curl -X GET \
     -H "Authorization: Bearer YOUR_SERVER_SECRET" \
     "https://apis.nexbot.io/web/v1/secrets/generate_single_use_token"

JavaScript

fetch("https://apis.nexbot.io/web/v1/secrets/generate_single_use_token", {
  method: "GET",
  headers: {
    "Authorization": "Bearer YOUR_SERVER_SECRET"
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

TypeScript

const getSingleUseToken = async (): Promise<any> => {
  try {
    const response = await fetch("https://apis.nexbot.io/web/v1/secrets/generate_single_use_token", {
      method: "GET",
      headers: {
        "Authorization": "Bearer YOUR_SERVER_SECRET"
      }
    });
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return await response.json();
  } catch (error) {
    console.error('Error:', error);
  }
};

The response will contain a JSON payload with the key access_token. Your callback must provide only this string.

The callback is initially used by the hook to cache a single-use token, which opens a websocket connection with our servers and is immediately invalidated. The hook refreshes the token every 25 minutes using the callback. While the callback does not have to be an API call, using one allows Nexbot to handle token refresh for you.

Invoking useChatStream

JavaScript

const { sendMessage } = useChatStream(() => {
  return axios.get("https://your.api/nexbot/authing/endpoint")
    .then((res) => {
      return res.data.token;
    });
}, botId);

TypeScript

const botId: string = 'your-bot-id'; // Replace with your actual bot ID

const { sendMessage } = useChatStream(() => {
  return axios.get("https://your.api/nexbot/authing/endpoint")
    .then((res) => {
      return res.data.token as string;
    });
}, botId);

Sending a Message

JavaScript

const onClick = () => {
  setWillStream(true);
}
const [text, setText] = useState("");
useEffect(() => {
  if (willStream) {
    setText("");
    const newObservable = sendMessage("Hello!");
    newObservable.subscribe({
      next: (data) => {
        setText(prev => prev ? prev + data.stream : data.stream);
      },
      complete: () => {
        setWillStream(false);
      },
    });
  }
}, [willStream]);

TypeScript

 const [willStream, setWillStream] = useState<boolean>(false);
  const [text, setText] = useState<string>('');
  const { sendMessage } = useChatStream(/* arguments here */);

  useEffect(() => {
    if (willStream) {
      setText('');
      const newObservable: Observable<any> = sendMessage('Hello!');
      newObservable.subscribe({
        next: (data) => {
          setText((prev: string) => prev ? `${prev}${data.stream}` : data.stream);
        },
        complete: () => {
          setWillStream(false);
        },
      });
    }
  }, [willStream, sendMessage]);

  const onClick = (): void => {
    setWillStream(true);
  };

Dependency Note

React-nexbot uses useQuery as a dependency. Ensure to wrap your component hierarchy with useQueryClientProvider at your desired level if not already doing so.