Smart-ai-chatbot NPM

AI Chatbot

A customizable AI chatbot component for React, built with TypeScript and Tailwind CSS. This chatbot uses TensorFlow.js and the Universal Sentence Encoder to provide intelligent responses based on a predefined dataset.

Chatbot Preview

Features

Customizable Themes: Choose between dark and light themes.
Predefined Dataset: Provide a dataset of questions and answers for the chatbot to respond to.
TensorFlow.js Integration: Uses the Universal Sentence Encoder for semantic similarity matching.
Responsive Design: Works seamlessly on all screen sizes.
TypeScript Support: Fully typed for better developer experience.

Installation

Install the package using npm or yarn:

npm install ai-chat-bot

yarn add ai-chat-bot

Usage

Basic Usage

Import the Chatbot component and provide a dataset of questions and answers:

import { Chatbot } from "ai-chat-bot";

const dataset = [
  { question: "What is your name?", answer: "I am an AI chatbot." },
  { question: "How are you?", answer: "I'm doing great, thanks!" },
];

const App = () => {
  return <Chatbot dataset={dataset} />;
};

export default App;

Customizing the Chatbot

You can customize the chatbot's title and theme:

<Chatbot
  dataset={dataset}
  title="My Chatbot"
  theme="dark" // or "light"
/>

Props

Prop	Type	Default	Description
dataset	`QAPair[]`	Required	An array of question-answer pairs.
title	`string`	"AI Chatbot"	The title displayed in the chatbot header.
theme	`"dark" \| "light"`	"dark"	The theme of the chatbot. Choose between dark and light.

Dataset Structure

The dataset prop expects an array of objects with the following structure:

interface QAPair {
  question: string; // The question to match against
  answer: string; // The response to display
}

Example:

const dataset = [
  { question: "What is your name?", answer: "I am an AI chatbot." },
  { question: "How are you?", answer: "I'm doing great, thanks!" },
];

Styling with Tailwind CSS

This package uses Tailwind CSS for styling. If your project doesn't already use Tailwind CSS, follow these steps to set it up:

Install Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Add Tailwind to your `tailwind.config.js`:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/ai-chat-bot/dist/**/*.js", // Include the chatbot package
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Add Tailwind to your CSS file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Usage in Next.js App Router

If you're using Next.js with the App Router, mark the component as a Client Component by adding "use client" at the top of your file:

"use client";

import { Chatbot } from "ai-chat-bot";

const dataset = [
  { question: "What is your name?", answer: "I am an AI chatbot." },
];

const Page = () => {
  return <Chatbot dataset={dataset} />;
};

export default Page;