React AI ChatBot
Simple React AI Chatbot based on GPT-3 or GPT-4 OpenAI models to chat with your data. This component provides hooks for chatbot interaction - sending and receiving messages. UI Styling is completely up to you!
Chatlas.ai is used to set discussion context and settings!
It's recommended to have your own Open AI Api Key to use React AI ChatBot! You can get your key here.
npm install react-ai-chatbot
or
yarn add react-ai-chatbot
Register or login at OpenAI platform and set your API Key here.
Singup at chatlas.ai and add your OpenAI Key.
Start discussion either from documents or webpages.
Enable discussion sharing (at right top side). Copy discussion endpoint.
Example implementation (update <your_discussion_endpoint> accordingly):
import { ReactNode, useState, ChangeEvent } from 'react';
import { ChatBotProvider, useChatBot, usePending } from 'react-ai-chatbot';
const ChatBot = ({ children } : { children: ReactNode }) => {
const [ message, setMessage ] = useState<string>('');
const { messages, sendMessage, isLoading, isError, error } = useChatBot();
const messageChangeHandler = (e:ChangeEvent<HTMLInputElement>) => setMessage(e.target.value);
const sendMessageHandler = () => {
sendMessage(message);
setMessage('');
}
return <div>
{isLoading ? <div>loading...</div> : ''}
{isError ? <div>{error}</div> : ''}
<div>
{messages.map((m, i)=><div key={i}>{m.type}: {m.message}</div>)}
<div>{children}</div>
</div>
<div>
<input type="text" value={message} onChange={messageChangeHandler} />
</div>
<button onClick={sendMessageHandler}>Send</button>
</div>
}
const PendingMessage = () => {
const { pending } = usePending();
return <>{ pending }</>;
}
const App = () => {
return <ChatBotProvider endpoint='<your_discussion_endpoint>'>
<ChatBot>
<PendingMessage />
</ChatBot>
</ChatBotProvider>
}
useChatBot
usePending
Author: rarar89
Source Code: https://github.com/rarar89/react-ai-chatbot
License: ISC