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

Open Sandbox

import { AiChat, useAsStreamAdapter } from '@nlux/react';
import '@nlux/themes/nova.css';

import { send } from './send';
import { user } from './personas';

export default () => {
  const adapter = useAsStreamAdapter(send, []);
  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

Open Sandbox

import { AiChat, useAsStreamAdapter } from '@nlux/react';
import '@nlux/themes/nova.css';

import { send } from './send';
import { user, assistantCssStyle } from './personas';

export default () => {
  const adapter = useAsStreamAdapter(send, []);
  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