Skip to main content
Version: v2.x

Assistant And User Personas


With NLUX, you can optionally define a assistant persona and a user persona.
Here are some examples of how you can configure the assistant persona.

Photo URL As Avatar

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

export default () => {
  const adapter = useMemo(() => streamAdapter, []);
  return (
    <AiChat
      personaOptions={{
        assistant: {
          name: 'HarryBotter',
          avatar: 'https://docs.nlkit.com/nlux/images/personas/harry-botter.png',
          tagline: 'Mischievously Making Magic With Mirthful AI!'
        },
        user
      }}
      adapter={adapter}
      displayOptions={{colorScheme: 'dark'}}
    />
  );
};

JSX As Avatar

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

export default () => {
  const adapter = useMemo(() => streamAdapter, []);
  return (
    <AiChat
      personaOptions={{
        assistant: {
          name: 'Emo\'jsx',
          avatar: <span style={assistantCssStyle}>🤖</span>,
          tagline: 'Your Robotic AI Assistant'
        },
        user
      }}
      adapter={adapter}
      displayOptions={{colorScheme: 'dark'}}
    />
  );
};


Learn More About Chat Personas