remix-nlux/docs/versioned_docs/version-1.0.15/learn/002-get-started/_001-nlux-with-langchain/react-js/004-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 LangServe adapter, we will create the chat component and pass the adapter to it.

```tsx
import {AiChat} from '@nlux/react';
import {useChatAdapter, ChatAdapterOptions} from '@nlux/langchain-react';

const adapterOptions: ChatAdapterOptions = {
    url: 'https://pynlux.api.nlux.ai/pirate-speak'
};

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

    return (
        <AiChat
            adapter={langServeAdapter}
            promptBoxOptions={{
                placeholder: 'How can I help you today?'
            }}
        />
    );
};
```

The `AiChat` component can take several parameters:

* The first parameter `adapter` is the only required parameter, and it is the adapter that we created earlier.
* The second parameter that we provide here is an object that contains the prompt box options. In this case, we are
passing a placeholder text `placeholder` to customize the prompt box.

For full documentation on how to customize the `AiChat` component, please refer to the [AiChat documentation](/reference/ui/ai-chat).