Create a low-code AI chatbot widget powered by ChatGPT
AI chatbots and the rise of ChatGPT
After the meteoric rise of OpenAI’s ChatGPT, many integrations and plugins that seek to harness this LLM’s power have been created. Of the many ways to use ChatGPT for business use cases, one creative way to bring the power of ChatGPT to your app is to use it to power in-app chat.
In this tutorial, we will demonstrate how to create a powerful AI chatbot, powered by ChatGPT, using the Sendbird conversations platform.
Modern AI chatbots: Going from a simple bot to a personalized AI assistant
An AI chatbot is designed to provide comprehensive responses to user inquiries by learning from previous chat records, thereby enhancing the user experience. An AI chatbot can supercharge an app or service with a richer and more engaging user experience and offer personalized assistance.
With Sendbird, your AI chatbot can go from a simple bot to a personalized AI assistant. This happens through a seamless, easy-to-follow integration of knowledge-based chatbots into your preferred channels. You also can enhance your AI chatbot by adding or customizing additional functions as needed.
The following demo shows Sendbird’s AI chatbot, powered by ChatGPT, in action!
Prerequisites to create an AI chatbot
To get the most out of this tutorial, you will need:
Sendbird account: Go to the Sendbird Dashboard and create an account for a free trial. If you already have a Sendbird account, sign into your account.
- Knowledge base source: Prepare your data source in PDF or txt format or keep its URL with you. This will allow the AI chatbot to learn in advance. This data will serve as the knowledge base source that the AI chatbot will use to learn from and generate responses.
- Knowledge base sources for this tutorial:
PDF: Italian Cookbook
URL: Khan Academy
- Knowledge base sources for this tutorial:
Implementation: How to create an AI chatbot
Step 1: Get Sendbird Application ID
Create a new Sendbird application by clicking ‘Create application’ at the top left corner of your screen.
Choose a Product Type and enter a name for your application. Select the appropriate server region. Then, click Confirm.
Click the application you just created under Applications on the top-left corner of your screen.
On the Overview page, you can find the Application ID which you will need when initializing the Chat SDK. You will need this Application ID later in this tutorial!
Step 2: Navigate to your Sendbird Application
Go to the application you just created on Sendbird Dashboard.
In the left menu bar on the dashboard, click AI chatbots under Chat.
Step 3: Set up your AI chatbot
Click on the Create bot + button to set up a new AI chatbot.
In the Bot Name field, enter a unique Bot Name and Bot ID of your choice. Store the ID because you will need it when creating a channel for the Bot.
For the Bot AI engine, select OpenAI ChatGPT.
Specify Knowledge Base Source. There are three options:
None: The bot uses the basic OpenAI Model and you can adjust the specific parameters to your needs.
File: You can select a PDF or txt file. Supported formats are .json, .txt, .md, and .pdf. The maximum file size is 5MB.
URL: This includes the contents of a specified URL (Maximum: 10 URLs, up to 1,000 URL subpages per URL) will be automatically analyzed and used as the bot's Knowledge Base Source.
Click Create.
Step 4: Testing your AI chatbot
After your AI chatbot is created, you can start a test conversation directly from the web interface.
The Sendbird Chat AI Widget: Deploying your AI chatbot to your website
The low-code Sendbird Chat AI Widget makes it easy for you to deploy your AI chatbot to your website. This means that website visitors will have an AI assistant ready to answer questions, help them take actions, and offer to take feedback as visitors navigate through your site. These functions help to drive engagement and encourage users to interact with your site. This is incredibly important for marketing, sales, people operations, and more.
Before you implement this, keep your Sendbird App ID and Bot ID handy - you will need them for this.
1. Create React Project.
2. Install ChatAIWidget NPM Library.
3. Modify src/App.js as follows.
4. Run the codes.
5. You will see the following web screen. Click the widget at the bottom-right corner.
AI chatbot use cases
The possibilities for your AI chatbot’s use are nearly limitless - here are a few popular use cases.
Education: The Sendbird Chat AI widget can be used to answer students’ questions, guide them through the problem-solving process, and provide information about schedules or student admin. Check out this Khan Academy Bot and the Sendbird Docs AI Assistant.
Customer service: An AI chatbot can offer automated customer service assistance to field frequently asked questions and handle user inquiries in real time, thereby freeing up agents to focus on more important tasks. This Salesforce Connector has a useful Summarize feature, powered by ChatGPT, to quickly bring agents up to speed on conversations.
Marketplaces and shopping: The AI chatbot can help you promptly respond to queries regarding product information, inventory status, reservations, shipping status, refunds, and more. It can also provide personalized recommendations, which is an important way for marketplaces to generate sales.
An AI chatbot can be used to streamline communication and boost user engagement in other industries like financial services, digital health, on-demand services, and online communities - the only limit is your imagination!
Get started with Sendbird: Create and deploy an AI chatbot to your website
Congratulations! ⭐️ You now know how to use the Sendbird platform to create an AI chatbot and deploy it to your website. If you need help with the material in the tutorial, please check out the docs or start a discussion in the Sendbird Community to get your questions answered.
Chatting with AI chatbots is great, but chatting with humans - and building lasting relationships - provides a different type of value! With Sendbird, you can build feature-rich in-app chat with all the features of a modern messenger without sacrificing control over your data or user experience. You can send your first human-to-human message today by creating a Sendbird account to get access to valuable (free) resources with the Developer plan. There’s a plethora of documentation and tutorials available for you to start building right away. If you want to take your chat app to the next level, you can do so with Sendbird Calls and Live.
Sendbird also provides SDKs and UIKit for a wide range of platforms, making it easier to integrate chat functionalities directly into your application.
If you have any other questions, please contact us. Our experts are always happy to help!
Happy AI chatbot building! 🤖
