UI Overrides

In this example, we demonstrate how to override certain UI elements in the NLUX chat interface using JSX syntax.

Loader Component Overrides

In this example, we override the default NLUX loader component with a custom loader component provided via JSX.

Open Sandbox

import { AiChat, AiChatUI, useAsStreamAdapter } from '@nlux/react';
import '@nlux/themes/nova.css';

import { send } from './send';
import { personas } from './personas';

export default () => {
  const adapter = useAsStreamAdapter(send, []);
  return (
    <AiChat
      conversationOptions={{ layout: 'bubbles' }} personaOptions={ personas }
      displayOptions={{ colorScheme: 'dark' }}
      adapter={ adapter }
    >
      <AiChatUI.Loader>
        <span className="rounded">Loading 🪐</span>
      </AiChatUI.Loader>
    </AiChat>
  );
};

---

Reference Documentation for UI Overrides