Customizable AI Chatbot Widget UI With React And OpenAI API

Description:

chatbot-widget-ui is a UI component designed for creating customizable AI chatbot widgets using React.js and TypeScript. It leverages the OpenAI API to provide natural language processing capabilities.

The Chatbot widget’s design allows for significant customization in terms of colors, icons, and placeholder texts. This makes it adaptable to different styles and usage requirements.

How to use it:

1. Install the chatbot-widget-ui with NPM and import it into your project.

# NPM
$ npm install chatbot-widget-ui@latest
import { ChatBotWidget } from "chatbot-widget-ui";

2. Add the ChatBotWidget component to the app.

<ChatBotWidget
  apiKey="OPENAI_API_KEY"
  chatIcon={<div>O</div>}
/>

3. Available props to customize the Chatbot widget.

chatbotName?: string;
isTypingMessage?: string;
IncommingErrMsg?: string;
primaryColor?: string;
inputMsgPlaceholder?: string;
conversation?: any;
handleNewMessage?: any;

Preview:

Customizable Chatbot Widget UI With React And OpenAI API

Add Comment