remix-nlux/docs/versioned_docs/version-1.0.15/examples/0003-bot-persona.mdx

Remix IDE NLUX integration. Remix IDE is the leading IDE for building and deploying smart contracts on Ethereum. NLUX is a JavaScript and React library for building conversational AI experiences.

---
sidebar_label: 'Bot Persona'
---

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

import exampleUrlFileAiChatBot from './0003-bot-persona/_a-personas-with-url/aiChatBot.tsx';
import exampleUrlFileStreamAdapter from './0003-bot-persona/_a-personas-with-url/adapter.tsx';
import exampleUrlPersonasConfig from './0003-bot-persona/_a-personas-with-url/personas.tsx';

import exampleJsxFileAiChatBot from './0003-bot-persona/_b-personas-with-jsx/aiChatBot.tsx';
import exampleJsxFileStreamAdapter from './0003-bot-persona/_b-personas-with-jsx/adapter.tsx';
import exampleJsxPersonasConfig from './0003-bot-persona/_b-personas-with-jsx/personas.tsx';

# Bot Persona

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

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

---

## Bot Persona With Photo URL As Picture

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

---

## Bot Persona With JSX As Picture

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