Installation & Setup

The CMND React SDK makes it easy to embed a customizable chatbot in your React application.

Prerequisites

Before you begin, make sure you have the following from the "Embed" tab of your CMND Chatbot Dashboard:

Prop	Type	Description
baseUrl	string	The CMND API base URL (usually https://api.cmnd.ai)
chatbotId	string	Your unique chatbot identifier
organizationId	string	Your organization identifier

Installation

Install the package using your preferred package manager:

npm

Terminal

npm install @cmnd-ai/chatbot-react

yarn

Terminal

yarn add @cmnd-ai/chatbot-react

pnpm

Terminal

pnpm add @cmnd-ai/chatbot-react

Basic Implementation

Adding the Chatbot to Your App

Follow these steps to add the chatbot to your React application.

1. Import Required Components

JavaScript

import { ChatProvider, CmndChatBot } from "@cmnd-ai/chatbot-react";
import "@cmnd-ai/chatbot-react/dist/styles/index.css";

2. Configure the Chatbot

Wrap your app (or the part where you want the chatbot to be available) with the ChatProvider and include the CmndChatBot component:

JavaScript

const App = () => {
  return (
    <ChatProvider
      baseUrl="https://api.cmnd.ai"
      chatbotId={YOUR_CHATBOT_ID}
      organizationId={YOUR_ORG_ID}
    >
      {/* Your app components */}
      <CmndChatBot />
    </ChatProvider>
  );
};

export default App;

caution

Remember to replace YOUR_CHATBOT_ID and YOUR_ORG_ID with the actual values from your CMND dashboard.

Complete Implementation Example

JavaScript

import React from "react";
import { ChatProvider, CmndChatBot } from "@cmnd-ai/chatbot-react";
import "@cmnd-ai/chatbot-react/dist/styles/index.css";

const App = () => {
  return (
    <div className="app">
      <header className="app-header">
        <h1>My Application with CMND Chatbot</h1>
      </header>

      <main className="app-content">
        {/* Your main application content */}
        <p>Welcome to my application! Click the chat icon to get assistance.</p>
      </main>

      <ChatProvider
        baseUrl="https://api.cmnd.ai"
        chatbotId="your-chatbot-id"
        organizationId="your-org-id"
      >
        <CmndChatBot />
      </ChatProvider>
    </div>
  );
};

export default App;

tip

Want to see it all together in a working app? Check out the open-source example: CMND React Chatbot Example on GitHub