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

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​

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 LMChatAIButton in your index.tsx file and pass down its instance to client prop.

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

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();

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

export default App;
info

If you want to use tokens instead of API key, Refer this doc

Step 4 - Run your application​

Just run the following commands to run your app.

npm run dev
# OR
npm start