remix-nlux/docs/versioned_docs/version-1.0.15/learn/002-get-started/_002-nlux-chatgpt-from-browser/react-js/005-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 OpenAI adapter, we will create the chat component and pass the adapter to it.

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

const adapterOptions: ChatAdapterOptions = {
    apiKey: 'your-openai-api-key-here',
    model: 'gpt-3.5-turbo',
    systemMessage: 'Act as a helpful assistant and be funny and engaging.',
};

export const App = () => {
    const openAiAdapter = useUnsafeChatAdapter(adapterOptions);

    return (
        <AiChat
            adapter={openAiAdapter}
            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).