---
sidebar_label: 'NLUX With React'
---

import Link from '@docusaurus/Link';
import {CodeEditor} from '@site/src/components/CodeEditor/CodeEditor';
import app from './0001-react-js-ai-assistant/app';
import send from './0001-react-js-ai-assistant/send';
import personas from './0001-react-js-ai-assistant/personas';

# NLUX With React

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

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

---

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