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

or

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;

Example Project

Check out the example project to see how to use the ai-chat-bot package in a real-world application.

Contributing

Contributions are welcome! If you'd like to contribute, please follow these steps:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/YourFeature).
3. Commit your changes (git commit -m 'Add some feature').
4. Push to the branch (git push origin feature/YourFeature).
5. Open a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Acknowledgments

• TensorFlow.js for providing the Universal Sentence Encoder model.
• React Icons for the icons used in the chatbot.
• Tailwind CSS for the utility-first CSS framework.

Support

If you have any questions or issues, please open an issue on GitHub.

Buy Me a Coffee ☕

If you like this project and want to support its development, you can buy me a coffee!

Enjoy using the AI Chatbot! 🚀