> For the complete documentation index, see [llms.txt](https://docs.ibexa.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ibexa.ai/developers/assistant.md).

# Assistant

This section documents `@ibexa/ai-assistant-ui`, the embeddable chat UI library that powers the Assistant experience across the platform. It covers installation, configuration, customization, and extension points for engineers integrating the Assistant into their own applications.

## Key Features

The key features of the library include:

* Layout adapting to the use-case like ad-hoc questions, side-by-side and/or deep work
* Support for Text, Voice & File upload input
* Interactive output e.g., text, images, product carousel with custom message types support
* LLM-vendor agnostic with OpenAI and Ibexa Agentic Marketing Platform support out-of-the-box
* Conversation history & management
* Context awareness and ability to directly interact with active page
* Localization and internationalization included by default (EN, DE, FR, ES)
* Keyboard navigation and accessibility

## Installation

To install the library, you can use npm or yarn:

1. Create a `.npmrc` file in the root of your project and add the following line to it:

```
# Use GitHub Packages for @ibexa scope
# Provide a PAT via env var GH_PACKAGES_TOKEN with at least read:packages

registry=https://registry.npmjs.org/
@ibexa:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GH_PACKAGES_TOKEN}
always-auth=true
```

2. Set the `GH_PACKAGES_TOKEN` environment variable with your GitHub Personal Access Token (PAT) that has at least `read:packages` scope. This will allow you to access the private packages published under the `@ibexa` scope.
3. Install the package using the package manager of your choice, e.g. `npm`:

```bash
npm install @ibexa/ai-assistant-ui
```

## Basic Usage

After installing the package, you can import and use the components in your project. Here's a basic example of how to initialize the Assistant:

```javascript
import '@ibexa/ai-assistant-ui/styles.css';
import { Assistant, EchoAdapter } from '@ibexa/ai-assistant-ui';

function App() {
    const adapter = new EchoAdapter();

    return <Assistant adapter={adapter} />;
}
```

There are 3 steps to get the Assistant up and running:

1. Import the necessary components and styles from the package.
2. Create an instance of the adapter you want to use (in this case, `EchoAdapter`).
3. Render the `Assistant` component and pass the adapter instance as a prop.

## Next Steps

Once you have the basic setup working, you can explore the following topics:

1. Pick an [adapter](/developers/assistant/adapters.md) to connect the Assistant to the back-end of your choice.
2. [Choose a layout](/developers/assistant/layouts.md) that best suits your application's user experience.
3. [Customize the appearance](/developers/assistant/customizing-appearance.md) of the Assistant and check the [available options](/developers/assistant/options.md) to fit your application's design and requirements.

## Source Code

The source code for this project is available on GitHub at <https://github.com/ibexa/ai-assistant-ui>.

## Contributing

We welcome contributions from the community! If you would like to contribute, please follow these steps:

1. Fork the repository and create a new branch for your feature or bug fix.
2. Make your changes and ensure that they are well-documented and tested.
3. Submit a pull request with a clear description of your changes and the problem they solve.
4. Our team will review your pull request and provide feedback or merge it if it meets our standards.

## Reporting Issues

If you encounter any issues or have questions, please feel free to open an issue on our [GitHub repository](https://github.com/ibexa/ai-assistant-ui) or use the [#i1-agentic-platform](https://ibexa.slack.com/archives/C09R1FBNY87) Slack channel. We are here to help and will do our best to assist you.