Chat UIKit React v3
Chat UIKit React
Chat UIKit
Version 3

AI chatbot

Copy link

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.

How to use

Copy link

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
  1. 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 (
            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.