ChatBot
React ChatBotify
Table of Contents
Introduction
Welcome to React ChatBotify, an intuitive and versatile library that allows you to build responsive chatbots with ease. Whether you’re aiming to create a simple FAQ bot or a sophisticated conversational interface integrated with Large Language Models (LLMs) such as OpenAI or Google Gemini, React ChatBotify provides the tools and flexibility you need to bring your vision to life.
Designed with developers in mind, React ChatBotify simplifies the chatbot development process without compromising on functionality. Its intuitive API and comprehensive customization options allow you to tailor your chatbot to meet specific project requirements seamlessly. From handling basic interactions to managing complex and advanced conversational flows, our library empowers you to deliver engaging user experiences. Head over to our community showcases or join our discord to get inspired and start crafting your chatbot today!
React ChatBotify is currently compatible with React versions 16, 17, 18, and 19. Get started by installing the library with the following command:
npm install react-chatbotify --save
Note that this repository contains the code for the core library. If you’re looking for the repositories of other React ChatBotify projects, you may look here.
Features
React ChatBotify is packed with a comprehensive set of features designed to elevate your chatbot development experience. Explore some of its standout capabilities:
- Themes: Customize the chatbot’s appearance with a wide variety of community themes, or combine multiple themes to achieve your desired look and feel.
- Plugins: Extend your chatbot’s functionality with numerous custom plugins (e.g. LLM Connector), or create your own to meet specific needs.
- Dynamic Outputs: Craft interactive conversations by dynamically generating messages and defining multiple dialogue paths based on user inputs.
- Custom Components: Easily integrate your own custom components into the chatbot interface to boast your application’s unique design and functionality.
- Stream Responses: Connect with Large Language Models (LLMs) and custom endpoints to stream/simulate bot responses, enhancing user engagement and experience.
- Timeouts and Auto-Transitions: Configure timeouts and automate transitions between conversation paths to guide users seamlessly through their interactions.
- Voice Input & Audio Output: Empower users to interact using voice commands and receive spoken responses, adding a hands-free dimension to your chatbot.
- Chat Notifications: Keep users informed with real-time notifications, ensuring they stay updated with the latest messages and interactions.
- Checkbox & Options Support: Incorporate checkboxes and selectable options within the chat interface, enabling users to make choices effortlessly.
- Emoji Picker: Allow users to express their personalities and emotions in conversations by incorporating emojis, enhancing user engagement.
- File Attachments: Facilitate the exchange of documents, images, and other files within the chat, allowing users to upload content seamlessly.
- Sensitive Input: Protect user privacy by masking sensitive information inputted into the chatbot, ensuring confidentiality.
- Mobile-Friendly Interface: Deliver a smooth and responsive user experience across all devices with our optimized mobile-friendly design.
- Custom Events: Utilize custom events emitted by the chatbot to trigger application-specific logic, enhancing integration and interactivity.
- Custom Hooks: Leverage the provided custom hooks to interact with the chatbot from your own components, streamlining integration and functionality.
These features, along with many others, empower developers to create highly interactive and personalized chatbot experiences tailored to their specific application requirements.
Technologies
Technologies used by React ChatBotify are as below:
Done with:
ReactJS
Typescript
Project Repository
- https://github.com/react-chatbotify/react-chatbotify
Other Associated Projects
Quickstart
For a thorough walkthrough on getting started, you may refer to the Quickstart Guide on the Documentation Website.
Documentation
A full documentation (along with a live playground) for the library can be found at the following link:
- https://react-chatbotify.com/
Examples on the website are also run on a live editor so feel free to explore to your heart’s content!
Team
Contributing
If you are looking to contribute, please refer to the Contributing Guide. A special section has also been added for Hacktoberfest participants!
Support
If there are any questions pertaining to the application itself (usage or implementation wise), you may create an issue, reach out on discord, or drop me an email at: cjtanjin@gmail.com.
Attributions
Images
Credits are to be given for the following images:
Note: Some buttons are hand-drawn.
Sound
Credits are to be given for the notification sound:
Inspirations
As I have used similar alternatives at some point in my developer journey, some inspirations have been taken from them and they ought to be credited here: