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.
47 lines (39 loc) • 1.34 kB
text/mdx
Your final code will look like this:
```tsx
import {AiChat} from '@nlux/react';
import {useChatAdapter, ChatAdapterOptions} from '@nlux/langchain-react';
import '@nlux/themes/nova.css';
const adapterOptions: ChatAdapterOptions = {
url: 'https://pynlux.api.nlux.ai/pirate-speak',
};
export const App = () => {
const chatGptAdapter = useChatAdapter(adapterOptions);
return (
<AiChat
adapter={chatGptAdapter}
promptBoxOptions={{
placeholder: 'How can I help you today?'
}}
/>
);
};
```
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/parrot-speak-demo.gif")',
backgroundSize: "cover",
}}
alt="AiChat demo"
></div>
Since the LangChain endpoint is instructing the LLM to behave like a Parrot
([created for this example](/examples/langchain-langserve-adapter)), the chatbot will
respond in a fun and playful manner that mimics the persona that of a parrot.
And _NLUX_ is handling all the UI interactions and the communication with LangChain.