Skip to main content
Version: v2.x

NLUX With React


The following example shows how to use <AiChat /> React JS component to build a simple AI assistant.
It uses NLUX's demo API, which connects to the OpenAI GPT-4o model.
You can check the file adapter.ts to see we connect to the API and stream content as it's being generated.

import {useMemo} from 'react';
import {AiChat} from '@nlux/react';
import '@nlux/themes/nova.css';
import {streamAdapter} from './adapter';
import {personas} from './personas';

export default () => {
    const adapter = useMemo(() => streamAdapter, []);
    return (
        <AiChat
            adapter={adapter}
            personaOptions={personas}
            displayOptions={{colorScheme: 'dark'}}
        />
    );
};

Learn More About NLUX React JS