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>
  );
}