Once you have configured all of the above, your code will look like this:

```tsx
import {createAiChat} from '@nlux/core';
import {createUnsafeChatAdapter} from '@nlux/langchain';
import '@nlux/themes/nova.css';

const openAiAdapter = createUnsafeChatAdapter()
    .withApiKey('your-openai-api-key-here')
    .withModel('gpt-3.5-turbo')
    .withSystemMessage('Act as a helpful assistant and be funny and engaging.');

const aiChat = createAiChat().withAdapter(openAiAdapter);

document.addEventListener('DOMContentLoaded', () => {
    const chatContainer = document.getElementById('chat-container');
    aiChat.mount(chatContainer!);
});
```

You can now run your app and test the chatbot.<br />
The result is a fully functional chatbot UI:

<div
    style={{
        display: "inline-block",
        border: "1px solid #ddd",
        borderRadius: "4px",
        overflow: "hidden",
        width: "400px",
        height: "387px",
        backgroundImage: 'url("/learn/get-started-guides/open-ai-chatbot-demo.gif")',
        backgroundSize: "cover",
    }}
    alt="AiChat demo"
></div>

And _NLUX_ is handling all the UI interactions and the communication with the OpenAI API.