# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aisuru.com/en/frontend/react-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.