# Superflows Chat UI React

Superflows Chat UI is a collection of pre-built UI components that can be used to integrate a Superflows chatbot into your software.

The purpose of this library is to allow developers to easily integrate Superflows chatbot into their software.

<img width="800" alt="Superflows Modal" src="https://raw.githubusercontent.com/Superflows-AI/superflows/main/public/modal.png">

<img width="800" alt="Superflows Sidebar" src="https://raw.githubusercontent.com/Superflows-AI/chat-ui/update-readme/sidebar.png">

You can integrate in 3 ways:

|     | Approach                                                                  | Description                                                            |
| --- | ------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| 1   | `SuperflowsButton` component _(recommended)_                              | Easiest & fastest                                                      |
| 2   | `SuperflowsChat` component                                                | Most flexible & customizable                                           |
| 3   | The modal (`SuperflowsModal`) or sidebar (`SuperflowsSidebar`) components | (#1 but you have total control over the button that opens the chatbot) |

## Installation

```bash
npm install @superflows/chat-ui-react
```

## Documentation

Find the [integration guide here.](https://docs.superflows.ai/docs/category/integration-guide)

Find [documentation for the Chat UI components here](https://docs.superflows.ai/docs/category/ui-components-react).
