Skip to main content

Getting Started with AI Chatbot

You can also directly get started with the chatbot by initialising it using the LikeMinds Chat SDK. This approach is useful when you want to add a chatbot to your application fast, and don't want to deal with the complexities of setting up a complete chat experience. We have made it super easy to get started with the chatbot by providing a simple widget that can be added to your app's UI to allow users to start a chat with the chatbot.

Prerequisites​

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

  • Node.js and npm (Node Package Manager)
  • React Native CLI version >= 0.71
  • Xcode (for iOS development)
  • Android Studio (for Android development)
  • LikeMinds API Key: Sign up on the LikeMinds dashboard and obtain an API key for your application.

Step-by-Step Integration Guide​

Before following the steps below, ensure you have completed the steps mentioned in the Setting up Chatbot guide. Especially, the steps related to setting up the OpenAI Assistant and integrating it with LikeMinds Chat SDK.

Step 1 - Installation​

LikeMinds Chat SDK has a number of peer dependencies that are required to take advantage of all of the out of the box features. It is suggested you follow the install instructions for each package to ensure it is properly setup. Most if not all of the required packages now support auto-linking so setup should be minimal.

# Add LikeMinds Chat React Native SDK
npm install @likeminds.community/chat-rn-core@latest @likeminds.community/chat-rn@latest

## Add react navigation dependencies, don't install if already installed
npm install @react-navigation/material-top-tabs @react-navigation/native @react-navigation/native-stack @react-navigation/stack react-native-safe-area-context react-native-screens

# Add the listed dependencies
npm install @react-native-community/datetimepicker @react-native/babel-preset@0.74.0 @shopify/flash-list @types/react-native-video aws-sdk buffer diff@5.1.0 firebase moment react-native-blob-util react-native-compressor react-native-create-thumbnail react-native-device-info react-native-gesture-handler react-native-image-crop-tools react-native-image-picker react-native-linear-gradient react-native-media-console react-native-pager-view react-native-pdf-thumbnail react-native-permissions react-native-reanimated react-native-shimmer-placeholder react-native-swiper-flatlist react-native-tab-view react-native-uuid react-native-video realm@11.10.2 rn-emoji-keyboard react-native-document-picker react-native-svg lottie-react-native

# Install Pods (iOS only)
npx pod-install

Step 2 - Initiate LMChatClient​

To start using the package, import the initMyClient() method in your App.tsx or App.js file.

import { initMyClient } from "@likeminds.community/feed-rn-core";

export const lmChatClient = initMyClient();
// To initiate user session, follow step 3

Step 3 - Initiate User Session​

You have successfully initiated LMChatClient. Now before initiating the Chatbot, you need to initiate a user session and navigate to the chatroom with the Chatbot:

  1. Provide the necessary user details to the LikeMinds Chat SDK to initiate a user session.
  2. Pass the instance of the initiated LMChatClient to <LMChatBotOverlayProvider /> imported from @likeminds.community/chat-rn-core:
import {
  LMChatBotOverlayProvider,
  initMyClient,
} from "@likeminds.community/chat-rn-core";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { ConversationState } from "@likeminds.community/chat-rn";

const App = () => {
  const [myClient, setMyClient] = useState<any>();

  useEffect(() => {
    async function generateClient() {
      // Initiate LMChatClient as described in step 2
      const res: any = initMyClient([
        ConversationState.MEMBER_LEFT_SECRET_CHATROOM,
      ]);
      setMyClient(res);
    }
    generateClient();
  }, []);

  return (
    <GestureHandlerRootView>
      {myClient ? (
        <LMChatBotOverlayProvider myClient={myClient}>
          {/* Follow step 4 & 5 to add navigation logic after user is successfully initiated with LM servers */}
        </LMChatBotOverlayProvider>
      ) : null}
    </GestureHandlerRootView>
  );
};

export default App;

Step 4 - Add Chatbot Button to Your Screen​

To allow users to interact with the chatbot, add the <LMChatAIButton /> component to any screen in your application. This button initializes and navigates the user to the chatroom with chatbot when clicked.

Step 1: Set Up Your Screen​

  • Create a new screen or use an existing one in your application i.e Home Screen.
  • Add the <LMChatAIButton /> component imported from the @likeminds.community/chat-rn-core package in that screen.
HomeScreen.tsx
import {
  LMChatAIButton
} from "@likeminds.community/chat-rn-core";

const HomeScreen = () => {
  return (
    {/* JSX of your app screen i.e Home Screen */}
    .
    .
    .
    {/* Add the LMChatAIButton component */}
    <LMChatAIButton
      apiKey={"<API_KEY>"}
      userName={"<USER_NAME>"}
      uuid={"<USER_ID>"}
    />
  )
}

Step 2: Wrap Your Screen​

  • Wrap the above screen with <LMChatBotOverlayProvider/>
app.tsx
import {
  LMChatBotOverlayProvider
} from "@likeminds.community/chat-rn-core";

<LMChatBotOverlayProvider myClient={myClient}>
  <Stack.Navigator>
    <Stack.Screen
      name={"<HOME_SCREEN_NAME>"}
      component={"<HOME_SCREEN_COMPONENT>"}
    />
  <Stack.Navigator/>
</LMChatBotOverlayProvider>

Step 5 - Configure Navigation​

Set up the navigation for your application using React Navigation. Create a StackNavigator in your App.js or equivalent file:

App.tsx
import React from "react";
import { Platform } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import {
  LMChatAIBotInitiaitionScreen,
  ImageCropScreen,
  SearchInChatroom,
} from "@likeminds.community/chat-rn-core";
import ChatroomWrapperScreen from "<path_to_chatroom_wrapper_screen>";
import FileUploadScreenWrapper from "<path_to_file_upload_wrapper_screen>";

const Stack = createStackNavigator();

enum ScreenName {
  Chatroom = "Chatroom",
  FileUpload = "FileUpload",
  ImageCropScreen = "ImageCropScreen",
  SearchInChatroom = "SearchInChatroom",
  ChatBotInitiateScreen = "ChatBotInitiateScreen",
}

const App = () => {
  return (
    <>
      <NavigationContainer>
        {/* Navigation logic to be added after user is initiated as described in step 3 */}
        <Stack.Navigator>
          {/* Add your screen here as described in step 4 */}
          <Stack.Screen
            name={"<YOUR_SCREEN_NAME>"}
            component={"<YOUR_SCREEN_COMPONENT>"}
          />
          <Stack.Screen
            name={ScreenName.ChatBotInitiateScreen}
            component={LMChatAIBotInitiaitionScreen}
            options={{
              gestureEnabled: Platform.OS === "ios" ? false : true,
              headerShown: false,
            }}
          />
          <Stack.Screen
            name={ScreenName.SearchInChatroom}
            component={SearchInChatroom}
            options={{
              gestureEnabled: Platform.OS === "ios" ? false : true,
              headerShown: false,
            }}
          />
          <Stack.Screen
            name={ScreenName.Chatroom}
            component={ChatroomWrapperScreen}
            options={{
              gestureEnabled: Platform.OS === "ios" ? false : true,
            }}
          />
          <Stack.Screen
            options={{
              gestureEnabled: Platform.OS === "ios" ? false : true,
            }}
            name={ScreenName.FileUpload}
            component={FileUploadScreenWrapper}
            initialParams={{
              backIconPath: "", // add your back icon path here
              imageCropIcon: "", // add your image crop icon path here
            }}
          />
          <Stack.Screen
            options={{ headerShown: false }}
            name={ScreenName.ImageCropScreen}
            component={ImageCropScreen}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </>
  );
};

export default App;