React Chatbot Koodums

A customizable React chatbot component built with Material-UI, supporting dynamic conversations, configurable UI, and quick replies. Supports displaying Tables, Forms, Pictures, Picture Carousels, and Alerts. Integrates with Google Places, Ticket Master, Make.com, Zapier, Open AI, Gemini, and Pinecone Vector Database. Uses Open AI LLMs, Gemini LLMs, and Pinecone Vector Database. Supports speaking results and 80 other configurable options.

For more information, including pictures and additional details, go to https://www.koodums.com.

Visual Demo

Explore React Chatbot Koodums through these screenshots showcasing its features:

Installation

Step 1: Install react-chatbot-koodums

Install via npm (if published):

1npm install react-chatbot-koodums

Or, if you received a tarball (react-chatbot-koodums-1.1.0.tgz):

1npm install /path/to/react-chatbot-koodums-1.1.0.tgz

Step 2: Install Peer Dependencies

Run the following to install required peer dependencies:

1npm install \
2  @emotion/react@^11.10.4 \
3  @emotion/styled@^11.10.4 \
4  @google-cloud/dialogflow-cx@^4.7.0 \
5  @mui/icons-material@^7.0.1 \
6  @mui/material@^7.0.1 \
7  @reduxjs/toolkit@^1.8.6 \
8  @vis.gl/react-google-maps@^1.5.2 \
9  firebase@^11.1.0 \
10  formik@^2.4.6 \
11  lottie-react@^2.4.0 \
12  react@^18.2.0 \
13  react-bootstrap@2.10.4 \
14  react-calendly@^4.3.1 \
15  react-device-detect@^2.2.3 \
16  react-div-100vh@^0.7.0 \
17  react-dom@^18.2.0 \
18  react-helmet@^6.1.0 \
19  react-player@^2.16.0 \
20  react-redux@^8.0.4 \
21  react-router-dom@^6.4.2 \
22  react-youtube@^10.1.0 \
23  redux-persist@^6.0.0 \
24  swiper@^9 intendants@6.4.2 \
25  npm@^9.0.0 \
26  npm@npm
27  typeit@^8.7.1 \
28  typeit-react@6.2.4 \
29  npm@^6.4.2 \
30  typeit@2.6.4 \
31  use-sound@^4.0.1 \
32  uuid@^9.0.5 \
33  yup@^1.6.1

Step 2: Set Up Environment Variables

Create a .env file in your project root with:

VITE_URL_PREFIX=https://agent-builder.koodums.com/
VITE_USER=YourName
VITE_COMPANY_NAME=Koodums
VITE_APP_VERSION=1.1.0
VITE_INPUT_HELPER_TEXT=Type your request/question...

Alternatively, pass these via the config prop (see Usage).

Step 3: Ensure Backend API

The chatbot requires a backend API at the VITE_URL_PREFIX (e.g., /api/initialize). Contact the package author for API access.

Usage

Import and use the ChatBot component in your React app:

1import { ChatBot } from "react-chatbot-koodums";
2import { Container } from "@mui/material";
3
4function App() {
5  const config = {
6    urlPrefix:
7      process.env.VITE_URL_PREFIX || "https://agent-builder.koodums.com",
8    user: process.env.VITE_USER || "Test User",
9    companyName: process.env.VITE_COMPANY_NAME || "Koodums",
10    appVersion: process.env.VITE_APP_VERSION || "1.1.0",
11    inputHelperText:
12      process.env.VITE_INPUT_HELPER_TEXT || "Type your request/question...",
13    latitude: 38.8977,
14    longitude: -77.0365,
15  };
16
17  return (
18    <Container
19      sx={{ height: "100vh", display: "flex", flexDirection: "column" }}
20    >
21      <ChatBot
22        uniqueCode="GERKA"
23        agentId="your-agent-id"
24        isMobile={false}
25        config={config}
26      />
27    </Container>
28  );
29}
30
31export default App;

Example: Hotel Booking Chatbot

See what’s possible with React Chatbot Koodums! Check out this example of a hotel booking chatbot in action, demonstrating dynamic conversations and integrations with Google Places for location-based services:

Watch the Hotel Booking Chatbot Demo on YouTube

Props

• uniqueCode (string): Unique identifier for the chatbot session (e.g., "TRSFG").
• agentId (string): Agent identifier (e.g., "5fg46sg4s6d5fg5df64sg").
• isMobile (boolean): Set to true for mobile layouts.
• config (object): Configuration object with:
  • urlPrefix: API endpoint (e.g., https://agent-builder.koodums.com/).
  • user: User name.
  • companyName: Company name.
  • appVersion: App version.
  • inputHelperText: Input placeholder.
  • latitude, longitude: Optional location coordinates.

Notes

• Ensure the backend API is accessible and configured correctly.
• For mobile apps (e.g., Capacitor), set isMobile={true} and test API connectivity.
• The chatbot height is optimized with height: '100vh' on the parent Container.

Troubleshooting

• API Errors: Check the browser console for /api/initialize failures. Verify urlPrefix.
• Missing Dependencies: Ensure all peer dependencies are installed with correct versions.
• Contact: Reach out to the package author (Kevin) for support.

License

MIT