Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
---
id: Overview
title: ChatBot overview
section: extensions
subsection: ChatBot
sortValue: 1
source: ChatBot
---

**Note:** The PatternFly ChatBot extension lives in its own package [`@patternfly/chatbot`](https://www.npmjs.com/package/@patternfly/chatbot).

The PatternFly **ChatBot** extension contains a React implementation of an AI-focused chatbot, providing users with access to convenient and persistent help. This extension is intended to remain in alignment with our [AI principles and design guidelines](/ai/overview).

*Only use this ChatBot when it adds value to your users' experiences.* Don't use it simply for the sake of novelty—it must directly help users reach their goals.

---

## How do I use ChatBot?

To get started:
1. Install the `@patternfly/chatbot` package by following [the README instructions](https://github.com/patternfly/chatbot).
2. To use a ChatBot component in your project, import the ChatBot and the component you need. For example: `import ChatbotWelcomePrompt from '@patternfly/chatbot/dist/dynamic/ChatbotWelcomePrompt';`
3. To build out and customize your ChatBot experience, refer to our extensive documentation on PatternFly.org.

## What does a built-out ChatBot look like?

To illustrate holistic ChatBot solutions, we offer these interactive demos:
- [Basic ChatBot](/extensions/chatbot/overview/demo#basic-chatbot): A standard ChatBot that can swap between display modes.
- [Compact ChatBot](/extensions/chatbot/overview/demo#compact-chatbot): A compact version of a standard ChatBot that allows for more information density.
- [Embedded ChatBot](/extensions/chatbot/overview/demo#embedded-chatbot): A ChatBot experience that can be embedded into a page within an application.
- [Inline drawer ChatBot](/extensions/chatbot/overview/demo#inline-drawer-chatbot): A ChatBot placed within a drawer that is inline with page content, rather than one that overlays the page.

## How do I build a ChatBot for my product?

To learn how to design ChatBot experiences, refer to [the design guidelines](/extensions/chatbot/overview/design-guidelines) and our [conversation design guidelines](/ai/conversation-design/).

Explore our documentation, which covers both the components you'll need to build your ChatBot and the guidance to follow for different functionality:
- UI: Structural, core components
- [Structural elements](/extensions/chatbot/ui#structure)
- [Toggle](/extensions/chatbot/ui#toggle)
- [Header](/extensions/chatbot/ui#header)
- [Footer](/extensions/chatbot/ui#footer)
- [Navigation](/extensions/chatbot/ui#navigation)
- [Modals](/extensions/chatbot/ui#modals)
- Messages: Components that customize features related to the conversation
- [Bot and user messages](/extensions/chatbot/messages)
- [File attachments](/extensions/chatbot/messages#file-attachments)
- Patterns: More opinionated implementation solutions for common use cases
- [Primary color background](/extensions/chatbot/overview/demo#primary-color-background)
- [Display mode switcher](/extensions/chatbot/overview/demo#display-mode-switcher)
- [Chat transcripts](/extensions/chatbot/overview/demo#chat-transcripts)
- [Analytics](/extensions/chatbot/analytics): Tracking for ChatBot interactions
- [Customizing messages](/extensions/chatbot/customizing-messages): Details for the implementation of custom messages

---

We will continue to grow and evolve our ChatBot. If you notice a bug or have any suggestions, feel free to file an issue in our [GitHub repository!](https://github.com/patternfly/chatbot/issues) Make sure to check if there is already a pre-existing issue before creating a new one.
Loading