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

Open Sandbox

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
      }}
    />
  );
};