Getting Started

The LikeMinds React Chat SDK empowers you to integrate personalized and interactive chat functionality into your React application, providing seamless communication experiences for your users. This guide will assist you in getting started with the LikeMinds React Chat SDK and setting up a dynamic chatroom in your application. Simply obtain the required API key from the LikeMinds dashboard and unlock the power of real-time messaging in your app.

Prerequisites

Before you begin, make sure you have the following installed:

Node.js version 16 or above
ReactJS version 18.2.0
LikeMinds API Key: Sign up on the LikeMinds dashboard and obtain an API key for your application.

Step-by-Step Integration Guide

Follow these steps to integrate the LikeMinds Chat SDK into your web application:

Step 1 - Installation

Add the package as a dependency in package.json and run npm install

"dependencies": {
    "@likeminds.community/likeminds-chat-reactjs": "1.2.0",
    "@likeminds.community/chat-js": "1.11.0",
    "react-hot-toast": "2.4.1"
}

or you can run this command in the terminal

npm install @likeminds.community/likeminds-chat-reactjs @likeminds.community/chat-js react-hot-toast

tip

Should you encounter any version conflicts, consider running npm i --legacy-peer-deps to resolve them.

Step 2 - Setup LikeMinds Chat

Initiate lmChatClient in you index.tsx file.

import { initiateLMClient } from "@likeminds.community/chat-js";

const lmChatClient = initiateLMClient();

Step 3 - Render LikeMinds Chat

After you have successfully initaited the LMChatClient, now all you need to do is render LMClientOverlayProvider in your index.tsx file and pass down its instance as to client prop.

1. With API Key

This approach should be used when you want to manage LikeMinds authentication tokens on frontend. In this case you provide API Key directly to LikeMinds Chat SDK, which will be used to initiate a user session internally. In this case user authentication flow will be managed us.

Open up index.tsx or src/App.tsx and replace its contents with the following code:

import { BrowserRouter, Route, Routes } from "react-router-dom";

import { useState } from "react";

import {
  LMClientOverlayProvider,
  LMChannel,
  LMHeader,
  LMInput,
  LMParticipantList,
  LMCoreCallbacks,
  LMMessageList,
  initiateLMClient,
} from "@likeminds.community/chat-js";
import { Toaster } from "react-hot-toast";

// declaring route variables
const ROOT_PATH = "/";
const ID_PATH = ":id";
const MODE = ":mode";
const CHANNEL_PATH = "channel";
const DM_CHANNEL_PATH = "dm";
const PARTICIPANTS_PATH = "participants";
const PAGE_NOT_FOUND_PATH = "404";

function App() {
  const [userDetails, setUserDetails] = useState<{
    uuid?: string;
    username?: string;
    isGuest?: boolean;
    apiKey?: string;
  }>({
    apiKey: "ENTER YOUR API KEY",
    isGuest: false, // Turn this flag to true in case you have a guest user
    uuid: "ENTER YOUR USER UNIQUE ID",
    username: "ENTER YOUR USERNAME",
  });

  const lmChatClient = initiateLMClient();

  return (
    <BrowserRouter>
      <LMClientOverlayProvider client={lmChatClient} userDetails={userDetails}>
        // Optional for getting the notification
        <Toaster position="top-right" />
        <Routes>
          <Route path={ROOT_PATH} element={<LMChannel />}>
            <Route path={MODE + "/"} element={null} />
            <Route
              path={MODE + "/" + ID_PATH}
              element={
                <>
                  <LMHeader />
                  <LMMessageList />
                  <LMInput />
                </>
              }
            />
            <Route
              path={PARTICIPANTS_PATH + "/" + ID_PATH}
              element={<LMParticipantList />}
            />
          </Route>
        </Routes>
      </LMClientOverlayProvider>
    </BrowserRouter>
  );
}

export default App;

2. Without API Key

