> For the complete documentation index, see [llms.txt](https://docs.aisuru.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.aisuru.com/en/frontend/react-component.md).

# React Component

The Memori React component offers a more flexible and powerful solution for integrating into React applications. It gives you full control over the widget's behavior and appearance.

[🔗 GitHub Repository](https://github.com/memori-ai/memori-react)

#### Key Features

* Native React integration;
* Full TypeScript support;
* Customizable layouts;
* Advanced event system;
* Component override support;
* Built-in state management.

### Installation <a href="#installazione_18" id="installazione_18"></a>

```batch
# npm
npm install @memori.ai/memori-react
# yarn
yarn add @memori.ai/memori-react
```

## Memori Props Reference <a href="#memori_props_reference_28" id="memori_props_reference_28"></a>

### Identification and Basic Configuration <a href="#identificazione_e_configurazione_base_30" id="identificazione_e_configurazione_base_30"></a>

Essential props for identifying and configuring the Memori.

| Prop              | Type   | Required | Default | Description                                        |
| ----------------- | ------ | -------- | ------- | -------------------------------------------------- |
| `memoriName`\*    | string | ✓        |         | Name of the Memori                                 |
| `ownerUserName`\* | string | ✓        |         | Username of the Memori owner                       |
| `memoriID`\*      | string | ✓        |         | Memori ID                                          |
| `ownerUserID`\*   | string | ✓        |         | User ID of the Memori owner                        |
| `tenantID`        | string | ✓        |         | Tenant ID (e.g. "[aisuru.com](http://aisuru.com)") |

\* One of the two pairs is required: `memoriName` + `ownerUserName` or `memoriID` + `ownerUserID`

### URL Configuration <a href="#configurazione_url_44" id="configurazione_url_44"></a>

Props for configuring system endpoints.

| Prop        | Type   | Required | Default                       | Description            |
| ----------- | ------ | -------- | ----------------------------- | ---------------------- |
| `baseURL`   | string |          | "<https://your-base-url.com>" | Base URL               |
| `apiURL`    | string |          | "<https://backend.memori.ai>" | Memori Backend API URL |
| `engineURL` | string |          | "<https://engine.memori.ai>"  | Memori Engine API URL  |

### Layout and Display <a href="#layout_e_visualizzazione_54" id="layout_e_visualizzazione_54"></a>

Props that control the appearance and layout of the widget.

| Prop           | Type      | Required | Default    | Description             |
| -------------- | --------- | -------- | ---------- | ----------------------- |
| `layout`       | string    |          | "FULLPAGE" | Layout type             |
| `height`       | string    |          | "100%"     | Component height        |
| `customLayout` | Component |          |            | Custom layout component |
| `userAvatar`   | string    |          |            | Custom user avatar URL  |

### Language Management <a href="#gestione_linguaggio_65" id="gestione_linguaggio_65"></a>

Props related to language and translation handling.

| Prop           | Type    | Required | Default | Description                                          |
| -------------- | ------- | -------- | ------- | ---------------------------------------------------- |
| `uiLang`       | string  |          | "en"    | UI language, e.g. "en" or "it"                       |
| `multilingual` | boolean |          | false   | Enables multiple languages                           |
| `spokenLang`   | string  |          | "en"    | Spoken text language, as set by the user's selection |

### Configurable UI Elements <a href="#elementi_ui_configurabili_75" id="elementi_ui_configurabili_75"></a>

Props to control the visibility of various interface elements.

| Prop                      | Type    | Required | Default | Description                        |
| ------------------------- | ------- | -------- | ------- | ---------------------------------- |
| `showShare`               | boolean |          | true    | Show share button                  |
| `showSettings`            | boolean |          | true    | Show settings panel                |
| `showTypingText`          | boolean |          | false   | Show typing animation              |
| `showInstruct`            | boolean |          | false   | Show instruction mode switch       |
| `showOnlyLastMessages`    | boolean |          | false   | Show only the most recent messages |
| `showClear`               | boolean |          | false   | Show chat history clear button     |
| `showLogin`               | boolean |          | false   | Show login button                  |
| `showCopyButton`          | boolean |          | false   | Show copy button                   |
| `showTranslationOriginal` | boolean |          | false   | Show original translation          |

### Authentication and Session <a href="#autenticazione_e_sessione_91" id="autenticazione_e_sessione_91"></a>

Props related to session and authentication management.

| Prop            | Type   | Required | Default | Description                                                                 |
| --------------- | ------ | -------- | ------- | --------------------------------------------------------------------------- |
| `sessionID`     | string |          |         | Initial session ID, UUID that identifies a conversation and its permissions |
| `authToken`     | string |          |         | Authentication token from user login                                        |
| `secretToken`   | string |          |         | Secret token, the password for a private or secret Memori                   |
| `integrationID` | string |          |         | Unique integration ID                                                       |
| `tag`           | string |          |         | Tag of the user opening the session                                         |
| `pin`           | string |          |         | PIN of the user opening the session                                         |

### Audio and Media Features <a href="#funzionalit_audio_e_media_104" id="funzionalit_audio_e_media_104"></a>

Props for managing audio and multimedia content.

| Prop                               | Type                              | Required | Default | Description                              |
| ---------------------------------- | --------------------------------- | -------- | ------- | ---------------------------------------- |
| `enableAudio`                      | boolean                           |          | true    | Enables audio output                     |
| `defaultSpeakerActive`             | boolean                           |          | true    | Default value for the speaker activation |
| `AZURE_COGNITIVE_SERVICES_TTS_KEY` | string                            |          |         | Azure TTS key                            |
| `customMediaRenderer`              | (mimeType: string) => JSX.Element |          | null    | Custom media renderer                    |

### Conversation Configuration <a href="#configurazione_conversazione_115" id="configurazione_conversazione_115"></a>

Props for configuring conversation behavior and interactions.

| Prop                       | Type        | Required | Default | Description                          |
| -------------------------- | ----------- | -------- | ------- | ------------------------------------ |
| `context`                  | string      |          |         | Initial conversation context         |
| `initialQuestion`          | string      |          |         | First question to ask                |
| `onStateChange`            | function    |          |         | State change callback                |
| `disableTextEnteredEvents` | boolean     |          | false   | Disables MemoriTextEntered listeners |
| `useMathFormatting`        | boolean     |          | false   | Enables math formatting              |
| `additionalSettings`       | JSX.Element |          |         | Custom settings panel content        |

## Layout Types <a href="#tipi_di_layout_128" id="tipi_di_layout_128"></a>

### **FULLPAGE**

Full-screen experience, ideal for dedicated pages

<figure><img src="https://raw.githubusercontent.com/memori-ai/memori-react/main/docs/fullpage.png" alt="" width="375"><figcaption></figcaption></figure>

```html
<Memori
  layout="FULLPAGE"
  memoriName="MyMemori"
  ownerUserName="myuser"
  tenantID="aisuru.com"
  height="100vh"
/>
```

### **WEBSITE ASSISTANT**

Floating assistant, perfect for embedding in websites

<figure><img src="https://raw.githubusercontent.com/memori-ai/memori-react/main/docs/website-assistant.png" alt="" width="375"><figcaption></figcaption></figure>

```html
<Memori
  layout="WEBSITE_ASSISTANT"
  memoriName="MyAssistant"
  ownerUserName="myuser"
  tenantID="aisuru.com"
  showOnlyLastMessages={true}
  height="500px"
/>
```

### **CHAT**

Chat interface focused on messages

<figure><img src="https://raw.githubusercontent.com/memori-ai/memori-react/main/docs/chat.png" alt="" width="375"><figcaption></figcaption></figure>

```html
<Memori
  layout="CHAT"
  memoriName="MyMemori"
  ownerUserName="myuser"
  tenantID="aisuru.com"
  showCopyButton={true}
  showTranslationOriginal={true}
/>
```

### **ZOOMED FULL BODY**

Full-page layout with a zoomed-in avatar on the left side of the screen

<figure><img src="https://raw.githubusercontent.com/memori-ai/memori-react/main/docs/zoomed-avatar.png" alt="" width="375"><figcaption></figcaption></figure>

```html
<Memori
  layout="ZOOMED_FULL_BODY"
  memoriName="MyMemori"
  ownerUserName="myuser"
  tenantID="aisuru.com"
  height="100vh"
/>
```

### **HIDDEN CHAT**

Side chat layout — the chat is hidden and only visible when the user clicks the button on the right side of the screen

<figure><img src="https://raw.githubusercontent.com/memori-ai/memori-react/main/docs/hidden-chat.png" alt="" width="375"><figcaption></figcaption></figure>

```html
<Memori
  layout="HIDDEN_CHAT"
  memoriName="MyMemori"
  ownerUserName="myuser"
  tenantID="aisuru.com"
  height="100vh"
/>
```

### **TOTEM**

Layout designed for digital kiosks. You can customize the height and depth of the avatar displayed in the background.

<figure><img src="https://raw.githubusercontent.com/memori-ai/memori-react/main/docs/totem.png" alt="" width="375"><figcaption></figcaption></figure>

```html
<Memori
  layout="TOTEM"
  memoriName="MyMemori"
  ownerUserName="myuser"
  tenantID="aisuru.com"
  height="100vh"
/>
```

### Custom Layout <a href="#layout_personalizzato_214" id="layout_personalizzato_214"></a>

<figure><img src="https://assets.memori.ai/api/v2/asset/12ed839d-0b93-4935-a160-d5f25acfb8e5.png" alt="" width="375"><figcaption></figcaption></figure>

We built a sample Agent — an adventure game called "The Land of Memori".\
By default, the layout doesn't support full-page image viewing.

To show how custom layouts work, we created one that improves the image viewing experience and provides additional information to the user in a side panel (logged-in user, last message sent by the user, and a button to view the full conversation).<br>

{% embed url="<https://github.com/andrepat0/memory-media-layout>" %}
The GitHub repository with the Custom Layout code
{% endembed %}

{% embed url="<https://andrepat0.github.io/memory-media-layout/>" %}
Give it a try!
{% endembed %}