---
sidebar_label: 'Assistant And User Personas'
---

import Link from '@docusaurus/Link';
import {CodeEditor} from '@site/src/components/CodeEditor/CodeEditor';

import app1 from './0008-assistant-persona/_a-personas-with-url/app';
import send1 from './0008-assistant-persona/_a-personas-with-url/send';
import personas1 from './0008-assistant-persona/_a-personas-with-url/personas';

import app2 from './0008-assistant-persona/_b-personas-with-jsx/app';
import send2 from './0008-assistant-persona/_b-personas-with-jsx/send';
import personas2 from './0008-assistant-persona/_b-personas-with-jsx/personas';

# Assistant And User Personas

With `NLUX`, you can optionally define **a assistant persona** and **a user persona**.<br />
Here are some examples of how you can configure the assistant persona.

## Photo URL As Avatar

<CodeEditor
    files={{
        'App.tsx': app1,
        'send.ts': send1,
        'personas.tsx': personas1,
    }}
    editorHeight={380}
    simulatedPrompt={'What\'s the funniest magic spell that Harry Potter learned at Hog-Warts School of Witchcraft and Wizardry?'}
/>

## JSX As Avatar

<CodeEditor
    files={{
        'App.tsx': app2,
        'send.ts': send2,
        'personas.tsx': personas2,
    }}
    editorHeight={380}
    simulatedPrompt={'Do you think we could have a thoughtful debate about physics with ChatGPT?'}
/>

---

<Link className="button button--secondary" to="/learn/chat-personas">Learn More About Chat Personas</Link>
