Skip to main content
Version: v2.x


Connect to the OpenAI API directly from the browser, using an API key.


This adapter connects to the OpenAI API directly from the browser using an API key.
The OpenAI API is built for server-side usage and the API key should not be exposed to the client.

You can use this adapter for testing purposes, but in a production setup you should build your own server that connects to the OpenAI API, and use that server with NLUX.

We recommend using NLUX's custom adapters feature to create an adapter for your server.


npm install @nlux/openai-react


import {useUnsafeChatAdapter} from '@nlux/openai-react';
import {AiChat} from '@nlux/react';

export default App = () => {
const adapter = useUnsafeChatAdapter({
// Config options

return <AiChat adapter={adapter} />;


You can configure the OpenAI adapter in React by passing a config object to the useUnsafeChatAdapter() function.
The config object has the following properties:


  • Property: apiKey
  • Type: string
  • Required: true
  • Usage:
const adapter = useUnsafeChatAdapter({
apiKey: 'MY_API_KEY'


The OpenAI model to use.
NLUX only supports chat completion models such as gpt-3.5-turbo and gpt-4-0314.
You can find a list of available models here.

  • Property: model
  • Type: string
  • Usage:
const adapter = useUnsafeChatAdapter({
model: 'gpt-4-32k'

Data Transfer Mode

  • Property: dataTransferMode
  • Type: 'stream' | 'batch'
  • Default: 'stream'
  • Usage:
const adapter = useUnsafeChatAdapter({
dataTransferMode: 'stream'

System Message

The initial system to send to ChatGPT API. This can be used to set the initial context of the conversation, and instruct ChatGPT to use a specific persona.

  • Property: systemMessage
  • Type: string
  • Usage:
const adapter = useUnsafeChatAdapter({
systemMessage: 'I want you to act as a customer support agent.'