AI chatbot

UIKit for React supports Sendbird AI chatbot, powered by OpenAi's ChatGPT, Google Bard, and our custom Llama2. With Sendbird AI chatbot, you can provide your customers with seamless and efficient communication by automating responses and providing personalized, and human-like interactions.

To implement an AI chatbot on the UI, you need your Sendbird Application ID and the Bot ID. You can find the IDs on the Overview page and AI chatbots page on the dashboard. If you haven't created an AI chatbot through the dashboard yet, see our AI chatbot guide and create a bot on the dashboard. To learn more about the prompt settings and customization of the bot, see our AI chatbot widget repository.

1. Install sendbird/chat-ai-widget library.

npm install @sendbird/chat-ai-widget

2. Import ChatAiWidget and specify your Sendbird application ID and its bot ID in the <ChatAiWidget/> component.

import { ChatAiWidget } from "@sendbird/chat-ai-widget";
import "@sendbird/chat-ai-widget/dist/style.css";

const App = () => {
    return (
        <ChatAiWidget
            applicationId="AE8F7EEA-4555-4F86-AD8B-5E0BD86BFE67" // Your Sendbird Application ID
            botId="khan-academy-bot" // Your Bot ID
        />
    );
}

Note: You can also load this <ChatAiWidget/> component from an HTML file on your website. Refer to js-example.html for an example.