Skip to main content
Version: v2.x

OpenAI

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

warning

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.


Installation

npm install @nlux/openai-react

Usage

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

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

return <AiChat adapter={adapter} />;
};

Configuration

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


API Key

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

Model

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.'
});