import Link from '@docusaurus/Link';
import {CodeEditor} from '@site/src/components/CodeEditor/CodeEditor';
import exampleIntroFileAiChatBot from './0001-react-js-ai-chatbot/aiChatBot.tsx';
import exampleIntroFileStreamAdapter from './0001-react-js-ai-chatbot/adapter.tsx';
import exampleIntroFilePersonas from './0001-react-js-ai-chatbot/personas.tsx';

# `NLUX` React JS

The following example shows how to use **`NLUX` with React JS** to build a simple chatbot.<br />
It uses `NLUX`'s demo API, which connects to the OpenAI GPT-3.5-turbo model.<br />
You can check the file `adapter.ts` to see we connect to the API and stream content as it's being generated.

<Link className="learn-more-link button button--secondary" to="/learn/get-started?platform=react-js">Learn More About NLUX React JS</Link>

<CodeEditor
    files={{
        'App.tsx': exampleIntroFileAiChatBot,
        'adapter.ts': exampleIntroFileStreamAdapter,
        'personas.tsx': exampleIntroFilePersonas,
    }}
    editorHeight={380}
    simulatedPrompt='Explain how quantum computing works.'
/>