react-chatbot-deepai

This is a simple react chatbot component that uses OPENAI and react-chatbot-kit under the hood to create a seamless user interface for website to have a chatbot.

Authors

• @mnshah0101

Screenshots

Installation

Install react-chatbot-deepai with npm

1  npm install react-chatbot-deepai

Usage/Examples

1import Chatbot from "react-chatbot-deepai";
2import "react-chatbot-deepai/dist/style.css";
3
4function App() {
5  return (
6    <div>
7      <ChatBot
8        OPEN_AI_KEY="SOME_KEY"
9        model="gpt-4"
10        max_tokens={150}
11        chatbot_prompt="You are an assistant for a clothing company called Love Clothing."
12        placeholderText="Type a message..."
13        buttonText="Chat with us"
14      />
15    </div>
16  );
17}

[OPEN_AI_KEY, model, max_tokens, chatbot_prompt, placeholderText, buttonText] are all required props.

You can also edit the CSS. The UI is built upon react-chatbot-kit so many of the CSS selectors are the same from that. However, the open/close functionality can also be edited.

1.react-chatbot-kit-chat-container {
2}
3
4.react-chatbot-kit-chat-inner-container {
5}
6
7.react-chatbot-kit-chat-header {
8}
9
10.react-chatbot-kit-chat-input-container {
11}
12
13.react-chatbot-kit-chat-message-container {
14}
15
16.react-chatbot-kit-chat-input {
17}
18
19.react-chatbot-kit-chat-input-form {
20}
21
22.react-chatbot-kit-chat-input::placeholder {
23}
24
25.react-chatbot-kit-chat-btn-send {
26}
27
28.react-chatbot-kit-chat-btn-send-icon {
29}
30
31.react-chatbot-kit-chat-bot-message-container {
32}
33
34.react-chatbot-kit-chat-bot-avatar-container {
35}
36
37.react-chatbot-kit-chat-bot-avatar-icon {
38}
39
40.react-chatbot-kit-chat-bot-avatar-letter {
41}
42
43.react-chatbot-kit-chat-bot-message {
44}
45
46.react-chatbot-kit-chat-bot-message-arrow {
47}
48
49.react-chatbot-kit-chat-bot-loading-icon-container {
50}
51
52.chatbot-loader-container {
53}
54
55#chatbot-loader #chatbot-loader-dot1 {
56}
57
58#chatbot-loader #chatbot-loader-dot2 {
59}
60
61#chatbot-loader #chatbot-loader-dot3 {
62}
63
64.react-chatbot-kit-error {
65}
66
67.react-chatbot-kit-error-container {
68}
69
70.react-chatbot-kit-error-header {
71}
72
73.react-chatbot-kit-error-docs {
74}
75.openedChat {
76}
77.closedChat {
78}
79
80.chatbotbutton {
81}
82.button_text {
83}

Environment Variables

Pass your OPENAI Key Through As A Prop It is recommended to save it as an environemnt variable and then pass it through the component.

OPENAI_API_KEY

Features

• Choose from 'gpt-4-1106-preview', 'gpt-4', 'gpt-3.5-turbo-1106', 'gpt-3.5-turbo'
• Edit styles
• Close Button Included
• Minimal

Roadmap

• I plan to add more customizability.

• I also plan to make a TS version.