Skip to main content
Version: v2.x

UI Overrides

NLUX is a very flexible conversational AI UI library.
We allow for customization via a wide range of config options, and we provide a powerful theming system.

On top of all that, developers can also override some of the default UI components in the AI chat area with their own React components and JSX, as explained in this reference page.

Usage​

You can override the JSX of certain UI components by passing a custom container component to the AiChat component with your JSX elements inside it.

Here is an example of how you can override loader component displayed across multiple parts of NLUX:

const MyAiChatApp = () => {
    const myAdapter = useChatAdapter({ /* Your adapter options */ });
    return (
        <AiChat adapter={myAdapter}>
            <AiChatUI.Loader>
                <span className="rounded">Loading 👻</span>
            </AiChatUI.Loader>
        </AiChat>
    );
};

The inner JSX element <AiChatUI.Loader><span className="rounded">Loading 👻</span></AiChatUI.Loader> will instruct NLUX to replace the default loader component with the custom loader component provided as a child:

<span className="rounded">Loading 👻</span>

UI Overrides Supported​

Below is a list of UI component overrides that are currently supported:

Loader​

This enables overriding the loading spinner displayed in 2 locations:

  • Inside the default submit button, when it's in a loading state.
  • Under a message, when it's being loaded from the server or streaming.

Nova Theme Overview

You can override it with your own JSX element by using the AiChatUI.Loader component:

  • Overriding Container: AiChatUI.Loader
  • Usage:
<AiChat adapter={myAdapter}>
    <AiChatUI.Loader>
        <span className="rounded">Loading 👻</span>
    </AiChatUI.Loader>
</AiChat>

Greeting​

The Greeting component (previously referred to as the Welcome Message component) is displayed when the chat is first opened, and when the conversation history is empty.

Nova Theme Overview

You can override it with your own JSX element by using the AiChatUI.Greeting component:

  • Overriding Container: AiChatUI.Greeting
  • Usage:
<AiChat adapter={myAdapter}>
    <AiChatUI.Greeting>
        <span className="rounded">Hello! 👋</span>
    </AiChatUI.Greeting>
</AiChat>

Adding More Overrides​



We will be adding more customization options and overrides as we receive feedback from the community.

If your project requires more customization options, please let us know:

UI overrides are only supported for the React JS version of NLUX at the moment.