Installing SociableAiChat
This guide will walk you through the process of installing and setting up the SociableAiChat component in your React application.
Prerequisites
Before you begin, ensure you have the following installed:
- Node.js (version 18 or later)
- npm (usually comes with Node.js)
Installation Steps
-
Initialize a Node.js project of your choice. We assume you’re familiar with setting up a project, so we’ll skip the details of this step.
-
Add Tailwind CSS
Components are styled using Tailwind CSS. You need to install Tailwind CSS in your project.
Follow the Tailwind CSS installation instructions to get started.
-
Install the Sociable AI UI library:
Note for existing users: The package name has changed from
sociable-ai-chatbot
tosociable-ai-chatbox
. Please update your dependencies accordingly. -
Configure tailwind.config.js
Add the following to your
tailwind.config.js
file to include the package:The important line to add is:
-
Set up the SociableAiChat component:
Use the following code to implement the SociableAiChat component in your application:
Replace
YOUR_API_KEY
andYOUR_BASE_URL
with your actual values.