⚛️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

Key Features

• Native React integration;

• Full TypeScript support;

• Customizable layouts;

• Advanced event system;

• Component override support;

• Built-in state management.

Installation

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

Memori Props Reference

Identification and Basic Configuration

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")

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

URL Configuration

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

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

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

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

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

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

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

FULLPAGE

Full-screen experience, ideal for dedicated pages

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

WEBSITE ASSISTANT

Floating assistant, perfect for embedding in websites

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

CHAT

Chat interface focused on messages

<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

<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

<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.

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

Custom Layout

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).

https://github.com/andrepat0/memory-media-layoutgithub.com

The GitHub repository with the Custom Layout code

https://andrepat0.github.io/memory-media-layout/andrepat0.github.io

Give it a try!