This approach should be used when you want to manage LikeMinds authentication tokens on your backend server. In this case you eliminate the need to expose your API Key in your client app and your backend server is responsible for calling the Initiate API to obtain the accessToken and refreshToken which will be passed to userDetails prop of LMClientOverlayProvider.

Create a function to get accessToken and refreshToken from your backend using Initiate API

function getTokens() {
  // Your implementation to fetch the LikeMinds authentication tokens
  // Also save these tokens in the initial state of the application as you will be required to pass these tokens to LMClientOverlayProvider.
}

Create an instance of LMCoreCallbacks and pass in the necessary callback functions.

info

LMCoreCallbacks takes two arguments:

onAccessTokenExpiredAndRefreshed(): This callback is triggered when the provided accessToken expires and is refreshed internally using the refreshToken.
onRefreshTokenExpired() This callback is triggered when the provided refreshToken expires. In this case, you need to provide a new accessToken and refreshToken from your backend server using our initiate API.

const lmCoreCallback = new LMCoreCallbacks(
  (accessToken: string, refreshToken: string) => {
    // Handle Access and Refresh token as per your implementation
  },
  async () => {
    // Get New Tokens and return it in the below format
    return {
      accessToken: "YOUR NEW ACCESS TOKEN",
      refreshToken: "YOUR NEW REFRESH TOKEN",
    };
  }
);

Open up src/App.js and replace its contents with the following code:

import { BrowserRouter, Route, Routes } from "react-router-dom";

import { useState } from "react";

import {
  LMClientOverlayProvider,
  LMChannel,
  LMHeader,
  LMInput,
  LMParticipantList,
  LMCoreCallbacks,
  LMMessageList,
  initiateLMClient,
} from "@likeminds.community/chat-js";
import { Toaster } from "react-hot-toast";

// declaring route variables
const ROOT_PATH = "/";
const ID_PATH = ":id";
const MODE = ":mode";
const CHANNEL_PATH = "channel";
const DM_CHANNEL_PATH = "dm";
const PARTICIPANTS_PATH = "participants";
const PAGE_NOT_FOUND_PATH = "404";

function App() {
  const [userDetails, setUserDetails] = useState<{
    accessToken?: string;
    refreshToken?: string;
  }>({
    accessToken: "ENTER YOUR ACCESS TOKEN",
    refreshToken: "ENTER YOUR REFRESH TOKEN",
  });
  const lmCoreCallback = new LMCoreCallbacks(
    (accessToken: string, refreshToken: string) => {
      // Handle Access and Refresh token as per your needs
    },
    async () => {
      // Get New Tokens and return it in the below format
      return {
        accessToken: "YOUR NEW ACCESS TOKEN",
        refreshToken: "YOUR NEW REFRESH TOKEN",
      };
    }
  );

  const lmChatClient = initiateLMClient();

  return (
    <BrowserRouter>
      <LMClientOverlayProvider
        client={lmChatClient}
        userDetails={userDetails}
        lmChatCoreCallbacks={lmCoreCallback}
      >
        // Optional for getting the notification
        <Toaster position="top-right" />
        <Routes>
          <Route path={ROOT_PATH} element={<LMChannel />}>
            <Route path={MODE + "/"} element={null} />
            <Route
              path={MODE + "/" + ID_PATH}
              element={
                <>
                  <LMHeader />
                  <LMMessageList />
                  <LMInput />
                </>
              }
            />
            <Route
              path={PARTICIPANTS_PATH + "/" + ID_PATH}
              element={<LMParticipantList />}
            />
          </Route>
        </Routes>
      </LMClientOverlayProvider>
    </BrowserRouter>
  );
}

export default App;

Step 4 - Run your application

npm run dev
# OR
npm start

Your chat app is ready to go live.

Prerequisites​

Step-by-Step Integration Guide​

Step 1 - Installation​

Step 2 - Setup LikeMinds Chat​

Step 3 - Render LikeMinds Chat​

1. With API Key​

2. Without API Key​

Step 4 - Run your application​