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

To add the package as a dependency just run the command

npm install @likeminds.community/likeminds-chat-reactjs

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/likeminds-chat-reactjs";

const lmChatClient = initiateLMClient();

Step 3 - Render LikeMinds Chat

After you have successfully initiated 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 (Client-Side Authentication)

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.

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

import { useState } from "react";
import {
  LMClientOverlayProvider,
  LMChannel,
  initiateLMClient,
  LMChatCurrentMode,
} from "@likeminds.community/likeminds-chat-reactjs";

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 (
    <LMClientOverlayProvider client={lmChatClient} userDetails={userDetails}>
      <LMChannel currentMode={LMChatCurrentMode.GROUP_CHAT} />
    </LMClientOverlayProvider>
  );
}

export default App;

2. Without API Key (Server-Side Authentication)

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.

1. 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.
}

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

info

LMCoreCallbacks takes two arguments:

1. onAccessTokenExpiredAndRefreshed(): This callback is triggered when the provided accessToken expires and is refreshed internally using the refreshToken.
2. 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",
    };
  }
);

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

import { useState } from "react";
import {
  LMClientOverlayProvider,
  LMChannel,
  initiateLMClient,
  LMChatCurrentMode,
} from "@likeminds.community/likeminds-chat-reactjs";

function App() {
  const [userDetails, setUserDetails] = useState<{
    accessToken?: string; //Your Access Token
    refreshToken?: string; // Your Refresh Token
  }>({
    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 (
    <LMClientOverlayProvider client={lmChatClient} userDetails={userDetails}>
      <LMChannel currentMode={LMChatCurrentMode.GROUP_CHAT} />
    </LMClientOverlayProvider>
  );
}

export default App;

info

The prop currentMode lets you switch between, Group-Chat and Direct-Messaging Mode

Step 4 - Run your application

npm run dev
# OR
npm start

Your chat app is ready to go live.