mongodb-chatbot-ui
v0.10.2
Published
UI React components for the MongoDB Chatbot Framework
Downloads
491
Readme
MongoDB Chatbot UI
The React components for the MongoDB Chatbot Framework.
Documentation
To learn more about the MongoDB Chatbot UI components, check out the documentation.
For more information about the available components and props, refer to the documentation.
Install
Install the mongodb-chatbot-ui
package from npm. This contains the React.js components that you can use to build a chatbot UI.
npm install mongodb-chatbot-ui
Usage
import Chatbot, {
FloatingActionButtonTrigger,
InputBarTrigger,
ModalView,
MongoDbLegalDisclosure,
mongoDbVerifyInformationMessage,
} from "mongodb-chatbot-ui";
function MyApp() {
const suggestedPrompts = [
"How do I create a new MongoDB Atlas cluster?",
"Can MongoDB store lists of data?",
"How does vector search work?",
];
return (
<div>
<Chatbot
name="MongoDB AI"
maxInputCharacters={300}
>
<InputBarTrigger
bottomContent={<MongoDbLegalDisclosure />}
suggestedPrompts={suggestedPrompts}
/>
<FloatingActionButtonTrigger text="Ask My MongoDB AI" />
<ModalView
disclaimer={<MongoDbLegalDisclosure />}
initialMessageText="Welcome to my MongoDB AI Assistant. What can I help you with?"
initialMessageSuggestedPrompts={suggestedPrompts}
initialMessageReferences={[
{
url: "https://example.com/some-link",
title: "Example reference link",
metadata: {
sourceType: "Article",
},
},
{
url: "https://example.com/another-link",
title: "Another reference link",
metadata: {
sourceType: "Docs",
},
},
]}
inputBottomText={mongoDbVerifyInformationMessage}
/>
</Chatbot>
</div>
);
}