Now that we have the OpenAI adapter, we will create the chat component, pass the adapter to it, and mount it to the DOM.

```tsx
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!);
});
```

The function `createAiChat()` returns a component builder that allows you to configure the chat component
by chaining method calls. The `withAdapter()` method sets the adapter to be used by the chat component.

Note that `aiChat.mount(<domElement>)` should only be called after the DOM has been loaded.

For full documentation on how to customize the `aiChat` component, please refer to the [AiChat documentation](/reference/ui/ai-chat).