Skip to main content

NLUX React JS

The following example shows how to use NLUX with React JS to build a simple chatbot.
It uses NLUX's demo API, which connects to the OpenAI GPT-3.5-turbo model.
You can check the file adapter.ts to see we connect to the API and stream content as it's being generated.

Learn More About NLUX React JS
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}
      layoutOptions={{
        height: 320,
        maxWidth: 600
      }}
    />
  );
};