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.

Open Sandbox

import { AiChat, 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
            adapter={ adapter }
            personaOptions={ personas }
            displayOptions={{ colorScheme: 'dark' }}
        />
    );
};

---

Learn More About NLUX React JS