Skip to content

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

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

  2. 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.

  3. Install the Sociable AI UI library:

    Terminal window
    npm install sociable-ai-chatbox

    Note for existing users: The package name has changed from sociable-ai-chatbot to sociable-ai-chatbox. Please update your dependencies accordingly.

  4. Configure tailwind.config.js

    Add the following to your tailwind.config.js file to include the package:

    /** @type {import('tailwindcss').Config} */
    export default {
    content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/sociable-ai-chatbox/**/*.js"
    ],
    theme: {
    extend: {},
    },
    plugins: [],
    }

    The important line to add is:

    "./node_modules/sociable-ai-chatbox/**/*.js"
  5. Set up the SociableAiChat component:

    Use the following code to implement the SociableAiChat component in your application:

    import { SociableAiChat } from "sociable-ai-chatbox";
    function App() {
    return (
    <SociableAiChat
    apiKey="YOUR_API_KEY"
    baseUrl="YOUR_BASE_URL"
    chatName="Chat With Name"
    personaName="AI Name"
    greetingMessage="Hey! How can I help you?"
    />
    )
    }
    export default App;

    Replace YOUR_API_KEY and YOUR_BASE_URL with your actual values.