remix-nlux
Version:
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.
23 lines (16 loc) • 998 B
text/mdx
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).