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.
39 lines (31 loc) • 1.18 kB
text/mdx
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.