remix-nlux/docs/versioned_docs/version-1.0.15/learn/002-get-started/_004-nlux-hugging-face-inference/javascript/005-create-comp.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.

Now that we have the Hugging Face Inference API adapter, we will create the chat component, pass the adapter to it,
and mount it to the DOM.

```tsx
const hfAdapter = createChatAdapter()
    .withEndpoint('<YOUR ENDPOINT URL>')
    .withAuthToken('<YOUR TOKEN>');

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

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).