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.nlkit.com/pirate-speak',
};

export const App = () => {
    const chatGptAdapter = useChatAdapter(adapterOptions);

    return (
        <AiChat
            adapter={chatGptAdapter}
            composerOptions={{
                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("/nlux/images/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.