Skip to main content

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 - Adding Dependency​

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 your index.tsx file:

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

const lmChatClient = initiateLMClient();

Step 3 - Initiate User Session​

1. Client-Side Authentication​

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

  1. Open up index.tsx or src/App.tsx and replace its contents with the following code:
import { useEffect, useState } from "react";
import {
  LMClientOverlayProvider,
  LMChannel,
  initiateLMClient,
  LMChatTheme,
} from "@likeminds.community/likeminds-chat-reactjs";

function App() {
  const [userDetails, setUserDetails] = useState<{
    apiKey?: string;
    uuid?: string;
    username?: string;
  }>({
    apiKey: "Enter your API key",
    uuid: "Enter your UUID",
    username: "Enter your Username",
  });

  const lmChatClient = initiateLMClient();

  return (
    <LMClientOverlayProvider
      client={lmChatClient}
      userDetails={userDetails}
      // Here we have chosen Community Chat as the theme
      lmChatTheme={LMChatTheme.COMMUNITY_CHAT}
    >
      <LMChannel />
    </LMClientOverlayProvider>
  );
}

export default App;

2. 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. The backend server is responsible for calling the Initiate API to obtain the accessToken and refreshToken, which will then be passed to the userDetails prop of LMClientOverlayProvider.

  1. Create a function to get the accessToken and refreshToken from your backend using the Initiate API:
function getTokens() {
  // Your implementation to fetch the LikeMinds authentication tokens
  // Save these tokens in the initial state of the application as you'll be required to pass these tokens to LMClientOverlayProvider.
}
  1. 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. 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",
    };
  }
);
  1. Open up src/App.js and replace its contents with the following code:
import { useState } from "react";
import {
  LMClientOverlayProvider,
  LMChannel,
  initiateLMClient,
  LMChatTheme,
} 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 lmChatClient = initiateLMClient();

  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",
      };
    }
  );

  return (
    <LMClientOverlayProvider
      client={lmChatClient}
      userDetails={userDetails}
      lmChatTheme={LMChatTheme.COMMUNITY_CHAT}
      lmChatCoreCallbacks={lmCoreCallback}
    >
      <LMChannel />
    </LMClientOverlayProvider>
  );
}

export default App;

Step 4 - Navigate to Chat​

You can navigate to the chat by using the following themes:

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

function App() {
  const [userDetails, setUserDetails] = useState<{
    apiKey?: string;
    uuid?: string;
    username?: string;
  }>({
    apiKey: "ENTER YOUR API KEY",
    uuid: "ENTER YOUR UUID",
    username: "ENTER YOUR UUID",
  });

  const lmChatClient = initiateLMClient();

  return (
    <LMClientOverlayProvider
      client={lmChatClient}
      userDetails={userDetails}
      lmChatTheme={LMChatTheme.COMMUNITY_CHAT}
    >
      <LMChannel />
    </LMClientOverlayProvider>
  );
}

export default App;

That's it! You have successfully integrated the LikeMinds Chat SDK. The next step would be to explore additional customization options or configurations provided by the SDK to tailor the chat to your application's needs.