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 - 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 - Initiate User Session​

Now, 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. Open up index.tsx or src/App.tsx and add 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;
tip

For enhanced security, you can use Server Side User Authentication to initiate user sessions through your own server.

Step 4 - Render LikeMinds Chat​

After successfully initiating the LMChatClient, you need to render the LMClientOverlayProvider in your index.tsx file and pass its instance to the client prop. You can choose from different chat themes based on your needs:

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

  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.

Step 5 - Add Chatbot Button to your Screen (Optional)​

note

Add AI Assitant to LikeMinds: Follow this tutorial to add Assistant to LikeMinds Dashboard, before proceeding with this step.

Render the LMChatAIButton in the file that serves as the entry point for your chatbot. Then, pass its instance to the client prop as created in Step 2.

Use the following code snippet for the same:

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

const App = () => {
  const [userDetails, setUserDetails] = useState<{
    uuid?: string; //The UUID of the user
    username?: string; // The Username of the user
    isGuest?: boolean; // Set it to true for guest users
    apiKey?: string; // Your API Key
  }>({});

  const lmChatClient = initiateLMClient(); // As mentioned in Step 2

  return <LMChatAIButton client={lmChatClient} userDetails={userDetails} />;
};

export default App;